Forums

Hi,

I tend to use Firebug to poke around the css when I can't work out how to do it... it's often the quickest way for me!

I don't know the carousel much, but looking at the first example on the yui page, the button text is 'hidden' by using padding: there's a padding-left of 50px which moves it out beyond the right-hand side of the button. This is on the button html element. On the parent of the button, a span element, there's some overflow:hidden and dimensions, which will make sure the text stays out of shot.

I should think you can do something similar on the other page links. In other widgets I think sometimes you see 'text-indent; -9999px' or something like that to get things off screen when they're not needed.

Matt

Have to post these answers on the fly, but yea, regarding disabling pagination, you'll have to go with CSS, make sure you're selectors have enough weight to override Caraousel's defaults:

#container1 #selector2 .etc .yui-carousel-nav ul {
display:none;
}

Thank you for responding.

I tried these:

YAHOO.widget.Carousel.prototype.CLASSES.STRINGS.NEXT_BUTTON_TEXT = "";
YAHOO.widget.Carousel.prototype.CLASSES.STRINGS.PREVIOUS_BUTTON_TEXT = "";

But anywhere I place them in the code causes the carousel to break. Either it ceases to work completely, or one part, such as the image animation, stops working.

This is what I have:

(function () {

var carousel;

YAHOO.util.Event.onDOMReady(function (ev) {
var carousel = new YAHOO.widget.Carousel("messagebox", {

animation: {
speed: 0.5
}

});

carousel.set("numVisible", 1);

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


Where exactly would I put in the code to over ride the text strings?

Thank you for any advice.

One important note, it's important for accessibility reasons (screen readers) to leave the text in. Did you try something in your CSS like text-indent: -10000px ?