SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Switching Page Through Ajax? (# in URL)

    There are a couple websites that I've seent hat use this feature and it works pretty nice but I have been curious how its done.

    2 examples are the sites http://codeandtheory.com and http://ericpaulsnowden.com. If you click on any of the links, you can see how it smoothly loads the next page.

    How is this done?

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2011
    Location
    Portland
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well this is actually pretty simple or as advanced as you would it to be, But its basically a page effect in javascript many of the popular javascript frameworks have this built in or as a plugin.

    here is a simple demo building this feature with jquery jquery effects tutorial./
    Last edited by jgetner; Sep 30, 2011 at 19:31. Reason: forgot some infomation....

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx! ill try this out over the weekend and see how it works out

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The second site is mine. Here it is at a high level

    1) I built the site as a standard html/css/javascript site without ajax and without Wordpress code. Layout complete without content. All links are regular a href links - this helps with backwards compatibility later.

    2) Added in the Wordpress code to pull in content without ajax. Make sure all content is wrapped in a consistent div, which I call container.

    3) I use jQuery to hijack all clicks on a href links. If there isn't target="_blank" or a class of override I then load the page using ajax. I grab the url, look for the div of container (defined above) and load just that content keeping the header and footer consistent. I also use JQuery address to change the url and title of the page.

    4) When the content is finished loading I fire jQuery calls to fade in the content and reposition the bar under the nav. I also make additional calls to add any page specific JS back in as it gets stripped out by loading the page via ajax.

    5) Finally I modified my .htaccess file to add a www. to every page and added javascript into the header of my file to add the hash into the url more jQuery address code to load the proper page if someone deep links.

    Hope some of this helps!

    Eric

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks! dont understand jquery too much at the moment but im tryin to learn now this will be pretty helpful


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •