I have carousel implemented using tabs. I basically created grouped rollover buttons, then applied the carousel tab action to each. Carousel works fine.
I have two columns with tabs. Is it possible to make the first tab of each column ‘current’ on page load? Currently they are in non-active state.
Please take notice I would like for tabs ‘Events’ and ‘Members Rides’ to be current on page load (white tab with orange font -my active/hover image). When any other tabs is mouseover or click, the ‘Events’ & ‘Members Rides’ tabs will trigger to their normal state (grey colour tab).
Aha. I see. You could try the following, but I don’t know if it will
work.
Apply Protaculous to the page, and set it to scriptaculous-packed
in the Library picker.
Click on the top Function Body button and paste in the following
script:
$$('img.active').each(function(elm){
var a = elm.up('a');
if(a) a.click();
});
What this hack does is find any images that have the .active class and
click their nearest parent a tag. Whenever a Carousel page loads, the
constructor function sets the .active class on whichever tab applies
to the currently-visible carousel pane.
Depending on how the Actions are applied to your page, and which other
Actions are there, this might not fire at the correct moment to find
any img.active elements. If this does nothing, then try cutting the
code out of the top Function Body editor and pasting it into the
bottom one. This will lead to a little visual stutter as the page
loads and then the tab highlights afterward.
If it works, this will work for any Graphic tab (i.e. not for anyone
using Text tabs). If it doesn’t work, then that’s possibly because the
Rollover Action doesn’t respond to JavaScript invocations of the click
event. I haven’t tested this at all.
You mentioned in the previous post ‘.active’ class. I’m not 100% sure if I have assigned such classes. Do rollover action automatically do this, or is this something I do manually? I followed your instructions on ‘Multiple Carousels’ up to the point stating (Even more optional). BTW, fabulous script and action!
Any additional suggestions are greatly appreciated.
Side note: I gave the snippet of code a go; tried both the top and bottom function. It basically disabled the ‘Carousel’ altogether. Not sure if this has anything to do with ‘.active’ classes?
The .active class is added by Carousel, and you don’t have to ever
apply it (it’s strongly encouraged that you never try to apply it to
anything). What you may want to do is create a new CSS style that
provides some visual clue to go along with that class being applied to
a tab. If you look at my multiple carousels demo page, you’ll see the
effect in play.
As to the script bombing out your entire carousel, try changing the
word click to onclick in the script, and see if it works then.
Walter
On Dec 28, 2010, at 3:48 PM, Dave wrote:
Side note: I gave the snippet of code a go; tried both the top and
bottom function. It basically disabled the ‘Carousel’ altogether.
Not sure if this has anything to do with ‘.active’ classes?
In order to apply a new CSS to the tab, do I need to ungroup and remove the rollover action?
You mentioned, ‘Create a single CSS style with the Tag set to ‘.active’ and the Name property left blank, and add a border or some other bit of style to set off the currently selected tab from the others.’