I am loading Google Map with some customised markers in my HTML. However, the map gets greyed out when the page is loaded. Other than the greyed out box, it works fine as i can move around within the window box and when i maximise the map and minimise again, the map works like it should.
I read online that it might be due to bootstrap 3 and the following code will help solve the issue. but i have been adding this code around the google map script but it does resolve the problem. Is this the solution? and where should i add this?
$(window).resize(function () {
google.maps.event.trigger(map, 'resize');
});
My HTML Codes are as follows and the script to load the map is at the bottom.
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Tagora.travel</title>
<!-- Fonts -->
<!-- Default stylesheets-->
<link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Template specific stylesheets-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Volkhov:400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="assets/lib/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/lib/et-line-font/et-line-font.css" rel="stylesheet">
<!-- Main stylesheet and color file-->
<link href="assets/css/style.css" rel="stylesheet">
<link id="color-scheme" href="assets/css/colors/default.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".onpage-navigation" data-offset="60">
<main>
<!-- Loading Gif-->
<div class="page-loader">
<div class="loader">Loading...</div>
</div>
<!-- navbar-->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="Tagora.travel.html"><img src="assets/images/tagoralogo.png" alt="Tagora Logo"></a>
<div id="search-form" >
<form method="get" action="#">
<input type="text" name="Search" value="Search" onFocus="if (this.value == 'Search') this.value = '';" onBlur="if (this.value == '') this.value = 'Search';" />
</form>
</div>
</div>
<div class="collapse navbar-collapse" id="custom-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Cities</a>
<ul class="dropdown-menu">
<li>Bali</li>
<li><a href="#" >Bandung</a></li>
<li><a href="#" >Komodo Islands</a></li>
<li><a href="#" >Gili Islands</a></li>
<li><a href="#" >Yogyakarta</a></li>
<li><a href="#" >Nusa Tenggara</a></li>
</ul>
</li>
<li><a href="aboutus.html" >About Us</a></li>
<li><a href="contact.html" >Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="main">
<!-- About Us Picture with Quote-->
<section id="modpictureitinerary" class="module-small bg-dark-60 shop-page-header" data-background="assets/images/bali.jpg">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1 class="module-title font-alt">Bali</h1>
<div class="module-subtitle font-serif">Bali is a living postcard, an Indonesian paradise that feels like a fantasy. Soak up the sun on a stretch of fine white sand, or commune with
the tropical creatures as you dive along coral ridges or the colorful wreck of a WWII war ship. On shore, the lush jungle shelters stone temples
and mischievous monkeys.</div>
</div>
</div>
</div>
</section>
<!-- Specially Crafted Quote-->
<section class="module-itinerary">
<div class="container">
<div class="col-sm-3 col-md-2 col-lg-2">
<div class="font-serif operator-name">
Crafted by <br>
<b><span class="large-text">Di Bali Tour</span></b><br>
Est. Since 2008
</div>
</div>
<div class="col-sm-3 col-md-2 col-lg-2">
<div id="TA_cdsratingsonlynarrow572" class="TA_cdsratingsonlynarrow">
<ul id="gUjYoJi" class="TA_links mnhoDbKF8">
<li id="ps2SrlKHA" class="nLHVd5g">
<a target="_blank" href="https://www.tripadvisor.com.sg/"><img src="https://www.tripadvisor.com.sg/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="module-itinerary">
<div class="container">
<div class="row mt-70">
<div class="col-sm-12">
<ul class="nav nav-tabs font-alt font-nav-tabs" role="tablist">
<li class="active">Itinerary</li>
<li>Inclusions & Exclusions</li>
<li>Reviews</li>
<li>Locations</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="itinerary">
<h3><b>Best of Bali (Private Tour)</b></h3>
<h4>Want to see the best bits of Bali in just one day? This private full-day tour includes a visit to Batuan temple, the UNESCO-listed Tegalalang rice terraces and the Ubud Art Villages.
That’s not all: you’ll also get chance to learn about Luwak coffee and other Balinese coffee and tea, jump into the Tegenungan waterfall and shop for hand-made Balinese arts and crafts. All that, plus hotel pick-up and private transportation!
</h4>
<h3><b>Highlights</b></h3>
<ul>
<li><h4>Full-day private ‘Best of Bali’ tour from Ubud</h4></li>
<li><h4>Visit Batuan temple and the Tegalalang rice terraces</h4></li>
<li><h4>Cool off with a swim at Tegenungan waterfall</h4></li>
<li><h4>Tour a coffee plantation</h4></li>
<li><h4>Discover Balinese art and handicrafts in the Ubud Art Villages</h4></li>
<li><h4>Great value tour includes hotel pick-up and round-trip transport</h4></li>
<li><h4>This private tour can be customized to your interests</h4></li>
</ul>
<h3><b>What You Can Expect</b></h3>
<h4>Meet your driver at your Bali hotel and begin your Best of Bali tour with a visit to Batuan Temple. Marvel at the beautiful Hindu temple as you learn its spiritual significance and points out the magnificent architecture and unique black palm roof. Next, visit Tegenungan Waterfall, where you can cool off with a swim beneath the falls or even brave a jump from the top of the 49-foot (15-meter) high falls. Continue north to Tegalalang to marvel at the UNESCO-listed rice terraces, one of Bali’s most photographed sights. Learn about the pioneering ‘subak’ system – the Balinese cooperative irrigation system – for which the terraces are known, as you admire the views over the rice paddies. After lunch (own expense), discover Indonesia’s world famous Luwak coffee at a local coffee plantation. Learn about the unusual method of producing the coffee, which involves the coffee berries being eaten and defecated by Asian palm civets, then collecting the part-digested beans from the forest floor. After sampling the other coffees and teas made at the plantation, perhaps opt to taste a Luwak coffee too (extra cost). In the afternoon, indulge your creative side with a visit to the Ubud Art Villages and discover the vibrant traditions of Balinese arts and handicrafts. Visit the woodcarving village of Mas, admire the fine Silver Filigree jewelry made in Celuk and watch a Batik painting demonstration in Tohpati Village. Finally, after an action-packed full-day itinerary, finish your tour with drop-off at your hotel.
</h4>
</div>
<div class="tab-pane" id="data-sheet">
<h3><b>Inclusions</b></h3>
<ul>
<li><h4>Hotel pickup and drop-off in Ubud, Canggu, Seminyak, Legian, Kuta, Tuban, Jimbaran, Sanur, Denpasar, Tanjung Benoa, or Nusa Dua area</h4></li>
<li><h4>Transport by private air-conditioned vehicle</h4></li>
<li><h4>English speaking driver (who will accompany you all day)</h4></li>
<li><h4>All entrance fees as per itinerary</h4></li>
<li><h4>Fuel fees</h4></li>
<li><h4>Taxes</h4></li>
</ul>
<h3><b>Exclusions</b></h3>
<ul>
<li><h4>Food and drinks (available to purchase)</h4></li>
<li><h4>Gratuities (optional)</h4></li>
<li><h4>Personal expenses</h4></li>
</ul>
</div>
<div class="tab-pane" id="reviews">
<div id="TA_selfserveprop109" class="TA_selfserveprop">
<ul id="SCyvxMFVI8X" class="TA_links HMIUYNM8Hl">
<li id="HH0xKeUSG" class="sXdLmWPfG">
<a target="_blank" href="https://www.tripadvisor.com.sg/"><img src="https://www.tripadvisor.com.sg/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="Location">
<section id="map-section">
<div id="map" ></div>
</section>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer-->
<hr class="divider-d">
<footer class="footer bg-dark">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p class="copyright font-alt">© 2017 Tagora.travel, All Rights Reserved</p>
</div>
<div class="col-sm-6">
<div class="footer-social-links"><i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-dribbble"></i><i class="fa fa-skype"></i>
</div>
</div>
</div>
</div>
</footer>
</div>
<div class="scroll-up"><i class="fa fa-angle-double-up"></i></div>
</main>
<!-- JavaScripts -->
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/lib/wow/dist/wow.js"></script>
<script src="assets/lib/isotope/dist/isotope.pkgd.js"></script>
<script src="assets/lib/imagesloaded/imagesloaded.pkgd.js"></script>
<script src="assets/lib/smoothscroll.js"></script>
<script src="assets/lib/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="assets/lib/simple-text-rotator/jquery.simple-text-rotator.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=572&locationId=6894357&lang=en_SG&border=true&display_version=2"></script>
<script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=109&locationId=6894357&lang=en_SG&rating=false&nreviews=4&writereviewlink=true&popIdx=false&iswide=true
&border=false&display_version=2"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyAweoP_TE8ov0X6TsaozZdfWQLAvpJIQZQ"></script>
<script type="text/javascript">
google.maps.event.trigger(map, 'resize');
var locations = [
['Bali Coffee Plantation', -8.703186, 115.212971, 4],
['Ubud Art Market', -8.507060, 115.262597, 5],
['Tegenungan Waterfall', -8.575291, 115.288575, 3],
['Tegalalang Rice Terrace', -8.434040, 115.279257, 2],
['Batuan Temple', -8.581871, 115.276005, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng( -8.409518, 115.188916),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</html>
Relevant CSS properties are as follows
#map-section {
position: relative;
height: 450px;
width: 100%;
}
#map {
height: 400px;
width: 450px;
overflow:visible;
}
The following little snippet suggests jQuery is used but as there is no reference to jQuery in the tags associated with this question I used vanilla javascript below.
$(window).resize(function () {
google.maps.event.trigger(map, 'resize');
});
To use the google resize method you need to listen for window resize events - either by window.onresize or window.addEventListener('resize'...
<script type="text/javascript">
var locations = [
['Bali Coffee Plantation', -8.703186, 115.212971, 4],
['Ubud Art Market', -8.507060, 115.262597, 5],
['Tegenungan Waterfall', -8.575291, 115.288575, 3],
['Tegalalang Rice Terrace', -8.434040, 115.279257, 2],
['Batuan Temple', -8.581871, 115.276005, 1]
];
var map = new google.maps.Map( document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng( -8.409518, 115.188916),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng( locations[i][1], locations[i][2] ),
title:locations[i][0],/* assign the title - will be shown in infowindow onclick */
map: map
});
google.maps.event.addListener( marker, 'click', function(event){
infowindow.setContent( this.title );
infowindow.open(map, this);
}.bind( marker ) );/* bind event listener to this marker*/
}
/* bind an event listener to window resize to then trigger the google map resize method */
window.addEventListener('resize',function(){
google.maps.event.trigger( map, 'resize' );
},false);
</script>
After commenting out the assets not available to me to give the following:
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Tagora.travel</title>
<!-- Fonts -->
<!-- Default stylesheets-->
<!--
<link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-->
<!-- Template specific stylesheets-->
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Volkhov:400i" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!--
<link href="assets/lib/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/lib/et-line-font/et-line-font.css" rel="stylesheet">
-->
<!-- Main stylesheet and color file-->
<!--
<link href="assets/css/style.css" rel="stylesheet">
<link id="color-scheme" href="assets/css/colors/default.css" rel="stylesheet">
-->
</head>
<body data-spy="scroll" data-target=".onpage-navigation" data-offset="60">
<main>
<!-- Loading Gif-->
<div class="page-loader">
<div class="loader">Loading...</div>
</div>
<!-- navbar-->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="Tagora.travel.html"><img src="assets/images/tagoralogo.png" alt="Tagora Logo"></a>
<div id="search-form" >
<form method="get" action="#">
<input type="text" name="Search" value="Search" onFocus="if (this.value == 'Search') this.value = '';" onBlur="if (this.value == '') this.value = 'Search';" />
</form>
</div>
</div>
<div class="collapse navbar-collapse" id="custom-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Cities</a>
<ul class="dropdown-menu">
<li>Bali</li>
<li><a href="#" >Bandung</a></li>
<li><a href="#" >Komodo Islands</a></li>
<li><a href="#" >Gili Islands</a></li>
<li><a href="#" >Yogyakarta</a></li>
<li><a href="#" >Nusa Tenggara</a></li>
</ul>
</li>
<li><a href="aboutus.html" >About Us</a></li>
<li><a href="contact.html" >Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="main">
<!-- About Us Picture with Quote-->
<section id="modpictureitinerary" class="module-small bg-dark-60 shop-page-header" data-background="assets/images/bali.jpg">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1 class="module-title font-alt">Bali</h1>
<div class="module-subtitle font-serif">Bali is a living postcard, an Indonesian paradise that feels like a fantasy. Soak up the sun on a stretch of fine white sand, or commune with
the tropical creatures as you dive along coral ridges or the colorful wreck of a WWII war ship. On shore, the lush jungle shelters stone temples
and mischievous monkeys.</div>
</div>
</div>
</div>
</section>
<!-- Specially Crafted Quote-->
<section class="module-itinerary">
<div class="container">
<div class="col-sm-3 col-md-2 col-lg-2">
<div class="font-serif operator-name">
Crafted by <br>
<b><span class="large-text">Di Bali Tour</span></b><br>
Est. Since 2008
</div>
</div>
<div class="col-sm-3 col-md-2 col-lg-2">
<div id="TA_cdsratingsonlynarrow572" class="TA_cdsratingsonlynarrow">
<ul id="gUjYoJi" class="TA_links mnhoDbKF8">
<li id="ps2SrlKHA" class="nLHVd5g">
<a target="_blank" href="https://www.tripadvisor.com.sg/"><img src="https://www.tripadvisor.com.sg/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="module-itinerary">
<div class="container">
<div class="row mt-70">
<div class="col-sm-12">
<ul class="nav nav-tabs font-alt font-nav-tabs" role="tablist">
<li class="active">Itinerary</li>
<li>Inclusions & Exclusions</li>
<li>Reviews</li>
<li>Locations</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="itinerary">
<h3><b>Best of Bali (Private Tour)</b></h3>
<h4>Want to see the best bits of Bali in just one day? This private full-day tour includes a visit to Batuan temple, the UNESCO-listed Tegalalang rice terraces and the Ubud Art Villages.
That’s not all: you’ll also get chance to learn about Luwak coffee and other Balinese coffee and tea, jump into the Tegenungan waterfall and shop for hand-made Balinese arts and crafts. All that, plus hotel pick-up and private transportation!
</h4>
<h3><b>Highlights</b></h3>
<ul>
<li><h4>Full-day private ‘Best of Bali’ tour from Ubud</h4></li>
<li><h4>Visit Batuan temple and the Tegalalang rice terraces</h4></li>
<li><h4>Cool off with a swim at Tegenungan waterfall</h4></li>
<li><h4>Tour a coffee plantation</h4></li>
<li><h4>Discover Balinese art and handicrafts in the Ubud Art Villages</h4></li>
<li><h4>Great value tour includes hotel pick-up and round-trip transport</h4></li>
<li><h4>This private tour can be customized to your interests</h4></li>
</ul>
<h3><b>What You Can Expect</b></h3>
<h4>Meet your driver at your Bali hotel and begin your Best of Bali tour with a visit to Batuan Temple. Marvel at the beautiful Hindu temple as you learn its spiritual significance and points out the magnificent architecture and unique black palm roof. Next, visit Tegenungan Waterfall, where you can cool off with a swim beneath the falls or even brave a jump from the top of the 49-foot (15-meter) high falls. Continue north to Tegalalang to marvel at the UNESCO-listed rice terraces, one of Bali’s most photographed sights. Learn about the pioneering ‘subak’ system – the Balinese cooperative irrigation system – for which the terraces are known, as you admire the views over the rice paddies. After lunch (own expense), discover Indonesia’s world famous Luwak coffee at a local coffee plantation. Learn about the unusual method of producing the coffee, which involves the coffee berries being eaten and defecated by Asian palm civets, then collecting the part-digested beans from the forest floor. After sampling the other coffees and teas made at the plantation, perhaps opt to taste a Luwak coffee too (extra cost). In the afternoon, indulge your creative side with a visit to the Ubud Art Villages and discover the vibrant traditions of Balinese arts and handicrafts. Visit the woodcarving village of Mas, admire the fine Silver Filigree jewelry made in Celuk and watch a Batik painting demonstration in Tohpati Village. Finally, after an action-packed full-day itinerary, finish your tour with drop-off at your hotel.
</h4>
</div>
<div class="tab-pane" id="data-sheet">
<h3><b>Inclusions</b></h3>
<ul>
<li><h4>Hotel pickup and drop-off in Ubud, Canggu, Seminyak, Legian, Kuta, Tuban, Jimbaran, Sanur, Denpasar, Tanjung Benoa, or Nusa Dua area</h4></li>
<li><h4>Transport by private air-conditioned vehicle</h4></li>
<li><h4>English speaking driver (who will accompany you all day)</h4></li>
<li><h4>All entrance fees as per itinerary</h4></li>
<li><h4>Fuel fees</h4></li>
<li><h4>Taxes</h4></li>
</ul>
<h3><b>Exclusions</b></h3>
<ul>
<li><h4>Food and drinks (available to purchase)</h4></li>
<li><h4>Gratuities (optional)</h4></li>
<li><h4>Personal expenses</h4></li>
</ul>
</div>
<div class="tab-pane" id="reviews">
<div id="TA_selfserveprop109" class="TA_selfserveprop">
<ul id="SCyvxMFVI8X" class="TA_links HMIUYNM8Hl">
<li id="HH0xKeUSG" class="sXdLmWPfG">
<a target="_blank" href="https://www.tripadvisor.com.sg/"><img src="https://www.tripadvisor.com.sg/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="Location">
<section id="map-section">
<div id="map" ></div>
</section>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer-->
<hr class="divider-d">
<footer class="footer bg-dark">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p class="copyright font-alt">© 2017 Tagora.travel, All Rights Reserved</p>
</div>
<div class="col-sm-6">
<div class="footer-social-links"><i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-dribbble"></i><i class="fa fa-skype"></i>
</div>
</div>
</div>
</div>
</footer>
</div>
<div class="scroll-up"><i class="fa fa-angle-double-up"></i></div>
</main>
<!-- JavaScripts -->
<!--
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/lib/wow/dist/wow.js"></script>
<script src="assets/lib/isotope/dist/isotope.pkgd.js"></script>
<script src="assets/lib/imagesloaded/imagesloaded.pkgd.js"></script>
<script src="assets/lib/smoothscroll.js"></script>
<script src="assets/lib/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="assets/lib/simple-text-rotator/jquery.simple-text-rotator.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
-->
<script src="//www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=572&locationId=6894357&lang=en_SG&border=true&display_version=2"></script>
<script src="//www.jscache.com/wejs?wtype=selfserveprop&uniq=109&locationId=6894357&lang=en_SG&rating=false&nreviews=4&writereviewlink=true&popIdx=false&iswide=true&border=false&display_version=2"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAweoP_TE8ov0X6TsaozZdfWQLAvpJIQZQ"></script>
<style>
#map{
width:800px;
height:600px;
}
</style>
<script type="text/javascript">
var locations = [
['Bali Coffee Plantation', -8.703186, 115.212971, 4],
['Ubud Art Market', -8.507060, 115.262597, 5],
['Tegenungan Waterfall', -8.575291, 115.288575, 3],
['Tegalalang Rice Terrace', -8.434040, 115.279257, 2],
['Batuan Temple', -8.581871, 115.276005, 1]
];
var map = new google.maps.Map( document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng( -8.409518, 115.188916),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng( locations[i][1], locations[i][2] ),
title:locations[i][0],/* assign the title - will be shown in infowindow onclick */
map: map
});
google.maps.event.addListener( marker, 'click', function(event){
infowindow.setContent( this.title );
infowindow.open(map, this);
}.bind( marker ) );/* bind event listener to this marker*/
}
/* bind an event listener to window resize to then trigger the google map resize method */
window.addEventListener('resize',function(){
google.maps.event.trigger( map, 'resize' );
},false);
</script>
</html>
One thing to note is the lack of closing </body> tag!
Related
I have an index.html and map.html. the index is running fine on the home page through the flask app, but when i put /map.html on the browser it takes me to a map of the USA. Whereas when i run map.html through the live server, it takes me to a map of Chicago, which is what i want rendered through the flask.
# We import Flask
from flask import Flask, render_template,jsonify
import json
from pymongo import MongoClient
from connections import readMongoCloud
# We create a Flask app
app = Flask(__name__)
# We establish a Flask route so that we can serve HTTP traffic on that route
#app.route('/')
def home():
# We hardcode some information to be returned
return render_template('index.html')
# We create a route to the map.html which should show tech_hub_crime.js data
#app.route('/map.html')
def map():
# We hardcode some information to be returned
return render_template('map.html')
#app.route("/readData")
def read():
# Replace arguments with the name of your database and collection on mongodb
db_df = readMongoCloud("ACSData","ACS2019_commute")
return jsonify(db_df.to_dict('records'))
# Get setup so that if we call the app directly (and it isn't being imported elsewhere)
# it will then run the app with the debug mode as True
# More info - https://docs.python.org/3/library/__main__.html
if __name__ == '__main__':
app.run(debug=True)
Below is the map.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Tech Hub Crime</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="../static/img/favicon.png" rel="icon">
<link href="../static/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="../static/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="../static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../static/vendor/venobox/venobox.css" rel="stylesheet">
<link href="../static/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="../static/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="../static/css/style.css" rel="stylesheet">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin="" />
<!-- Our CSS -->
<link rel="stylesheet" href="../static/css/mapstyle.css" />
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container">
<div class="logo float-left">
<h1 class="text-light"><span>Cyberstates</span></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="../static/img/logo.png" alt="" class="img-fluid">-->
</div>
<nav class="nav-menu float-right d-none d-lg-block">
<ul>
<li>Home</li>
< <li>Tech Articles</li>
<li>Team</li>
<li class="drop-down">Interactive Data
<ul>
<li class="active">Tech Hub Map Data</li>
<li>Trending Tech Occupations</li>
<li>Tech Hub Comparisons</li>
</ul>
</li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- Map -->
<div id="map"></div>
<!-- <div id="chicago-map"></div>
<div id="nyc-map"></div>
<div id="sf-map"></div>
<div id="austin-map"></div> -->
<!-- ======= Footer ======= -->
<footer id="footer" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
<div class="footer-newsletter">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h4>Our Newsletter</h4>
<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
</div>
<div class="col-lg-6">
<form action="" method="post">
<input type="email" name="email"><input type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</div>
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> Home</li>
<li><i class="bx bx-chevron-right"></i> About us</li>
<li><i class="bx bx-chevron-right"></i> Services</li>
<li><i class="bx bx-chevron-right"></i> Terms of service</li>
<li><i class="bx bx-chevron-right"></i> Privacy policy</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Our Services</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> Web Design</li>
<li><i class="bx bx-chevron-right"></i> Web Development</li>
<li><i class="bx bx-chevron-right"></i> Product Management</li>
<li><i class="bx bx-chevron-right"></i> Marketing</li>
<li><i class="bx bx-chevron-right"></i> Graphic Design</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-contact">
<h4>Contact Us</h4>
<p>
A108 Adam Street <br>
New York, NY 535022<br>
United States <br><br>
<strong>Phone:</strong> +1 5589 55488 55<br>
<strong>Email:</strong> info#example.com<br>
</p>
</div>
<div class="col-lg-3 col-md-6 footer-info">
<h3>About Moderna</h3>
<p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita
valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
<div class="social-links mt-3">
<i class="bx bxl-twitter"></i>
<i class="bx bxl-facebook"></i>
<i class="bx bxl-instagram"></i>
<i class="bx bxl-linkedin"></i>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
© Copyright <strong><span>Moderna</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/ -->
Designed by BootstrapMade
</div>
</div>
</footer><!-- End Footer -->
<i class="icofont-simple-up"></i>
<!-- API key -->
<script type="text/javascript" src="../static/js/config.js"></script>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<!-- D3 CDN -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- JS -->
<script type="text/javascript" src="../static/js/tech_hub_crime.js"></script>
<!-- Leaflet-Choropleth JavaScript -->
<script type="text/javascript" src="../static/js/choropleth.js"></script>
<!-- Vendor JS Files -->
<script src="../static/vendor/jquery/jquery.min.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../static/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="../static/vendor/php-email-form/validate.js"></script>
<script src="../static/vendor/venobox/venobox.min.js"></script>
<script src="../static/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="../static/vendor/counterup/counterup.min.js"></script>
<script src="../static/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="../static/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="../static/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="../static/js/main.js"></script>
</body>
</html>
Below is the JS file that i want to render through map.html
function crime_map(coordinates) {
var map = L.map("map", {
center: coordinates,
zoom: 13
});
// Adding tile layer
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
attribution: "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>",
tileSize: 512,
maxZoom: 20,
zoomOffset: -1,
id: "mapbox/streets-v11",
accessToken: API_KEY
}).addTo(map);
return map
};
coordinates = {
"nyc": [40.730610, -73.935242],
"austin": [30.2672, -97.7431],
"san francisco": [37.7749, -122.4194],
"chicago": [41.8781, -87.6298]
}
url = {
"nyc": ["https://data.cityofnewyork.us/resource/qgea-i56i.json"],
"austin": ["https://data.austintexas.gov/resource/fdj4-gpfu.json"],
"san francisco": ["https://data.sfgov.org/resource/cuks-n6tp.json?"],
"chicago": ["https://data.cityofchicago.org/resource/dfnk-7re6.json"]
}
// nyc crime function
function nyc_markers(url, map) {
d3.json(url, function (response) {
for (var i = 0; i < response.length; i++) {
var location = response[i];
if (location.lat_lon) {
L.marker([location.latitude, location.longitude]).addTo(map);
}
}
})
}
// // chicago crime function
function chi_markers(url, map) {
d3.json(url, function (response) {
for (var i = 0; i < response.length; i++) {
var location = response[i];
if (location.location) {
L.marker([location.latitude, location.longitude]).addTo(map);
}
}
})
}
// san fran crime function
function sanfran_markers(url, map) {
d3.json(url, function (response) {
for (var i = 0; i < response.length; i++) {
var location = response[i].location;
if (location) {
L.marker([location.coordinates[1], location.coordinates[0]]).addTo(map);
}
}
})
}
// austin crime function
function austin_markers(url, map) {
d3.json(url, function (response) {
for (var i = 0; i < response.length; i++) {
var location = response[i].location;
if (location) {
L.marker([location.latitude, location.longitude]).addTo(map);
}
}
})
}
// // atlanta crime function
// var csv_atl = ("../Resources/Atlanta_Crime.csv")
// function atlanta_markers(csv_atl, map) {
// d3.csv(csv_atl, function (response) {
// for (var i = 0; i < response.length; i++) {
// var location = response[i].location;
// if (location) {
// L.marker([location.latitude, location.longitude]).addTo(map);
// }
// }
// })
// }
//function map calls
var map = crime_map(coordinates["chicago"])
chi_markers(url["chicago"], map)
// nyc_markers(url["nyc"], map)
// sanfran_markers(url["san francisco"], map)
// austin_markers(url["austin"], map)
That's because you are rendering the same HTML page with both home and map routes. Here's what needs to be corrected:
#app.route('/map.html')
def map():
# We hardcode some information to be returned
return render_template('map.html')
I am making a portfolio webpage on bootstrap. Everything was going fine until I uploaded my code onto bootstrap and my page has simply stopped scrolling and I can't find a solution/identity the piece of code that caused the page to stop scrolling. HERE IS MY CODE:
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="zulimarAbout.css">
<link href="https://fonts.googleapis.com/css?family=Arapey" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
<!-- Nav -->
<div class="nav">
<div class="nav_container" style="overflow: visible; height: 328px; margin-top: 0px; top: 0px;">
<div class="nav_container_top">
<div id="logo">
<h1 class="name">Zulimar Toro Seda</h1>
</div>
<div class="menu_wrap collapsable">
<!-- Menu Start -->
<ul class="main_nav">
<li class="item">Home</li>
<li class="item">Services & Rates</li>
<li class="item">About</li>
</ul>
<div id="overlay">
</div>
</div>
</div>
</div>
</div>
<!-- End Nav -->
<!-- Content -->
<div class="content" class="loaded" style="top:0px; margin-top: 0px;" id="allContent">
<div class="_4ormat_content_wrapper" id="content_page_wrapper">
<div class="_4ormat_content_page_container _4ormat_sort">
<div class="_4ORMAT_content_page_row _4ormat_sort_item m _4ORMAT_module_image_11" data-content-module-id="599402" data-content-module-template-id="35" data-content-module-unique-id="" data-content-module-removable="true" data-content-module-category="image">
<div class="twocol spacer"></div>
<div class="eightcol">
<div data-croppable="true" data-default-shape="landscape" data-editable-type="image" data-height="506" data-landscape-ratio="760:506" data-linkable="true" data-portrait-ratio="2:3" data-width="760" id="image_1-599402" data-default-img="images/bg.jpg" data-dom-id="image_1" data-link-type="none" data-link-value="" data-id="18643087" data-content-module-unique-id="">
<div>
<img src="PaulmitchellZu.jpg" class="img" style="float:;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="_4ORMAT_content_page_row _4ormat_sort_item _4ORMAT_module_text_01" data-content-module-id="599403" data-content-module-template-id="34" data-content-module-unique-id="" data-content-module-removable="true" data-content-module-category="text">
<div class="threecol spacer"></div>
<div class="sixcol">
<div data-editable-type="text" id="overflow" class=" " data-force-html-mode="false" data-id="18643088" data-content-module-unique-id="">
<p>Born in Puerto Rico, bred in Miami, Florida, and now living
as an expat around the world, I use writing, hospitality and working
with boutique and non-profit projects as a way to explore creativity and
as a means to my lifestyle.</p>
<p>With a Bachelor's in Hospitality and Event Management, a
theme of working with alternative brands and years of experience since,
in various areas of the field, I've come to learn and mildly obsess over
one thought;</p>
<p><span id="quote">"Engagement is the result of a well-curated
experience."</span></p>
<p>My passion lies in collaborating and in turn, creating the
unique experience that suits my clients and readers.</p>
<p>Every story can be told in a relatable way that attracts your
individual market. As a writer, I do my research and create content that
connects your business to your readers as a medium that enriches their
lives.</p>
<p>With a strong background in luxury hospitality, event
coordinating and business development, I wear many hats while
implementing my skills as a virtual assistant.</p>
<p>You know those pestering tasks that take up to much time out
of the day? Replying to emails, travel itineraries, marketing launches,
managing social media, and so forth. That’s what I’m here for.</p>
<p>I am a hospitality enthusiast, major foodie, travel
connoisseur, self-proclaimed artist and poet with a flair for style and
a hint of edge.</p>
<p><span id="zulifique">ZULIFIQUE</span> is my personal writing
platform for the exotic, alternative, and open-minded twenty-somethings
who
wonder to exercise true freedom.</p>
<p class="get">Got a project you need a word nerd for? Email me
for more details at zulimar.toro#gmail.com</p>
</div>
</div>
<div class="threecol spacer"></div>
</div>
</div>
<h2 style="display: none;"></h2>
</div>
</div>
<!-- SOCIAL MEDIA ICONS -->
<div class="social">
<i class="fab fa-instagram"></i>
</div>
<!-- Latest compiled and minified JavaScript & Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
</body>
</html>
How would i do that in JavaScript or j Query? I have been trying to do this for ages but couldn't so it would really be appreciated if you could help! :) Also if you have any tips or tricks or anything that i may have done wrong then it would be nice if you could also mention that!
<html>
<head>
<title>Redirected</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<font face="verdana" />
</head>
<body>
<div class = "title">
<h1>Redirected.</h1>
</div>
<div class = "title-mobile">
<h1>☰ Redirected.</h1>
</div>
<div class="title-solgan">
<p>THE HOME OF GAMING</p>
</div>
<div class="nav-bar">
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>REVIEWS</li>
<li>PLAYSTATION</li>
<li>XBOX</li>
<li>PC</li>
</ul>
</div>
<div class = "main-story">
<h1>14 Things Every Steam User Should Know </h1>
</div>
<div class = "trending-games">
<h1> Games Trending </h1>
<li>Destiny</li>
<li>Fallout 4</li>
<li>Mad Max </li>
<li>Metal Gear Solid </li>
</div>
<div class="latest-game-news">
<h1>Latest Game News </h1>
<li>Minecraft Will Support Oculus VR Next Year</li>
<li>Fallout 4 Meets Grand Theft Auto 5 in Latest PC Mod</li>
<li>Halo 6: 343 Says Sequel is in the 'Planning' Stage</li>
<li>The Sims Boss Leaves EA</li>
</div>
<div class="more-game-news">
<h1>More Game News</h1>
<li>Xbox Free Games With Gold October 2015</li>
<li>EA Working on Netflix for Games</li>
<li>Assassin's Creed Syndicate's New Story Trailer</li>
<li>Uncharted 4 Delayed</li>
</div>
<footer>This is a sticky footer</footer>
</body>
</html>
function del_cookie(name) {
document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="Spanish Chat, Child Abuse Chat, Child Abuse Support, Child Abuse Discussion, Suvivor, chat, discussion, support, domestic violence, violencia domestica, abuso infantil, abuso de niño">
<meta name="description" content="Moderated chat rooms for victims and survivors of child abuse and domestic violence.">
<title>Yes ICAN: International Child Advocacy Network</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- <script type="text/javascript">
alert("SAFETY ALERT: If you are in danger, please use a safer computer, or call 911, your local hotline, or the U.S. National Domestic Violence Hotline at 1-800-799-7233 and TTY 1-800-787-3224. See more technology safety tips online.")
</script>-->
</head>
<body onLoad="initialize();">
<div id="wrapper">
<!--Main Navigation Bar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img alt="site logo" id="navlogo" src="img/logo_short_sm.png"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tooltip" title="Home page" target="_blank" href="index.html">Home</a></li>
<li><a data-toggle="tooltip" title="Group Facilitated Chat Room" href="gethelp.html">Get Help</a></li>
<li><a data-toggle="tooltip" title="Message Board Community" href="community-rules.html">Community Forums</a></li>
<li><a data-toggle="tooltip" title="Learn More About Abuse" href="aboutabuse.html">About Abuse</a></li>
<li><a data-toggle="tooltip" title="Learn More About YesICAN" href="about-us.html">About Us</a></li>
<li><a data-toggle="tooltip" title="Opportunities to volunteer, donate, and get involved!" href="get-involved.html">Get Involved</a></li>
</ul>
<!--Right side of navigation bar-->
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn btn-lg btn-danger donate-nav"><a target="_blank" href="https://donatenow.networkforgood.org/yesican?code=Homepage">Donate <span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></div>
</li>
</ul>
</div>
</div>
</nav><!--END NAVIGATION-->
<img id="banner" alt="home page banner" src="img/banner.jpg"/>
<div id="content">
<section class="col-md-8"><!--Left column content goes here-->
<h2>Our Mission<small><br>Working World Wide to Stop the Silence and Cycle of Abuse</small></h2>
<p>The International Child Advocacy Network, Inc. (YesICAN) is a leading global provider of online information for those who have issues around child abuse. It is our mission to work worldwide to break the silence and cycle of abuse. <strong><em>We</em> believe</strong> that child abuse could cease to exist if everyone had the capability to receive accurate, up-to-date information about abuse and then had the capacity to receive assistance and support to change.</p>
<h2>How We Make a Difference</h2>
<p>Our website provides information, statistics, and definitions of abuse. We also have the <em>Yes</em>ICAN Community where individuals who have questions regarding child abuse and domestic violence can join with others to discuss various concerns and ideas around these topics.</p>
<p>The premier service of our organization is our facilitated chat groups. <strong>In these groups we offer an opportunity for abused children and adults to speak with others and to get council and support from trained facilitators.</strong> These facilitators have gone through a 60-hour training lead by a Licensed Therapist. To date, we have had over 44,000 participants in our chat rooms. We run specialized chat groups for teens, adult-survivors, victims of domestic violence, individuals who are in close relationship with abuse survivors and parents.</p>
<h2>Our Current Focus</h2>
<p>Our focus for now, is the development of an on-line parenting program. In this 6-8 week program, individuals will receive training in non-violent parenting. This training will include dynamics of both physical and emotional development, and appropriate discipline. In addition, each member of the program will have access to support groups where the topic of each weeks' training session will be discussed. During this time specific issues and concerns that come up for each participant will be shared in a safe and supportive environment.</p>
<p>It is our hope that in the future, we will provide an international support forum, specifically targeting military personnel and their dependents that are based outside of the United States.</p>
</section>
<section class="col-md-4" style="border-left:1px solid #cfd1d4;"><!--Right column content goes here-->
<div class="well">
<h2>April Kickstarter</h2>
<img src="img/unbrokenkickstarterbutton.png"/>
<p>Please support and learn more about our kickstarter running through this April!</p>
</div>
<h2>In Memorial</h2>
<img alt="Memorial List" src="img/memorial_list.jpg"/>
<p>We keep this list in honor of the children who have died from the injuries infliected upon them as a result of child abuse.</p>
<h2>Missing Children<br><small>Alert Cases</small></h2>
<section style="border: #cfd1d4 solid 1px; border-radius:2%; padding:10px;">
<!-- start feedwind code --><script type="text/javascript">document.write('\x3Cscript type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js">\x3C/script>');</script><script type="text/javascript">(function() {var params = {rssmikle_url: "http://www.missingkids.com/missingkids/servlet/XmlServlet?act=rss&LanguageCountry=en_US&orgPrefix=NCMC",rssmikle_frame_width: "100%",rssmikle_frame_height: "400",frame_height_by_article: "0",rssmikle_target: "_blank",rssmikle_font: "Arial, Helvetica, sans-serif",rssmikle_font_size: "12",rssmikle_border: "off",responsive: "off",rssmikle_css_url: "",text_align: "left",text_align2: "left",corner: "off",scrollbar: "on",autoscroll: "off",scrolldirection: "up",scrollstep: "2",mcspeed: "20",sort: "Off",rssmikle_title: "off",rssmikle_title_sentence: "",rssmikle_title_link: "",rssmikle_title_bgcolor: "#FF0000",rssmikle_title_color: "#FFFFFF",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#FFFFFF",rssmikle_item_bgimage: "",rssmikle_item_title_length: "55",rssmikle_item_title_color: "#0066FF",rssmikle_item_border_bottom: "on",rssmikle_item_description: "on",item_link: "off",rssmikle_item_description_length: "150",rssmikle_item_description_color: "#666666",rssmikle_item_date: "gl1",rssmikle_timezone: "Etc/GMT",datetime_format: "%b %e, %Y %l:%M:%S %p",item_description_style: "text+tn",item_thumbnail: "full",item_thumbnail_selection: "auto",article_num: "15",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: ""};feedwind_show_widget_iframe(params);})();</script><div style="font-size:10px; text-align:center; width:300px;">RSS Feed Widget<!--Please display the above link in your web page according to Terms of Service.--></div><!-- end feedwind code --></section>
</section>
</div>
<div class="container" style="overflow-y: hidden;">
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:#d3d3d3">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" style="text-align:center">Safety Warning</h3>
</div>
<div class="modal-body">
<p style="text-align:center"> Your computer can be monitored by others. For your safety, consider using a public computer or a friend’s computer. If you are in danger, please call 911, your local hotline, or the U.S. National Domestic Violence Hotline at +1-800-799-7233 and <br> TTY +1-800-787-3224.</p>
<p style="text-align:center"> To learn more how to computer safety, click the following link: <br>Internet Safety Tips</br></p>
<!--Wording can be better just for the meantime-->
<p style="text-align:center"> If you are not safe, click the following button: <br><span class="btn btn-lg btn-danger" id="get-away" id="del_cookie">Escape Button</span></br></p>
</div>
<div class="modal-footer">
<p class="text-center"><a href="" class="btn btn-default" class="btn pull-middle" data-dismiss="modal" >Close</a></p>
</div>
</div>
</div>
</div>
</div><!--End of Modal container-->
<!--<div class="container">
<section class="col-md-3">
<div class="list-group" id="sidebar">
<a href="#" class="list-group-item">
Link 1
</a>
</div>
</section>
</div>-->
</div><!--End wrapper-->
<footer>
<div id="footer-right">
<ul>
<li>ABOUT US</li>
<li>Contact Us</li>
<li>FAQ's</li>
<li>Site Map</li>
</ul>
<ul>
<li>SUPPORT OUR CAUSE</li>
<li>Donate</li>
<li>Volunteer</li>
<li>Fundraising Events</li>
</ul>
<ul>
<li>FOLLOW US</li>
<li>
<a target="_blank" href="http://ww.facebook.com/yesicanorg"><img src="img/social/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a>
<a target="_blank" href="http://www.instagram.com/childadvocacynetwork"><img src="img/social/instagram-icon.png" alt="Instagram Logo" class="social-icon"></a>
<a target="_blank" href="http://twitter.com/YesICANorg"><img src="img/social/twitter-icon.png" alt="Twitter Logo" class="social-icon"/></a>
<a target="_blank" href="http://www.pinterest.com/Yesicanorg"><img src="img/social/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/></a>
<a target="_blank" href="http://www.youtube.com/childadvocacynetwork"><img src="img/social/youtube-icon.png" alt="YouTube Logo" class="social-icon"/></a>
</li>
</ul>
</div>
<div id="footer-left">
<p id="footer-slogan">BREAK THE <strong>SILENCE</strong> <br>AND <strong>CYCLE</strong> OF ABUSE</p>
<p id="copyright">Copyright© 2015 International Child Advocacy Network</p>
</div>
</footer>
<!-- Bootstrap core JavaScript placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
<script src="js/bootstrap.min.js"></script>
<script src="/path/to/jquery.cookie.js"></script>
<script src="js/escape-button.js"></script>
<script src="js/history.replace.js"></script>
<!--Testing to see if it works-->
<!--<script>
$(document).ready(function() {
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '1');
}
});
</script>-->
<!--Works fine-->
<script type="text/javascript">
$(function(){
$( '#myModal' ).modal('show');
});
</script>
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
function initialize() {
( function( $ ) {
$( '.call' ).css ( "text-decoration", "none" );
$( '.call' ).css ( "color", "black" );
$( '.call' ).css ( "cursor", "default" );
} )( jQuery );
}
</script>
</body>
</html>
I am doing a website for abuse survivors and I have created a escape button that will jump the user to another link and replace the location of the site with another site like google. I am currently trying to figure out how to manipulate the history back button. Currently, I have this code but it is not working at all when the back button or back arrow is clicked on. Also, what would be the best approach to replace/erase the cookies when the user visits the website.
function getAway() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
// This should clear all back button history.
var Backlen = history.length;
history.go(-2);
}
$(function() {
$("#get-away").on("click", function(e) {
getAway();
});
$("#get-away a").on("click", function(e) {
// allow the (?) link to work
e.stopPropagation();
});
});
So I just started a new site in bootstrap and I'm working on a nav-tabs design. I've followed the directions to the tee and have almost copied and pasted at this point just to get it to function but alas I have several problems:
(1) The nav-tabs do not change on click i.e. the url changes to my element id but the actual tab does not become "active" (Home remains depressed while the others stay unpressed)
(2) The tab-content div only displays the content marked by class="active".
I have included the necessary jquery and bootstrap js scripts and I believe they are in the correct order but no matter what I do these tabs never switch their active state to the one that is clicked.
Here is my html:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.2.min" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
I have attempted the various solutions I could find including the addition of
<script>
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Underneath the bootstrap.min.js script but like I said just about anything I've done has produced NO change whatsoever. Everything else looks fine on the page but a little guidance here would truly get me started on the right foot. I haven't been working with bootstrap for more than a few hours so forgive my ignorance. The docs say that bootstrap does not even require javascript to toggle the tabs when data-toggle is used so I'm quite confused on what the right answer is.
:EDIT: The first answer was correct. Placing the tags right before the closing body tag did not improve functionality but replacing my scripts with
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Did indeed work. I my initial jquery and bootstrap files were in the correct place but it seems they are not completely functional/broken in some way or something. Thanks again!
By the way: Am I able to link to these repositories constantly or will I have to update my pages when new updates of bootstrap/jquery come out? What I'm asking is will these repositories will be deleted?
The only thing I can think of (but what usually causes this issue) is your <link> and <script> tags are in the wrong spot. Copying your code to an editor of mine and adding jquery.min.js and bootstrap.min.js right before the closing </body> tag caused it to work just fine for me. Here is the HTML file:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=".../bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src=".../jquery.min.js" type="text/javascript"></script>
<script src=".../bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
Note: Replace .../ with the correct URL to bootstrap.min.css, jquery.min.js and bootstrap.min.js. Hope that helps!
The tabs are working fine as can be seen here: https://jsfiddle.net/AndrewL32/nh6ma48r/
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
You need to keep bootstrap.js as well as the above script that calls the function above on your <head></head> section but below your jQuery.
Also, please replace your:
<script src="bootstrap.js"></script> with this <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
and your
<script src="jQuery"></script> with this <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
(issue could be because your js files are edited, moved or missing)