carousel tabs

Hi,

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.

Thanks in advance,
D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What are you using to create this Active state? Can you post a link to
your page?

Walter

On Dec 28, 2010, at 2:15 AM, Dave wrote:

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Sure. Here is the link http://wrenchwranglers.com/home.html

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).

Thanks in advance,
DR


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Aha. I see. You could try the following, but I don’t know if it will
work.

  1. Apply Protaculous to the page, and set it to scriptaculous-packed
    in the Library picker.
  2. 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.

Walter

On Dec 28, 2010, at 2:35 PM, Dave wrote:

Hi Walter,

Sure. Here is the link http://wrenchwranglers.com/home.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Thanks for the super fast reply.

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.

Thanks,
DR


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?

Thanks,
DR


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?

Thanks,
DR


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Are you referring to the script provided earlier in this thread? The script already has the word onclick.

Thanks,
DR


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.’

How does one set the .active and name property?

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Create a new style. In the Tag field type .active then tab over to the Name field and delete whatever FW has helpfully put in there for you.

Then using the extended button add the styling you want ie a Name/Value pair of border: 1px red will give your item a 1 pixel red border.

That would look like Name: border Value: 1px red

create style

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

A quick note: just check before you do the final OK (after adding the styling) that FW hasn’t sneaked something back into the Name box.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve written a definitive treatise on the subject: http://www.actionsforge.com/articles/view/9-tag-only-styles

Walter

On Jan 1, 2011, at 8:19 PM, DeltaDave wrote:

A quick note: just check before you do the final OK (after adding
the styling) that FW hasn’t sneaked something back into the Name box.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options