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:
[HTML]
<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>
[/HTML]

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

Nato

Did I mention I was tired? In the HTML code, kindly switch the places of the "shiftleft" and "shiftright" links. We apologize for the confusion.

Yawn,
Nato

stef

Hey, Nato, I'm confused. I looked at both the Agents site and the referenced Coda site, and I can't figure out what effect this is supposed to represent. Did you implement it yet? Am I just incredibly website-illiterate tonight?

Nato

It's not implemented yet on my site, because I don't have any "previous issues" for Series Two yet. When I do, the area that now is devoted entirely to Series One will slide over to reveal Series Two, and back again, upon the clicking of certain links.

On the Coda site, I'm talking about the way you can click the left and right arrows to make the content slide left or right.

I used to have a handy one-file demonstration of all this, but then I, uh, deleted it.

-- Nato

Nato

I can now confirm that the code above for a slider with multiple panes does work -- with one change. Because setWidth is a global variable, you don't need to return it. Instead, change

return setWidth;

to:

return false;

at the end of each .click function.

It works, and it's so very cool.

-- Nato