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>
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!
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();
});
});
Im trying to use the jQuery plug in videoBG to have a video fill a top div of 100% width and height. I'd like the #top-video to fill the #top-content. The issue is that nothing is showing up. Any suggestions? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Dupont Studios</title>
<link href= 'style.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="waypoints.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>
<script>
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(direction) {
nav_container.toggleClass('sticky', direction=='down');
}
});
});
$('#top_video').videoBG({
mp4:'test.mp4',
scale:true,
zIndex:0
});
</script>
</head>
<body>
<div id = 'top-container'>
<div id = 'top-content'>
<div id = 'top-video'>
<span>Here is some text</span>
</div>
<div id = 'top-text'>
<div id = 'top-img'>
<img src='top-img.png' width = "600" height = '115'>
</div>
<h1 id = 'top-slogan'>A Video Production Studio</h1>
</div>
</div>
<div class = 'nav-container'>
<nav>
<div id = 'header-img'>
<img src='top-img.png' width = "450" height = '86.25'>
</div>
<div id = 'nav-items-container'>
<ul class = 'nav-items'>
<li class = 'nav-item'><a href='#'><b>w</b>hat</a></li>
<li class = 'nav-item'><a href='#'><b>h</b>ow</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>hy</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>here</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>ho</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id = 'main-container'>
<div id = 'main-content'>
<div id = 'main-content1'>
<section>
<h2>what we do</h2>
<p>We have built a boutique full service video producton studio quite literally in the heart of Dupont Circle.
Yes, our address is 21 Dupont Circle- we're racross from the south end of the dupont metro stop, right near the Krispy Kreme...mmm,good!</p>
<p>Unlike other video production studios, we have an exclusive focus on subscription based filming that
allows for organizations to build their brand and convey their ideas on a weekly, bi-weekly, or monthly basis.</p>
<p>
The benefits of subscription based video production allows us to more <mark class = 'blue-me'>deeply partner</mark> with our clients
and align interest for long term <mark class = 'blue-me'>strategic communication goals</mark>.
</p>
</section>
</div>
<div id = 'main-content2'>
<section>
<div id = 'video-text'>
<p>We have built a boutique full service video producton studio quite literally in the heart of Dupont Circle.
Yes, our address is 21 Dupont Circle- we're racross from the south end of the dupont metro stop, right near the Krispy Kreme...mmm,good!
</p>
</div>
<div id = 'video'>
<iframe src="http://player.vimeo.com/video/69176991?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
</div>
<section>
<div id = 'picture'>
<img src='test.jpg' width = "1200" height = '800'>
</div>
</section>
</div>
</div>
</body>
</html>
shouldn't you be using #top-video as your selector instead of #top_video ?
I have been working with impress.js, html5 and css. I have got my impress.js presentation to a standard I am quite happy with but I am trying to implement a fixed top nav similar to Twitters.
The current implementation does not work correctly. if you click the bar whilst on a slide/step the links are unclickable.
My Attempt
HTML
<!DOCTYPE html5>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>PATCHU_</title>
<meta name="author" content="patchu" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <strong>doesn't support the features required</strong> by my website, so you are presented with a simplified version.</p>
<p>For the best experience please use the latest <strong>Chrome</strong>, <strong>Safari</strong> or <strong>Firefox</strong> browser.</p>
</div>
<div class="navbar-fixed-top2" align="center">
<p>Navigation will go here <a class="" href="#websites" title="My Websites">My Websites</a>
<a class="" href="#about" title="My Websites">About</a>
<a class="" href="#contact" title="My Websites">Contact</a>
<a class="" href="#applications" title="My Websites">Applications</a>
</div>
<div id="impress" data-transition-duration="800">
<div id="title" class="step slide" data-x="0" data-y="0" data-scale="3">
<hgroup>
<h1>#PATCHU_</h1>
<h2></h2>
</hgroup>
</div>
<div id="about" class="step slide" data-x="-1000" data-y="-700" data-rotate="270" data-scale="5">
<h1>About Me</h1>
</div>
<div id="about1" class="step slide about" data-x="-1900" data-y="880" data-z="-100" data-rotate="270" data-scale="1">
<p>Apart from making <strong>awesome websites</strong>, I love computer networking and making <strong>iOS applications.</strong></p>
</div>
<div id="about2" class="step slide about" data-x="-1900" data-y="100" data-z="-100" data-rotate="270" data-scale="1">
<p>Minimalist, <strong>Perfectionist</strong>, Gamer and Apple fanboy. I have a passion for creating stuff. Love trying out <strong>new technologies</strong> and experiences.</p>
</div>
<div id="about3" class="step slide about" data-x="-1900" data-y="-800" data-z="-100" data-rotate="270" data-scale="1">
<p>I mostly code in <strong>PHP</strong> and <strong>Objective-C</strong>, but I'm not afraid to get my hands dirty.</p>
</div>
<div id="about4" class="step slide about" data-x="-1900" data-y="-1600" data-z="-100" data-rotate="270" data-scale="1">
<p><strong>Graduated</strong> with a <strong>1:1</strong> (84% Average) in Computer Network Technology BSc.</p>
</div>
<div id="websites" class="step slide" data-x="7100" data-y="-700" data-z="-3000" data-rotate="0" data-scale="5">
<h1>Websites</h1>
</div>
<div id="applications" class="step slide application" data-x="3950" data-y="-4500" data-z="-3000" data-rotate="90" data-scale="5">
<h1>Applications</h1>
</div>
<div id="contact" class="step slide" data-x="-180" data-y="2100" data-scale="3">
<h1>Connect</h1>
<p></p>
<div id="contact_images">
<img src="images/twitter.png">
<img src="images/linkedin.png">
</div>
</div>
</div>
<script src="js/impress.js"></script>
<script>
//All hail megatron
impress().init();
//impress().showMenu();
</script>
</body>
</html>
CSS
/*
Resetting the humans
*/
.navbar-fixed-top2{
position:fixed;
top:0;
width:100%;
height:50px;
background-color:red;
z-index:3000;
}
This is due to a work-around for a chrome bug in impress.js, see the comments at the end of the CSS file that ships with it.
To make the links in your navbar clickable, add the following to your .navbar-fixed-top2 CSS class:
pointer-events: auto
Alternatively, add the following class to your CSS:
.extra-clickable { pointer-events: auto }
... and then add that class to anything outside of #impress that you want to have clickable.