wiggleSlide for jQuery
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!
Usage
The chunk of javascript below goes in the head of your document.
<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
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
<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>
13 Sexy Responses to wiggleSlide for jQuery
had this to say...
Would it be possible to add some sort of user-configurable timer function to automatically scroll through however many list items (or a tags, etc.) you have in the slider-nav div?
That way, the wiggleslider could also be used as a automatic slide-show, as well as a navigation tool.
had this to say...
@billp: That’s a great idea. I will definitely be implementing something like that in the next release.
had this to say...
Love it!
I want to use it to show instructions to the user at different stages…
Is there any way to activate it programatically?
Zach
had this to say...
@Zach: What exactly do you mean by activating it “programically”?
had this to say...
Something like:
$.wiggleSlide(”activate”,#idToSlideTo)
So one could could have the ‘program’ select where to slide rather than the user.
Maybe you can already do this and I’m just not getting it?
had this to say...
@Zach: You can do something like that, the permalinking is as close as you can get. But as far as starting on a specific slide when you load up a page - You cannot do that yet.
had this to say...
First of all, wow, awesome job Jordan!!! Also, great explanation on how wiggleslide functions. I will play around with this app but have to say, great job!!! Looking forward to the next update.
Thank you!!!
had this to say...
Hello again. After messin’ around with the code, I can’t seem to set the “active” tab to appear highlighted. I changed the code in the css file but am unable to get it to work successfully. It appears to work in IE, but not in firefox.
Example:
.nav a {
display:block;
float:left;
padding:5px;
background:#d9d7ca;
color:#466a02;
font-family:Verdana;
font-size:12px;
font-weight:bold;
margin-right:5px;
text-decoration:none;
}
.nav a:active, .nav a:visited {
display:block;
float:left;
padding:5px;
background:#466a02;
color:#ffffff;
font-family:Verdana;
font-size:12px;
font-weight:bold;
margin-right:5px;
text-decoration:none;
}
Your thoughts / help would be greatly appreciated.
had this to say...
SORRY!!! I didn’t ready your “code” request… Need Soup!! Hungry!! 
Example:
.nav a {
display:block;
float:left;
padding:5px;
background:#d9d7ca;
color:#466a02;
font-family:Verdana;
font-size:12px;
font-weight:bold;
margin-right:5px;
text-decoration:none;
}
.nav a:active, .nav a:visited {
display:block;
float:left;
padding:5px;
background:#466a02;
color:#ffffff;
font-family:Verdana;
font-size:12px;
font-weight:bold;
margin-right:5px;
text-decoration:none;
}
had this to say...
@El Chingon: There is no active state for what tab you’re on that I’ve built in. If you wanted to do something like that you would have to know a little javascript. Inside the last few lines in wiggleslide.js where you see $(this).click(function(){ add
$(this).removeClass().addClass('selected'); then style the .selected class in CSS.
Feel free to put in your 2 cents. I need cash.
Code must be put in between <code> </code> tags or there will be no soup for you.
had this to say...
Tres cool! Looks really easy to use!