Blog > Code

10

Oct 10

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

Creating Carousels without fixed width or height in Internet Explorer

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

I have used the YUI carousel in several projects, some of which both require the WebKit fix and to use carousels which vary in width and height dynamically. Therefore I have identified a fix for 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:

1
2
3
4
5
6
7

} else {
if(rows) {
size = getCarouselItemSize.call(carousel, "height");
size = size * rows;
Dom.setStyle(carousel._carouselEl, "height", size + "px");
}
}

To the following:

1
2
3
4
5
6
7
8
9

} else {
size = getCarouselItemSize.call(carousel, "height");

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

Dom.setStyle(carousel._carouselEl, "height", size + "px");
}

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.

Share this...

Comments

3 Comments to "YUI2: Javascript Carousel – An update about version 2.8.*"

16th Oct

Gopal Venkatesan says:

First of all, thanks for the patch.

I’ve pushed this patch and another bug fix on my repo [g13n/yui2].
16th Oct

ErisDS says:

Hi Gopal,

Awesome thanks! How do I get this fix pushed to the main YUI2 repo?

Eris :)
8th Nov

Ian Norton says:

Thanks for the patch – very frustrating bug.