How do I make a sidebar that stays static while it controls changing content?

This site is best viewed in a modern browser with JavaScript enabled.

How do I make a sidebar that stays static while it controls changing content?

grrttsllvn

I realize this is a pretty basic question, but I am new to js and wouldn't mind being pointed in the right direction to figure this out. I don't even know what I would google search here.

I want to do something pretty much identical to this website: http://hannahklee.com/

Notice that the sidebar doesn't flash and refresh when you click a new page. There is a small loading symbol that appears and then the new content appears to the right.

Thanks!

ReFreezed

To make the sidebar stay fixed on the screen you should set it's CSS 'position' property to "fixed" (no JavaScript needed there). To load parts of pages dynamically you should look into Ajax.

You could also use frames but I wouldn't recommend that...

Well, I hope that helps you on your way.

grrttsllvn

I appreciate the reply!

I know the ins and outs of CSS pretty well, but I know that there's something else at work with the website I referenced. I looked into the source code and found a ton of javascript, so I figured this was what was fueling the magic. If ajax is what I should use, could you maybe give me a link to something specific that would help here?

Thanks!

ReFreezed

I can see that the website you're pointing to uses jQuery. It's a JavaScript library that makes it easy to request data from a server and insert it into the page (among other things). See the Ajax examples in their documentation: http://api.jquery.com/jQuery.ajax/#entry-examples

Here's a related example I copied:

Example: Retrieve the latest version of an HTML page.

$.ajax({
url:"test.html",
  cache:false
}).done(function( html ){
  $("#results").append(html);
});

This basically fetches a webpage (test.html) and inserts it into the element with id="results".

grrttsllvn

So this is how you're able to navigate through different pages without having to visually reload the images on the left? I assume when a link is pressed the next page (include the sidebar) preloads and then appears so there's the illusion that nothing changed on the left side.

I've tried to make something like this before but whenever I would press a link, the entire page is emptied momentarily and the new page is loaded (just like loading any new page in a browser). I want the sidebar to stay visible the whole time while the new page loads.

Does that make sense? I don't want to get the feeling that you're starting from scratch every time you click a link.

ReFreezed

Well you don't have to replace everything on the page you're on with the loaded page. Just extract what you need from the loaded html code, and replace or insert it into the node where you want it.

Looking on the code for that website it seems that the loaded content is inserted into a div with [FONT=Consolas]id=[/FONT][FONT=Consolas]maincontainer[/FONT]. (That element is empty and invisible when the page is first loaded but is filled with stuff when you click on a link or one of those images.) I can also see that the html returned from the server when the request is made only contains the stuff that goes into [FONT=Consolas]maincontainer[/FONT]. In other words, the sidebar never changes - only the content on the right side does. (Not just an illusion! )