YUI2: Javascript Carousel - An update about version 2.8.*

Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.

In version 2.8.0 and 2.8.1 the introduction of code for handling rows has caused a bug which means that the carousels won't display in Internet Explorer 6, 7 or 8 unless you explicitly set the width and height of the carousel elements in your CSS. If you want to use non-specific widths and heights, then you need to either use version 2.7.0 OR use my fixed version of 2.8.1. The 2.8.* versions of the YUI2 Carousel also fix an issue with the positioning of elements in the carousel going wrong when zoomed in or out in Safari and other WebKit browsers such as Google Chrome so it's a good idea to use the latest version if you can.

Also, to use version 2.8.* you need to use slightly different CSS to that in my two examples. Details of which are coming soon, along with updated tutorials and part 3.

Fixing version 2.8.1

To apply the fix, you will need to download the latest release of the carousel code:
(Follow the link below, save the page as carousel.js inside your project and link to the file)

http://yui.yahooapis.com/combo?2.8.1/build/carousel/carousel.js

Then locate and change lines 3602-3608:
[cc lang="javascript"]
} else {
if(rows) {
size = getCarouselItemSize.call(carousel, "height");
size = size * rows;
Dom.setStyle(carousel._carouselEl, "height", size + "px");
}
}[/cc]

To the following:
[cc lang="javascript"]
} else {
size = getCarouselItemSize.call(carousel, "height");

if(rows) {
size = size * rows;
}

Dom.setStyle(carousel._carouselEl, "height", size + "px");
}[/cc]

Alternatively, you can download my fixed version of the YUI Carousel here: YUI2 Carousel 2.8.1 fixed [ZIP File]

Hopefully this fixes the issues that many people have been having with the YUI Carousel in Internet Explorer. Also, this fixes a major roadblock in my release of part 3 of my YUI Carousel custom navigation series, so I hope to release the final part very soon.