Make a horizontally sliding panel with HTML, CSS, and jQuery

[Nato]

For the latest redesign of my Agents Extraordinary site, I wanted to have one section of the page that would automatically slide back and forth horizontally, revealing different selections of links. (A bit like Panic Software's Coda page.) With some help from my genius brother, I finally got it working, at least in standards-compliant browsers. It was a bit of a pain, but it creates a cool effect, so I thought I'd share it with any interested parties.

First, the HTML. We're going to have three nested sets of divs -- a container that'll hold the whole thing and serve as its frame; a shifter that will slide back and forth within that frame; and the divs sitting inside that shifter, which will appear one at a time as the shifter slides back and forth:

<div id="container">
   <div id="shifter">
      <div class="pane">
         Content goes in here! It suuuuuure does.<br />
         <a href="#" class="shiftleft">Shift me!</a>
      </div>
      <div class="pane">
         Content goes in here! It suuuuuure does.<br />
         <a href="#" class="shiftright">Shift me back!</a>
      </div>
   </div>
</div>

OK, now for some simple CSS. We use classes on the innermost panes, because there's more than one of them. Feel free to replace your own widths/heights here. The rule of thumb is that all elements should be the same height, but the shifter's width should be (width of the container) x (however many panes are inside the shifter). In this case, it'll be twice as wide. If you're coding for standards-compliant browsers, remember to reduce the width to accomodate any padding you use in a given item.

#container { width: 400px; height: 400px; overflow: hidden; }
#shifter { position: relative; margin: 0; width: 800px; height: 400px; }
.pane { position: relative; margin: 0; width: 400px; height: 400px; float: left; overflow: auto; }

And lastly, for the jQuery. If you're not familiar with it, jQuery is basically Fancy JavaScript For Idiots Like Me. It makes doing animations and other funky feats of coding nearly as easy and intuitive as writing a CSS stylesheet. Are you ready for this lengthy and impenetrable code?

     // Get the width of the outermost container div.
	var getWidth = $('#container').width();

     // When you click a link with the "shiftleft" class,
     // slide the "shifter" div to the left by an amount
     // equal to the width of one pane.
		$('a.shiftleft').click(function(){
			$('#shifter').animate({left: -getWidth}, 500);
                 return false;
		});
     // Slide the whole works back into its original position
     // when you click the "shiftright" link.
		$('a.shiftright').click(function(){
			$('#shifter').animate({left: 0}, 500);
                 return false;
		});

I only needed to slide back and forth between two panes, but I can easily think of ways to slide between multiple panes:

     // Get the width of the outermost container div.
	var getWidth = $('#container').width();

     // Set a global variable to keep track of how far
     // the "shifter" should be moved.
      var setWidth = 0;

     // Subtract the pane width from the amount by which
     // the "shifter" has already been moved.
     // Don't forget to give back the changed setWidth variable!
		$('a.shiftleft').click(function(){
                 setWidth = setWidth - getWidth; 
			$('#shifter').animate({left: setWidth}, 500);
                 return false;
		});
     // Same thing in reverse.
		$('a.shiftright').click(function(){
                 setWidth = setWidth + getWidth;
			$('#shifter').animate({left: setWidth}, 500);
                 return false;
		});

If you're using the same buttons to shift the whole thing left or right, you'll probably need to include an if statement to make sure that setWidth doesn't exceed a given amount in either direction. But, since I'm not terribly smart on JavaScript, and also somewhat tired and lazy, I won't even try to post that here. Thank you for putting up with my sloppy coding. (=

EDIT: Fixed code for proper multi-pane sliding.

-- Nato