I know what you’re thinking - How could I not click on something called "wiggleSlide"?

Well as awesome as it sounds, it’s pretty cool how it works. It’s a sliding menu built with jQuery that allows you to achieve a "flash" kind of horizontal content scroll. I know you may have seen it before, but do the other ones bounce and ease when you click them? Hopefully not!

Download It! (v1.0)

Demo It!

Usage

The chunk of javascript below goes in the head of your document.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/wiggleslide.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $.wiggleSlide({
			sliderNav: '#slider-nav', 
        	sliderClickLink: 'a',
        	hiddenContainer: '#invis-cont', 
        	sliderItemClassName: 'slider-item',
        	swingSpeed: "medium",
			permalinking: false,
        	wiggle: true
		});
});
</script>

Parameters

sliderNav: Accepts any html element with an id or class. “div” is recommended.

sliderClickLink: Accepts "a", "li", or "div" elements. This must be inside the element that you have declared in "sliderNav" above.

hiddenContainer: Accepts any html element with an id or class. "div" is recommended. The width of this does not need to be declared in your CSS! - It is automatically calculated through javascript.

sliderItemClassName:
 This element is a forced class - meaning it can only be a class and does not require the dot infront of the target.

swingSpeed: Accepts "slow", "medium", "fast" or an integer like 900. This calculates how fast it scrolls through your slides.

permalinking: Accepts true or false. This only works with sliderClickLink set to "a". If you want to have the slides display an anchor when you click them you would set this to true. Example: If you had a slide named "barbie" and someone clicked the link to get to that slide, you would see a page.html#barbie in your address bar. If someone typed that in their address bar, it would start on that slide.

wiggle: Accepts true or false. This is pretty self explanatory. If you want the slides to bounce and ease a little bit once they finish.

The way that the slider links talk to the slides are through id’s. Notice in the example the anchors have an id=”thing” inside the “sliderNav”. Now for that anchor to connect with that slide, you need to give your slide an id of “slide-thing”. See the connection? Good.

Example of the CSS

.cont {
	width:520px;
	overflow:hidden;
	height:170px; /* you need to set a height */
	border:1px solid #666;
	z-index:1000;
	position:relative;
	}
.invis {
	position:absolute;
	left:0;
	/* width is set through java */
	}
.slider-item,.slider-item2,.slider-item3 {
	float:left;
	display:block;
	width:500px;
	padding:10px;
	height:150px;
	background:#eee;
	overflow:hidden;
	}
.nav a, .nav a:active, .nav a:visited {
	display:block;
	float:left;
	padding:5px;
	background:#666;
	color:#33CCFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-right:5px;
	text-decoration:none;
	}
.nav li {
	cursor:pointer;
}
 
/* END EXAMPLE 1 */
.desc {
	margin:12px 0;
	}
.clear {
	clear:both;
	}

Example of the HTML

<h1>Example 1: Using anchors (without permalinking)</h1>
 
	<div id="slider-nav" class="nav">
		<a href="#" id="box">BOX</a>
		<a href="#" id="stuff">STUFF</a>
		<a href="#" id="things">THINGS</a>
		<a href="#" id="google">GOOGLE</a>
		<a href="#" id="girl">GIRL</a>
		<a href="#" id="6">NUMBER SIX</a>
		<div class="clear"></div>
	</div>
 
	<div class="cont">
		<div id="invis-cont" class="invis">
			<div class="slider-item" id="slider-box">slider number 1</div>
			<div class="slider-item" id="slider-stuff">this is slide numbah 2</div>
			<div class="slider-item" id="slider-things"><img src="http://blog.wired.com/photos/uncategorized/2007/06/05/yahoo_logo.jpg" /></div>
 
			<div class="slider-item" id="slider-girl"><img src="http://www.carnegiemellontoday.com/images/news_images/Girl-Scout.jpg" /></div>
			<div class="slider-item" id="slider-6">sixsixsix</div>
			<div class="slider-item" id="slider-google"><img src="http://www.google.ca/intl/en_ca/images/logo.gif" /></div>
			<div class="clear"></div>
		</div>
	</div>