# carousel tabs

**URL:** <https://discourse.softpress.com/t/carousel-tabs/9776>\
**Category:** Freeway\
**Created:** [December 28, 2010, 7:15am UTC](https://discourse.softpress.com/t/carousel-tabs/9776 "2010-12-28T07:15:53Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dave1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/bc79bd/32.png) [@Dave1](https://discourse.softpress.com/u/Dave1)\
**Post date:** [December 28, 2010, 7:15am UTC](https://discourse.softpress.com/t/carousel-tabs/9776/1 "2010-12-28T07:15:53Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 28, 2010, 2:52pm UTC](https://discourse.softpress.com/t/carousel-tabs/9776/2 "2010-12-28T14:52:02Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Dave1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/bc79bd/32.png) [@Dave1](https://discourse.softpress.com/u/Dave1)\
**Post date:** [December 28, 2010, 7:35pm UTC](https://discourse.softpress.com/t/carousel-tabs/9776/3 "2010-12-28T19:35:11Z")

</div>

Hi Walter,

Sure. Here is the link [http://wrenchwranglers.com/home.html](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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 28, 2010, 8:11pm UTC](https://discourse.softpress.com/t/carousel-tabs/9776/4 "2010-12-28T20:11:25Z")

</div>

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:

```auto
$$('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](http://wrenchwranglers.com/home.html)

* * *

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

---

<div class="post-metadata">

**Author:** ![Dave1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/bc79bd/32.png) [@Dave1](https://discourse.softpress.com/u/Dave1)\
**Post date:** [December 28, 2010, 8:45pm UTC](https://discourse.softpress.com/t/carousel-tabs/9776/5 "2010-12-28T20:45:26Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Dave1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/bc79bd/32.png) [@Dave1](https://discourse.softpress.com/u/Dave1)\
**Post date:** [December 28, 2010, 8:48pm UTC](https://discourse.softpress.com/t/carousel-tabs/9776/6 "2010-12-28T20:48:00Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [December 28, 2010, 9:11pm UTC](https://discourse.softpress.com/t/carousel-tabs/9776/7 "2010-12-28T21:11:01Z")

</div>

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](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![Dave1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/bc79bd/32.png) [@Dave1](https://discourse.softpress.com/u/Dave1)\
**Post date:** [January 1, 2011, 10:51pm UTC](https://discourse.softpress.com/t/carousel-tabs/9776/8 "2011-01-01T22:51:39Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Dave1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/bc79bd/32.png) [@Dave1](https://discourse.softpress.com/u/Dave1)\
**Post date:** [January 1, 2011, 11:26pm UTC](https://discourse.softpress.com/t/carousel-tabs/9776/9 "2011-01-01T23:26:53Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [January 2, 2011, 1:08am UTC](https://discourse.softpress.com/t/carousel-tabs/9776/10 "2011-01-02T01:08:25Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [January 2, 2011, 1:19am UTC](https://discourse.softpress.com/t/carousel-tabs/9776/11 "2011-01-02T01:19:29Z")

</div>

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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [January 2, 2011, 4:11am UTC](https://discourse.softpress.com/t/carousel-tabs/9776/12 "2011-01-02T04:11:44Z")

</div>

I’ve written a definitive treatise on the subject: [http://www.actionsforge.com/articles/view/9-tag-only-styles](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](http://freewaytalk.net/person/options)

* * *

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