I'm using this free template for a site that I'm building: http://blackrockdigital.github.io/startbootstrap-scrolling-nav/
I'm using a geolocation service (google). But I don't want to force the user to push "Approve" every time they enter the site, only when user navigates to/push the "Service" button/area, then I want my geolocation function to execute. Does someone have an idea how to solve this?
Can I somehow check where they are on the site? I could get the section ID, but how can I check this against where the user is currently at?
Example of sections:
<!-- About Section -->
<section id="About" class="About-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About</h1>
<h3>Here is text about us</h3>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="Services-pdl" class="Services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services</h1>
<div id="map"></div>
</div>
</div>
</div>
</section>
Thanks.
Solved it by using this for both scroll and click (the page scrolls to a section when button is clicked):
$(window).scroll(function() {
if(isScrolledIntoView($(find)))
{
setTimeout(function() {
initMap();
}, 900);
}
});
function isScrolledIntoView(elem)
{
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
The setTimeout is necessary in the .scroll() because when the user clicks another button (thats below this section) it will execute without the setTimeout. Not sure exactly if setTimeout could be lower than 900 but it works fine for now.
Got the isScrolledIntoView() from answer in this thread: Check if element is visible after scrolling