How to Create JavaScript Dock Carousel Using Mootools - part 2

This tutorial is the second part of a tutorial that will build a javascript carousel that imitates the Mac OS X dock. In part one, we build a mock up in Photoshop and exported the nessecary images. In this part, we’ll take those images and build it into a HTML & CSS. Then we’ll use javascript to make if interact.

Demo Files

Step 1: The HTML To keep things organized, we’ll seperate the files into there own folders. So we’ll have a “js” folder to keep all the Javascript files, an “images” folder to hold all the webpage images, and a “icons” folder to hold the icon images. What needs to be in the HTML? Well, the links to move the stage left and right, the stage and all the icons and finally the text image. The “wrapper” class you will see later enables the icons on the next slide to hide. The icons are there own list elements.

<div id="stage-container">
  <img src="images/text.gif" alt="image" width="111" height="24" />
  <a id="moveleft">Left</a>

  <a id="moveright">Right</a>
  <div id="wrapper"><ul id="items">
  <li><a><img src="icons/1.png" alt="image" width="32" /></a></li>

  <li><a><img src="icons/2.png" alt="image" /></a></li>
  <li><a><img src="icons/3.png" alt="image" /></a></li>
  <li><a><img src="icons/4.png" alt="image"/></a></li>

  <li><a><img src="icons/5.png" alt="image" /></a></li>
  <li><a><img src="icons/10.png" alt="image"/></a></li>
  <li><a><img src="icons/6.png"/></a></li>

  <li><a><img src="icons/7.png"/></a></li>
  <li><a><img src="icons/8.png" /></a></li>
  <li><a><img src="icons/9.png" /></a></li>

  </ul></div>
 </div>

Now lets set up the header of the HTML document. We wan’t an XHTML tranistional document so that all the javascript is compliant and works. We need to reference the Mootools library, and the javascript that makes the stage work as well as the css file. We’ll deal with getting those files later.

<script src="js/mootools-12-core.js" type="text/javascript"><!--mce:0--></script> <!-- MOOTOOLS 1.2  -->

<script src="js/mootools-12-more.js" type="text/javascript"><!--mce:1--></script> <!-- MOOTOOLS 1.2  -->
<script src="js/dock.js" type="text/javascript"><!--mce:2--></script> <!--   IMAGE GALLERY   -->

Step 2: The CSS The trickiest part of the CSS is understanding the fact that we’re making the ul extend beyond the ‘div id=”wrapper”‘. The image below explains how the tags appear with the CSS. The ul element extends because the class “items” has a width of 5000px, and the “wrapper” id has an overflow of hidden. The buttons are floated on either side of the stage, and the text is hidden with the text-indent attribute. To get a tag to conform to specified widths and heights, we use the ‘display: block’ attribute.

body{
background:#232323;
color:white;
}
#stage-container{
margin: 50px auto;
width: 420px;
}
#stage-container .text{text-align: center;}
#stage-container a{outline: none;}
/* - STAGE - */
#stage-container #wrapper{
overflow:hidden;
margin: 0px auto;
width:352px;
height:55px;
background: url(images/stage2.jpg);
position: relative;
}
#stage-container #items{
margin:0px;
padding:0px 6px;
list-style:none;
width:5000px;
position: relative;
}
#stage-container #items li{
float:left;
list-style:none;
margin-right:5px;
padding: 6px 6px;
margin-top: 5px;
}
/* - BUTTONS - */
#stage-container #moveleft{
float: left;
background: url(images/left.gif);
}
#stage-container #moveright{
background: url(images/right.gif);
float: right;
}
#stage-container #moveright,#moveleft{
height: 20px;
width: 20px;
display: block;
z-index: 10;
text-indent: -3000em;
margin-top: 18px;
}

Step 3: The Javascript First, we’ll be using the newly released Mootools 1.2 for this javascript. Mootools is a “compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.” We’ll be utilizing the scroller class and the Fx classes to achieve the entire effects on the icons. Like almost all mootools scripts, we need to enclose the javascript in a dom ready action. What this does is not let the javascript work until all the javascript is completely loaded by the user.

window.addEvent(’domready’, function() {
// Your code here
});

The first part of javascript just deals with moving the stage left and right. We need to tell the javascript where to slide the stage, if it can slide the stage left or right and how much to slide. When a button is clicked it triggers an event to move the slide left or right depending on which is clicked. The slides must figure out though if it can move left or right. We don’t want to move left if there is no icons to the left of the current slide. These issues are what the variables at the top of the javascript deal with.

The image in step 2 will help illustrated how the javascript is working. The unordered list element (ul id=”items”) is being shifted left and right by the javascript (thats why is larger than the stage). The shift is triggered by a hyperlink tag (’a').

var slides = 2; // CHANGE THIS TO THE NUMBER OF SLIDES
var pos = 0; // default setting, start at the first(0) pixel
var offset = 346; // How many pixels the slider should move to get to the next slide
var currentslide = 1; // first slide is the default slide
var items = $('items'); // items variable for the id 'items' in the html
var fx = items.effects({
duration: 800,
transition: Fx.Transitions.linear
}); // the way the items transition is described here
/* Scroll Object Initialized */
var scroll = new Fx.Scroll('wrapper', {
offset:{'x':0, 'y':0},
transition: Fx.Transitions.Elastic.easeOut
}); // the scroll stage is set up here, and each movement will be 'Elastic'
// other tranistions could be linear, quadratic, ect.
/* Trigger to move the slide left */
//when the #moveleft link is clicked, this tells the scroll to move left
$('moveleft').addEvent('click', function(event) {
event = new Event(event).stop(); // don't go to the actual link described in the href
if(currentslide == 1) return; // can't go more left than the first
currentslide--; // currentslide is one less than before
pos += -(offset); // slide the stage left by the offset's size
/* lower the opactiy, slide, then raise back opacity */
fx.start({
'opacity': .3 // the opacity of the icons will become 30 %
}).chain(function(){
this.start.delay(800, this, { 'opacity': 1 }); // bring the icons back to 100% opacity
scroll.start(pos); // move the stage to the new position
});
});
$('moveright').addEvent('click', function(event) {
event = new Event(event).stop();
if(currentslide >= slides) return;
currentslide++;
pos += offset;
fx.start({
'opacity': .3
}).chain(function(){
this.start.delay(800, this, { 'opacity': 1 });
scroll.start(pos);
});
});
scroll.toLeft(); // We'll initalize the stage to left most position

The next part of the Javascript strictly deals with what happens when you move the cursor over an icon. We want to make the icon bigger. When the cursor leaves the icon, we need to readjust the icon to different size settings.

$$('.icon').each(function(item){  // for each icon, apply the follow events
item.addEvent('mouseover', function(event) { // when the icon is moused over, enlarge it
var fx2 = item.effects({
duration: 200,
transition: Fx.Transitions.linear
}); // initialize the icon transition properties
fx2.start({
'width': 40,
'height':40,
'margin-top': '-2',
'margin-left': '-5'
});
});
item.addEvent('mouseleave', function(event) { // when the icon is left by the mouse, reset icon
var fx2 = item.effects({duration: 200, transition: Fx.Transitions.linear });
fx2.start({
'width': 32,
'height':32,
'margin-top': '0',
'margin-left': '0'
});
});
});

Conclusion Thats all that’s need to create a dock carousel. The icons in the demo are kindly provided by Jonas Rask and Devin Ross. I’ve implemented the dock in the resources section of Tutorial Dog were you can download icons that I’ve created.