Home arrow JavaScript arrow Page 4 - A Look at the New YUI Carousel Control

Working with Carouselís Custom Events - JavaScript

The Yahoo! User Interface library continues to grow and expand with new components being added and existing components being continually patched and updated to ensure full x-browser support and cutting-edge functionality. Version 3 of the YUI is due for full release at some point this year, but version 2 (current release 2.6) is at this point still the stable and recommended release for general use.

  1. A Look at the New YUI Carousel Control
  2. Enhancing the Page
  3. Additional Configuration
  4. Working with Carouselís Custom Events
By: Dan Wellman
Rating: starstarstarstarstar / 15
April 13, 2009

print this article



Thereís one thing left we need to do; we need to add the behavior that changes the picture information when a new image is selected. To do this, we can use one of the many built-in custom events fired by the carousel at different points during an interaction. Change the final <script> element in carousel3.htmlto the following: 

//create carousel control

var carousel = new YAHOO.widget.Carousel("scientists", {

animation: { speed: 0.5 },

isCircular: true




var names = [

"Niels Bohr",

"Charles Darwin",

"Albert Einstein",

"Galileo Galilei",

"Isaac Newton",

"James Clerk Maxwell"



//picture info

var info = [

"Niels Henrik David Bohr...",

"Charles Robert Darwin...",

"Albert Einstein...",

"Galileo Galilei...",

"Sir Isaac Newton...",

"James Clerk Maxwell..."



//display selected image info

carousel.on("itemSelected", function(i) {


//get info container

var parent = YAHOO.util.Dom.get("information");


//remove child elements if present

(parent.hasChildNodes() != true) ? null : removeChildren();


function removeChildren() {

var children = YAHOO.util.Dom.getChildren("information");


for(prop in children) {





//create new heading and paragraph

var heading = document.createElement("h2");

var p = document.createElement("p");


//get text from arrays

var headText = document.createTextNode(names[i]);

var pText = document.createTextNode(info[i]);


//add text to new elements




//add new elements to page






//render to page





Save this change as carousel4.html. Letís review what we added. First we added two new literal arrays, the first holding the names of the distinguished gentlemen in the images, the second holding information about each of them (I trimmed it down to just their names for readability; you can see the full information in the code files). 

After the arrays we add an event handler for the custom itemSelectedevent, which is fired every time an image is selected (this includes the initial selection when the page loads, the automatic selection when the carousel page is changed and a manual selection with the mouse). An anonymous function is passed to the event handler as the second argument, so this function will be executed every time the event is detected. 

Within the anonymous function we first get the container element that the name and information resides in using the dom utilityís getmethod. We then check the container element to see whether it has any child elements. This is done using JavaScriptís ternary statement. If it does contain child elements we call the removeChildrenfunction. 

This function uses the getChildrenmethod to return an object containing all of the child elements. We use a forÖinloop to cycle through each property in the object and remove them all. This is necessary so that the container element doesnít fill up with names and information after several selections. 

We then create new <h2>and <p>elements and textNodesto go into them. The textNodesare populated using the iargument, which is automatically passed to our anonymous function and refers to the index number (starting at 0) of the selected image. This allows us to get the correct name and matching information out of the arrays. The new elements are then inserted into the container element and the carouselís renderand showmethods are called as before. 

When you run this page in the browser, you should be able to select an image in the carousel, and have the information <div>populated with information about the picture: 



In this article we looked at the new YUI carousel component; while it is still early in this component's life, enough functionality is exposed by its API for us to make good use of it. We looked at some of the basic properties and methods that can be used to work with the control programmatically and saw how the widget is rendered and behaves.

>>> More JavaScript Articles          >>> More By Dan Wellman

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: