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 [URL=“http://ericpaulsnowden.com”]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?
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./
thx! ill try this out over the weekend and see how it works out
The second site is mine. Here it is at a high level
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.
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.
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.
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.
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
thanks! dont understand jquery too much at the moment but im tryin to learn now this will be pretty helpful