Anyone know how this site was made?

[definitive]

I was browsing through http://tapbots.com and saw several things that I found interesting. When you switch between pages at the top menu bar, it switches seamlessly which makes it look like the header remains constant, but the main part of the page changes (along with mouse over/active color of the header menu bar).

Second part - when you go into any application page, there's another set of tabs that you can click through, and the content only changes in a certain part of the page. It doesn't look like they used iFrames or Flash.

I'm not that good at decoding other people's code, so I'm wondering if anyone knows how that's done. Any particular JavaScript script? Would greatly appreciate any help.

 

[NathanCH]

The switching seamlessly part is just because it's a really fast website. The browser doesn't seem to refresh the top part because it has already been loaded. When I code lightweight websites, this happens to me too. Go on a slower internet connect and go between pages and you'll see the seamless page switching is gone!

For an application page, you're right it's not Flash or an iFrame, he is using a free framework called MooTools which utilizes Javascript for the effects you see on the site.

Check it out here:
http://mootools.net/

Sites like this are perfect examples of why we don't need Flash!

 

[7on]

bleh mootools


... ;p

Probably using includes (PHP) to keep the menu consistent. You have <?include('header.php');?> and poof, it pulls the contents. Most pages nowadays utilize some sort of server side rendering to keep the pieces separate. Without going too far inside, they might be using a sprite in the nav to cut down additional loading.

The bleh, mootools comment was for the slideshow they use. It's a compressed mootools, yui framework referenced on line 13. Personally I prefer jQuery but to each their own.

 

[NathanCH]

The bleh, mootools comment was for the slideshow they use. It's a compressed mootools, yui framework referenced on line 13. Personally I prefer jQuery but to each their own.

I agree, I like jQuery a lot more, plus unlike MooTools, it's very very well documented.

 

[definitive]

Are there pre-made scripts in mootools or jquery that can do this? Anyone know of any names/links?