Enhancing the Page - 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.

TABLE OF CONTENTS:

By: Dan Wellman

Poor Best

Rating:

/ 15

April 13, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

We use no additional CSS of our own in the first example, and while we can happily scroll through the pages containing the images, and select individual images, nothing else really happens. Let’s add some additional elements to our page as well as some basic styling. Change carousel1.htmlso that it appears as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>YUI Carousel Example 2</title>

</head>

<span id="title">Great Men of Science</span>

<ol>

</ol>

</div>

//create carousel control

var carousel = new YAHOO.widget.Carousel("scientists");

//render to page

carousel.render();

//display

carousel.show();

</script>

</body>

</html>

Save the changes as carousel2.html. We haven’t added much; a <span> element to use as the title of the carousel, and a new <div> element which will hold information about each image. We also need some CSS; in a new page in your text editor add the following stylesheet:

#scientists { margin:0 auto; }

#title {

font-weight:bold; font-size:18px; position:absolute;

top:8px; left:10px;

}

.yui-carousel .yui-carousel-item-selected, .yui-carousel-element li {

margin:0; width:115px; height:160px;

}

#information {

width:341px; margin:0 auto; border:1px solid #808080; padding:5px;

}

#information h2 { margin:0 0 10px 0; }

#information p { margin:0; }

Save this as myCarousel.cssin the same location as the HTML files. There's really nothing worth going into much detail about in this file, except for the third rule; we need to override some of the styling provided by the component, just to tidy up the images a little. As our stylesheet comes after the carousel stylesheet, our style rules will take precedence provided we match or exceed the original specificity.

If you view the new page in your browser, you should see the title at the top of the widget, and you may be able to tell that the images sit a little better in the carousel.

Next: Additional Configuration >>