I've seen web-sites where the user can go from one "page" to another "page" without technically leaving the front page. These have like a link that points to like "http://site.com/#about/" or something, and when you click the link, the whole page fades or slides out, and the new page fades or slides in... but the "structure" or "design" of the links and HTML make it so that if you don't have &#106avascript enabled, so AJAX won't work, then the browser will just normally load the link as it usually does.... but if &#106avascript is enabled, then "somehow" the next page content is loaded on the client side, and animated into the current browser info. I want help with this technology... like are there examples or other site out there that demonstrate this? How do I do this? Any libs like jsext or JQuery that help with this? Thanks for any information! UPDATE: So if someone clicks one of these "links" in a new tab (i.e. In Firefox Open in New Tab) then the page will load with the correct url (like "/about) instead of being loaded in the current window with ajax.

Can you think of an example website that does this specific thing? If so post it and I'll give a shot at explaining how they do it.

I guess I found how to do this: http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/


I just want more information about the correct and safest way to do this.

The example you found is actually pretty slick. The key is the preventDefault() code which makes things work with and without &#106avascript enabled.

Quote: Original post by AndreTheGiant
The example you found is actually pretty slick. The key is the preventDefault() code which makes things work with and without &#106avascript enabled.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>Gmail is the best example I can think of. You can go from page to page without having the browser to actually reload the document... and you can use the browsers history buttons to still go back and fourth without reloading the document.. how do they do that?<br><br>

As far as getting the browser back/forward buttons to work, I guess its just another &#106avascript trick much like the preventDefault() function for trapping the action for clicking hyperlinks. jQuery has a $.history object which I believe lets you manipulate the back/forward history.<br><br>Not %100 sure exactly how google does it but you can accomplish the same thing they do without using the exact same code they do. <br><br>Of course you can always look at the &#106avascript theyre using but I suspect its pretty big and complicated (though I havnt looked at it myself yet)

Why not just use the plug-in from your example site?
From the looks of it, you just add a reference to safe-ajax.js and jquery, and set the class for your anchors to "ajax-links".

Quote: Original post by andreib

Quote: Original post by AndreTheGiant
The example you found is actually pretty slick. The key is the preventDefault() code which makes things work with and without &#106avascript enabled.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>Gmail is the best example I can think of. You can go from page to page without having the browser to actually reload the document... and you can use the browsers history buttons to still go back and fourth without reloading the document.. how do they do that?<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>By hacking things in such an ungodly way that no mortal should ever be allowed to do that.

Quote: Original post by AndreTheGiant
As far as getting the browser back/forward buttons to work, I guess its just another &#106avascript trick much like the preventDefault() function for trapping the action for clicking hyperlinks. jQuery has a $.history object which I believe lets you manipulate the back/forward history.<br><br>Not %100 sure exactly how google does it but you can accomplish the same thing they do without using the exact same code they do. <br><br>Of course you can always look at the &#106avascript theyre using but I suspect its pretty big and complicated (though I havnt looked at it myself yet)<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>Back when I was still writing AJAX code, no browser would actually allow you to view or modify your browsers history, as it is a serious security violation and privacy concern.<br><br><br>/Thank god I never have to deal with that abortion of an idea ever again.<br>//All Silverlight now. Designed to not suck like HTML/&#106avascript does.

Quote: Original post by Mithrandir
By hacking things in such an ungodly way that no mortal should ever be allowed to do that.

Ugh what? They update the hash part of the URL (text after the # symbol) and the browser automatically supports back and forth functionality for that. Google HTML anchor labels for more info. Its not hard to setup (written components for it long ago). The only part you can consider a hack is that the browser doesn't provide an event for when the hash changes (might be in latest FF beta now) and you have to manually check at an interval.

Quote: Original post by Mithrandir
Back when I was still writing AJAX code, no browser would actually allow you to view or modify your browsers history, as it is a serious security violation and privacy concern.

You still can't and you never will be able to.

Quote: Original post by Mithrandir
/Thank god I never have to deal with that abortion of an idea ever again.
//All Silverlight now. Designed to not suck like HTML/&#106avascript does.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE-->Yes silverlight is nice but &#106avascript isn't bad and I find that usually people who think &#106avascript sucks just suck at it.