[Pro] Carousel Action: focused Tabs?

I’ve looked through the forum without any luck. Maybe I’m missing something?

Is there a way to add focus to the Carousel Tabs? It would be nice to be able to have a clicked function so that the clicked/displayed Tab could change to show that it’s the 'active" or chosen Tab.

If that function isn’t in the Action, could it be added in with javascript HTML Markup?


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

Take a close look at the example page. There is a style called active
which gets passed along to the currently active tab. Whatever you set
for that style will be added to the the tab style, in my example, I
added a border around all but the bottom of the tab, and then a
negative margin to keep the tab from moving down and to the right by
the width of the tab.

Walter

On Sep 8, 2009, at 4:44 PM, Bucky Edgett wrote:

I’ve looked through the forum without any luck. Maybe I’m missing
something?

Is there a way to add focus to the Carousel Tabs? It would be nice
to be able to have a clicked function so that the clicked/displayed
Tab could change to show that it’s the 'active" or chosen Tab.

If that function isn’t in the Action, could it be added in with
javascript HTML Markup?


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

Hah! Wonderful! Took my old brains a while to puzzle it out, as I’m not yet familiar enough with styling via CSS, but I’ve got a working model created.

At the moment, I can successfully focus on the Tab with an underline, created as a bottom margin for the Tab Items. That works.

I’m also considering making a new prototoype page with thumbnail images in the Tabs. Could Active Style then control the weight and color of the Tab text?


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

At the moment, the Carousel Tabs Action requires that you apply the
Action to a Graphic Box, so no, that wouldn’t work. It’s technically
possible using the Glider.js library that I use inside the Action, the
limitation is in the Action. One thing you can do is make your tab
image a clear GIF with colored text, then use a different background
color for the normal and active states of the tab. Or you could set
your thumbnail image as the background image of the tab and then use a
different background position to pull the active state into view.
(Google CSS Sprites for more detail.) That takes some careful tweezer
work in the Edit Styles window.

Walter

On Sep 9, 2009, at 8:40 AM, Bucky Edgett wrote:

I’m also considering making a new prototoype page with thumbnail
images in the Tabs. Could Active Style then control the weight and
color of the Tab text?


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

Hmmm, interesting. Thank you for your patience! It seems the basic principle is that an Active Tab can be manipulated only with Styles that affect the browser presentation of the item: background, margins and padding, borders, outlines.

OK, I bet I could construct Tabs that had some padding, and a different color border for the normal and Active state.

But at that rate, I might as well just use SlideShowPro and create a Flash animation. Except I don’t trust Flash now that Abode is messing with it. For a lot of Panes, SSP’s XML based Lists are a lot easier to munge than using the Carousel Action.

OK, thank you, Walter. I think, given the number of Panes and Tabs I’m going to have to set up, it’s better to keep it simple for now! Good to know there are ways to customize the carousel. It’s one slick Action.


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

Got it. Nailed it. Walter, you put me on the track. I didn’t want to use background colors or images, because my min menu uses a background color to indicate a rollover state. Using the same system to indicate focus would be confusing. Borders were OK, but not great, as my Tabs are set up as a vertical list of names. Borders just look funny around the names. But, just the right background image is the ticket!

  1. Tab is Graphic text with a first line indent of 12 pixels. Item: no color; GIF.
  2. Made a JPEG the same size as the Tabs. Colored it Page color. Put a little triangular “arrow” pointer at the left edge.
  3. Set “.active” to add a background-image of the JPEG. No borders, just the image.
  4. Now, the Focus tab shows the little arrow pointer at its left edge, pointing to the Pane, with the indented GIF text to the left of the pointer.

Gorgeous. Perfect. Can’t thank you enough. A jillion Tabs will all pick up the same Focus Styling with nothing more to be done. Clean, minimal, yet on my spare pages, stands out like a beacon.

http://luckypro.biz/client/walter/v5/01_portfolio/port-01_new.html


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