Execute function (geolocation) when user navigates to a specific part

Question

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.

Whats the geolocation code you're using? Try wrapping it in a function that you call on button click, or on document.ready() on the page you want it to execute on? — glcheetham, Mar 03 '16 at 20:00
I can't use .ready(), because it uses sections (and scrolls to the section when I push the "Service" button, not redirect to the (non-existing) service page. If I use .ready() it will execute when the user enter the site, just like it does now? — Robin, Mar 03 '16 at 20:57

score 1 · Accepted Answer · edited May 23 '17 at 12:15

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

score 0 · Answer 2 · answered Mar 03 '16 at 20:04

0

If you're using jQuery (which you probably have on your page already - bootstrap) you can wrap code in a document.ready() function, like this:

$(document).ready(function() {
    // Code to execute
});

For it to run when the page has finished loading. https://learn.jquery.com/using-jquery-core/document-ready/

With jQuery, you can also run code on button click, like this:

$('#mybutton').on('click', function() {
//Code to execute
});

See the documentation for on() here http://api.jquery.com/on/

answered Mar 03 '16 at 20:04

glcheetham

939
8
21

I can't use .ready(), because it uses sections (and scrolls to the section when I push the "Service" button, not redirect to the (non-existing) service page. If I use .ready() it will execute when the user enter the site, just like it does now? – Robin Mar 03 '16 at 20:56

Execute function (geolocation) when user navigates to a specific part

2 Answers2