Thursday, 31 December 2015

Bootstrap / JS based page has me confused, need help sorting it out / accessing html

So firstly thanks for taking the time to read this, it's much appreciated. So I'm working on a site for my employer, and the page in question is a JS-driven map to find electric car charging stations (this is proving to be problematic, as I'm not super fluent in .js), when I take a look at the .html page, there are a bunch of elements I don't recognize, and I cannot for the life of me find where I can edit the HTML elements, as they seem to be pulled from elsewhere. Here is the HTML in question,

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="Find electric vehicle charging station using ChargeHub's simple and powerful map."> <meta name="author" content="ChargeHub"> <meta name="apple-itunes-app" content="app-id=548640732"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="shortcut icon" href="http://ift.tt/1OmYMc8; /> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://ift.tt/1OuE45N; /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://ift.tt/1OmYJx8; /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://ift.tt/1OuE45P; /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://ift.tt/1OmYMcc; /> <link rel="apple-touch-icon-precomposed" sizes="60x60" href="http://ift.tt/1OuE4my; /> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://ift.tt/1OmYMce; /> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://ift.tt/1OuE45R; /> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://ift.tt/1OmYJxa; /> <link rel="icon" type="image/png" href="http://ift.tt/1OuE4CQ; sizes="196x196" /> <link rel="icon" type="image/png" href="http://ift.tt/1OmYJNq; sizes="96x96" /> <link rel="icon" type="image/png" href="http://ift.tt/1OuE45Z; sizes="64x64" /> <link rel="icon" type="image/png" href="http://ift.tt/1OmYJNs; sizes="48x48" /> <link rel="icon" type="image/png" href="http://ift.tt/1OuE463; sizes="32x32" /> <link rel="icon" type="image/png" href="http://ift.tt/1OmYMci; sizes="24x24" /> <link rel="icon" type="image/png" href="http://ift.tt/1OuE4CY; sizes="16x16" /> <link rel="icon" type="image/png" href="http://ift.tt/1OmYMck; sizes="128x128" /> <meta name="msapplication-square70x70logo" content="http://ift.tt/1OmYMcm; /> <meta name="msapplication-square150x150logo" content="http://ift.tt/1OuE4D4; /> <meta name="msapplication-wide310x150logo" content="http://ift.tt/1OmYMsA; /> <meta name="msapplication-square310x310logo" content="http://ift.tt/1OuE71r; /> <meta name="msapplication-TileColor" content="#ffffff"/> <title>ChargeHub - Charging Stations Map</title> <!-- CSS Links --> <!-- Bootstrap core CSS --> <link href="/css/bootstrap.css" rel="stylesheet"> <link href="/css/style.css" rel="stylesheet"> <link href="/css/bootstrap-social.css" rel="stylesheet"> <link href="/css/font-awesome.css" rel="stylesheet"> <link href="/css/docs.css" rel="stylesheet" > <link href="/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" /> <link href="/css/slider.css" rel="stylesheet" > <!-- Custom CSS styles --> <link href="/css/CustomStyles.css" rel="stylesheet" > <!-- Sidebar css --> <link href="css/simple-sidebar.css" rel="stylesheet"> <!-- blueimp css --> <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css"> <link rel="stylesheet" href="css/bootstrap-image-gallery.min.css"> <!-- Custom Css --> <style> .searchdisp{ width:auto; padding:10px;} .searchdisp li{ width:100%; border-bottom:1px solid #CCCCCC; list-style:none;} .search-suggest{z-index: 2; position: absolute; top: 79px; left: 10px; background-color:#FFFFFF; max-height:300px; overflow-y:scroll; display:none;} </style> <!-- Google Analytics --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-54045720-1', 'auto'); ga('send', 'pageview'); </script> 

</head>

<body>

<!-- comments Modal --> <div class="modal fade bs-modal-sm" id="commentsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <textarea cols="86" id="textareaID"></textarea> </div> </div> </div> <!-- end of comments Modal --> <!-- Google Tag Manager --> <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WSZHD8" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WSZHD8');</script> <!-- End Google Tag Manager --> <!-- Odd Containers --> <div id="fb-root"></div> <div id="wrapper"></div> <div id="spinner"></div> <div id="right-panel"></div> <div id="spinnerSearchDiv"> <div id="spinnerSearch"></div> </div> <div id="map_canvas" class="map_canvas"></div> <div id="search_suggst" class="search-suggest" ></div> <div id="toast" class="alert alert-info" role="alert"></div> <!-- Various Content --> <input type="hidden" id="chkRefresh" value="No"> <button id="zoomin" type="button" class="btn btn-default btn-lg hidden" onclick="zoomIn()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> <button id="zoomout" type="button" class="btn btn-default btn-lg hidden" onclick="zoomOut()"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button> <div id="madefortesla" class="hidden"> <img src="/images/madefortesla.png" width="200" height="100"/> </div> <!-- Javascript Links --> <script type="text/javascript" src="http://ift.tt/1OmYJNu; <script src="http://ift.tt/1Ml5TAr; <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="http://ift.tt/1OuE71z; <script src="/js/bootstrap.min.js"></script> <script src="http://ift.tt/1OmYMsC; <!--<script async src="http://ift.tt/1OuE71D; <script src="/dist/spin.min.js"></script> <script src="/js/bootstrap-dialog.min.js"></script> <script src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/src/geolocationmarker-compiled.js"></script> <script src="/scripts/http://ift.tt/1OmYJNw; <!-- Classes --> <script src="/js/Comment.js"></script> <script src="/js/Station.js"></script> <script src="/js/filters.js"></script> <!-- Mega functions Holder --> <script src="/js/functions.js"></script> <!-- custom multi-langual --> <script src="/js/stringTranslation.js"></script> <!-- Custom index javascript --> <script src="/js/Map.js"></script> <!-- Used to show password and hide it --> <script src="/js/bootstrap-show-password.js"></script> <script type="text/javascript"> setTimeout(function(){var a=document.createElement("script"); var b=document.getElementsByTagName("script")[0]; a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/0029/7284.js?"+Math.floor(new Date().getTime()/3600000); a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1); </script> 

</body> </html>

It would be greatly appreciated if somebody could help me wrap my head around how this is being populated, and how with knowledge only of HTML & CSS I can make some style changes to this page, and not the rest of the site where the elements also exist. Thanks in advance.



Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted December 31, 2015 at 04:03PM by TokerCoughin http://ift.tt/1mlnwHx

No comments:

Post a Comment