jQuery Dynamic Navigation

by 2 replies
3
I've never really gotten around to all of the tricks that jQuery provides (though I have made use of it), and so this bit a bit more difficult for me to get going.

My partner and I are creating a website that will have a navigation in which the content swaps out instead of requiring a reload. Each page is PHP, and I want to go through a process like this:

  • Assign a hashtag to the URL - allows for hitting back/forward.
  • Change out the main content div for the page, and bring in the content of the page that was clicked.
  • Allow for the process to happen again.
I was told that this would be easy to do with jQuery/AJAX, but I have been pretty lost and can't find any decent websites to base the technique off of (that offer tutorials).

Please advise.
#programming #dynamic #jquery #navigation
  • http://api.jquery.com/jQuery.post/
    • [ 1 ] Thanks
  • There are hundreds of good tutorials out there on the topic of AJAX and here's one such resource;

    jqfundamentals.com/chapter/ajax-deferreds

    In fact the entire site is a useful read for anyone wanting to get up to speed with the basics of jQuery and its also aptly named - jQuery Fundementals

    I suggest you digest the above link and if at first you don't "get it" - don't despair, just re-read each section again until the penny drops. (print it out if you need too as its often easier to read).

    Its not always easy when you approach the subject for the first time and the biggest road-block to implementation is getting frustrated.

    As an addition to the above you can also look at;

    github.com/defunkt/jquery-pjax

    But I suggest in doing so after you read the first link.

    PJAX (PushState AJAX) is quite a nice script which does away with the hashtag in the URL making your links SEO friendly out the gate without the necessary headache.

    But, since its an abstraction upon AJAX, you'll end up using the API in which the author has defined for use with his script (albeit not that dissimilar to how you would do things normally). That said, diving in head-first into this script without understanding the fundamentals might still leave you a little confused on the subject matter of AJAX in general.

    Lastly, you might want to consider outsourcing some help to get you running if this turns out to be a road-block that gets in the way of your site being online sooner rather than later. Time is money.

    PS. Sorry for the improper links, as I'm not allowed to post real links until I reach 15 posts in total.
Join the discussion

Next Topics on Trending Feed

  • 3

    jQuery Dynamic Navigation

    I've never really gotten around to all of the tricks that jQuery provides (though I have made use of it), and so this bit a bit more difficult for me to get going. My partner and I are creating a website that will have a navigation in which the content swaps out instead of requiring a reload. Each page is PHP, and I want to go through a process like this: