Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

7. Navigating Asynchronously > Time for action – highlighting the current page ... - Pg. 145

Chapter 7 $('#main-col').load(url + ' #main-col-wrap'); }); $(window).trigger('hashchange'); }); Now, you can open up that cupcakes link in a new window and you'll see the cupcakes page load up, just as it should. Our hashchange functon fres as soon as the page is loaded, which loads in the correct content. What just happened? We used jQuery to loop through each of our navigaton links and replace them with internal links or hash links. Why not just do this in HTML? Because we want to make sure that our page contnues to work for users with JavaScript disabled. Then we used the jQuery BBQ plugin to change our asynchronous navigaton to enable both bookmarking and sharing of links and the back and forward butons in the browser. This allows our site to behave just like a single-page applicaton without breaking the site visitor's expected experience. Time for action ­ highlighting the current page in the Navigation We've already made our asynchronous navigaton much beter than our simple example, but I think we can keep going and make it even beter. Next up, we're going to highlight the page currently being viewed in the navigaton to make it easy for our site visitors to see which page they're on.