www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Oct 2012
    Posts
    3

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

    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!

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.

  3. #3
    Join Date
    Oct 2012
    Posts
    3
    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!

  4. #4
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.
    Code:
    $.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".
    Last edited by ReFreezed; 10-22-2012 at 07:49 PM. Reason: Improved formatting.

  5. #5
    Join Date
    Oct 2012
    Posts
    3
    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.

  6. #6
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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 id=maincontainer. (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 maincontainer. In other words, the sidebar never changes - only the content on the right side does. (Not just an illusion! ;) )

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles