enwise — 2011-09-30T20:27:53-04:00 — #1
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](http://codeandtheory.com). If you click on any of the links, you can see how it smoothly loads the next page.
How is this done?
jgetner — 2011-09-30T22:29:08-04:00 — #2
here is a simple demo building this feature with jquery jquery effects tutorial./
enwise — 2011-09-30T23:05:13-04:00 — #3
thx! ill try this out over the weekend and see how it works out
epsnowden — 2011-10-01T18:24:28-04:00 — #4
The second site is mine. Here it is at a high level
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.
Hope some of this helps!
enwise — 2011-10-07T23:05:47-04:00 — #5
thanks! dont understand jquery too much at the moment but im tryin to learn now this will be pretty helpful