Load content into div with iframes or javascript

Question

I'm building a site for my band. I have the main page completed. I'd like to load the other pages into the center div, #center_content without changing/reloading anything else on the page. Should I do this with iframes? JavaScript? PHP? I'm not experienced in any of those, but they seem to be my options. Which one would be best and could someone provide a starting point or link to a tutorial that would fit what I'm trying to do?

Here's my site so far: http://img.photobucket.com/albums/v410/justice4all_quiet/ScreenShot2012-08-23at22259PM.png

Here's a jsFiddle: http://jsfiddle.net/BRPNM/

Answer 1

If the center content is small, then you could load all the content in one single page, then use inline navigation to show/hide the relevant parts. This is how I do it on this basic site (check out the right hand side buttons): http://usermanagedsolutions.com

If the center content is important, then why would you not load a full page? With a good design, the parts that are common to all pages will be cached, and loading a new page won't take much longer than just loading the center content.

Answer 2

If by "loading pages" you mean loading certain contents (like "about", "photos"), you can have all your content loaded but invisible (in divs set to display:none; ) and show these divs using jQuery .show() .

You can check how .show works here -see the demo-: http://api.jquery.com/show/ (you could also use .animate() to give the contents some effects).

This way your info will be indexed by search engines. You could also do it using only CSS, but in this case JS would be quicker and cleaner.