Image Rendering Problem in Circular Carousel

Best YUI Whizzes,

For many hours now we've been bashing our heads trying to understand why the YUI Circular Carousel refuse to render our images correctly. The problem, which can also be seen using FF in Ubuntu on the example page http://developer.yahoo.com/yui/examples ... ource.html, is that the images loads over each other before "grouping" themselves correctly.

On theory that we have is that the may depend on that the images loads before the css/js, hence renders without correct directives.

We tried setting the following:

Boolean render ( appendTo )
Render the Carousel.

Parameters:
appendTo <HTMLElement | String> The element to which the Carousel should be appended prior to rendering.

Returns: Boolean
Status of the operation

From http://developer.yahoo.com/yui/docs/YAH ... ousel.html but with no improvement.

Ideas would be immensely appreciated.

Best

Noticed that the same bug resides in http://developer.yahoo.com/yui/examples ... clean.html

Reload the page on FF, MSIE or Chrome and you can see all thumbnails showing outside the image viewer at first.

Has not anyone ran into this before?

If I understand your problem correctly you're seeing the images outside the view port before its rendered correctly right? This is because the list (UL/OL) is not hidden before the rendering is complete and the browser renders them in their default style before the Carousel widget applies its styles. You can set the default style for the Carousel container to be positioned "off the screen" initially. Let me fix this as part of the widget itself.

Hello Gopal,

Thanks for your answer!

Yes, you do understand my problem correctly. Will you suggestion work for the http://developer.yahoo.com/yui/examples ... ource.html viewer as well, which is the one we are working on?

Could you possible give me a hint on how to set the "off the screen" parameter?

Best
Johan

Gopal, or any other YUI Authority,

As this is obviously a bug in the viewer, is there any way we can elevate this as a bug report to have it resolved? It's a shame that such a fine application cannot be used in the web community, don't you think?

Also, if anyone can give me a hint on how I can apply Gopal's idea to render "outside the screen" it would be of great help.

[quote="Johan"]
Gopal, or any other YUI Authority,

As this is obviously a bug in the viewer, is there any way we can elevate this as a bug report to have it resolved? It's a shame that such a fine application cannot be used in the web community, don't you think?
[/quote]

Johan,

First of all apologies for my tardy reply. BTW I've tried a bit hard to reproduce the problem on Windows 7 (IE 8 and Firefox 3.6.8) but I'm unable to reproduce this problem (even after clearing the browser cache.) In fact looking at the source the problem shouldn't be there in first place, nevertheless can I request you the browser version and the operating system where I can reproduce this consistently?

At the moment I don't have IE 6 (I can test on IE 6/Windows XP tomorrow.)

[quote="Johan"]
Also, if anyone can give me a hint on how I can apply Gopal's idea to render "outside the screen" it would be of great help.[/quote]
[/quote]

That said, before I get to try on Windows XP tomorrow can I request you to make the following change and let me know of the results?

Replace the following section:

YAHOO.util.Event.onDOMReady(function (ev) {
var carousel = new YAHOO.widget.Carousel("container", {
isCircular: true, numVisible: 1
});

carousel.render(); // get ready for rendering the widget
carousel.show(); // display the widget
});

with:

YAHOO.util.Event.onContentReady("container", function (ev) {
YAHOO.util.Dom.setStyle("container", "visibility", "visible");

var carousel = new YAHOO.widget.Carousel("container", {
isCircular: true, numVisible: 1
});

carousel.render(); // get ready for rendering the widget
carousel.show(); // display the widget
});

and add the following lines within the "style" section:

.yui-carousel {
visibility: hidden;
}

Thanks for your patience!

Many thanks for your reply Gopal,

Indeed strange that you cannot reproduce the problem. I am running win 7 and have the same issue on MSIE8, FF 3.6.10 and Chrome. My colleague is on Ubuntu/FF and have the same issue. I could let you in on our development server but cannot post the URL on this forum. Any other way of getting in contact "off the spiders"?

If you reload http://developer.yahoo.com/yui/examples ... clean.html on MSIE 8, are not the thumbnails rending outside the viewer?

Will test your example right away.

Cheers,

[quote="Johan"]Many thanks for your reply Gopal,

Indeed strange that you cannot reproduce the problem. I am running win 7 and have the same issue on MSIE8, FF 3.6.10 and Chrome. My colleague is on Ubuntu/FF and have the same issue. I could let you in on our development server but cannot post the URL on this forum. Any other way of getting in contact "off the spiders"?
[/quote]

Hi Johan,

How about using private message?

[quote="Johan"]If you reload http://developer.yahoo.com/yui/examples ... clean.html on MSIE 8, are not the thumbnails rending outside the viewer?
[/quote]

Let me something, I'll test on a different machine tomorrow and let you know the results.
[/quote]

Thanks!

Johan,

I did see this problem on Mac/Firefox, let me inspect this and give you an update by Monday EOD since I'm not available this weekend.

BTW did you check with using "onContentAvailable" instead of "onDOMReady"?

Greetings Gopal,

Yes, we tested it, unfortunately the rendering became even worse. I did send you the address to our dev server via private message. Would be great if you can find the time to have a look.

'Best
Johan

Forums

Johan Jonsson