UTSCMap

Developer
Neeilan Selvalingam
Size
3,292 Kb
Views
30,360
  1. UTSCMap Previews
  2. UTSCMap HTML Codes
  3. UTSCMap CSS Codes
  4. UTSCMap JS Codes

How do I make an utscmap?

What is a utscmap? How do you make a utscmap? This script and codes were developed by Neeilan Selvalingam on 13 September 2022, Tuesday.

UTSCMap Previews
IQ Test

UTSCMap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>UTSCMap</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head> <title>UTSC Map</title> <meta property="og:image" content="http://mindsmattermagazine.com/wp-content/uploads/2015/01/mmm_logo_white_bg.png" /> <meta name="description" content="Maps of the UTSC campus for students at UTSC" /> <meta name="theme-color" content="#b2ebf2" /> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <script src="http://mindsmattermagazine.com/wp-content/uploads/libraries/jquery-2.2-min.js"></script> <script src="http://mindsmattermagazine.com/wp-content/uploads/libraries/jquery-flowchart.js"></script> <script src="http://mindsmattermagazine.com/wp-content/uploads/libraries/panzoom.js"></script>
</head>
<body> <nav> <button title="Back" class="navbutton" id="fc-back"><i class="fa fa-arrow-circle-o-left"></i></button> <button title="Minds Matter Magazine" class="navbutton" id="mmmLink"><i class="fa fa-newspaper-o"></i></button> <button title="Resource Navigator" class="navbutton" id="rnLink"><i class="fa fa-compass"></i></button> <br> </nav> <div class="fc-card animated" id="fc-main"> Select a building to explore:<br/> <button class="fc-btn" id="Bbv">BV</button> <button class="fc-btn" id="Bic">IC</button> <button class="fc-btn" id="Bsw">SW</button> <button class="fc-btn" id="Bsl">SL</button> <div class="image-card"> <img class="mapImage" src="http://mindsmattermagazine.com/wp-content/uploads/utsc-map/Map.jpg" /> </div> </div> <div class="fc-card image-card animated" id="Cbv"> <img class="mapImage" src="http://mindsmattermagazine.com/wp-content/uploads/utsc-map/bv.jpg" /> </div> <div class="fc-card image-card animated" id="Cic"> <img class="mapImage" src="http://mindsmattermagazine.com/wp-content/uploads/utsc-map/ic.jpg" /> </div> <div class="fc-card image-card animated" id="Csw"> <img class="mapImage" src="http://mindsmattermagazine.com/wp-content/uploads/utsc-map/sw.jpg" /> </div> <div class="fc-card image-card animated" id="Csl"> <img class="mapImage" src="http://mindsmattermagazine.com/wp-content/uploads/utsc-map/sl.jpg" /> </div> <br/> <div class="buttons col-md-8 col-md-offset-2 col-xs-12" id="zoomControls"> <div id="zcInner"> <input type="range" class="zoom-range"> <br/> <button class="zcBtn zoom-out">Zoom Out</button> <button class="zcBtn zoom-in">Zoom In</button> <button class="zcBtn reset">Reset</button> </div> </div> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</body> <script src="js/index.js"></script>
</body>
</html>

UTSCMap - Script Codes CSS Codes

body { padding-top: 80px; background: #00b8d4; font-family: Roboto; color: white; overflow-x: hidden; text-align: center;
}
nav { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 70px; text-align: center; padding-top: 20px; padding-bottom: 15px; background: #018899;
}
.navbutton { color: #b2ebf2; background: none; font-size: 22px; border: none; margin-left: 2.5%; margin-right: 2.5%;
}
.navbutton:hover { color: #4dd0e1;
}
.mapImage { width: 100%; border-radius: 5px; margin-bottom: 10px;
}
.fc-btn { padding: 15px; margin-top: 10px; margin-bottom: 10px; font-size: 14px; background: #0097a7; color: white; border: none; break-inside: avoid-column; break-inside: avoid; border-radius: 5px;
}
.fc-btn:hover,.zcBtn:hover { background: #006064;
}
#zoomControls { position: fixed; z-index: 150; bottom: 15px; padding-left: 10px; padding-right: 10px;
}
#zcInner { background: rgba(0, 153, 153, 0.5); padding: 10px; border-radius: 5px;
}
.zcBtn{ background:white; color: #0097a7; border: none; padding:10px; border-radius:5px;
}
#mainMapContainer { padding-bottom: 200px;
}

UTSCMap - Script Codes JS Codes

$(document).ready(function() { $(".fc-card").addClass("col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-xs-12"); $("body").fc("fadeIn", "fadeOut", 600); var $body = $("body"); var $panzoom = $body.find('.image-card').panzoom( { panOnlyWhenZoomed: true, maxScale : 6, $zoomIn: $body.find(".zoom-in"), $zoomOut: $body.find(".zoom-out"), $zoomRange: $body.find(".zoom-range"), $reset: $body.find(".reset"), increment: 0.1, contain: false }); $panzoom.parent().on('mousewheel.focal', function(e) { e.preventDefault(); var delta = e.delta || e.originalEvent.wheelDelta; var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0; $panzoom.panzoom('zoom', zoomOut, { animate: false, focal: e }); }) $("#rnLink").click(function() { window.location.href = "https://s.codepen.io/neeilan/debug/qqgGLg" }) $("#mmmLink").click(function() { window.location.href = "http://www.mindsmattermagazine.com" })
})
UTSCMap - Script Codes
UTSCMap - Script Codes
Home Page Home
Developer Neeilan Selvalingam
Username neeilan
Uploaded September 13, 2022
Rating 3
Size 3,292 Kb
Views 30,360
Do you need developer help for UTSCMap?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Neeilan Selvalingam (neeilan) Script Codes
Name
GameOfLife
Firebase-test
Scribe
NeeilTwitch
TTTnoAI
RenderTest
Simon Game
MarkdownPreviewer
NeeilWeather
ResourcesSearch
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!