If you look at the example page (linked from ActionsForge) you will see that this is something you can do. There are some changes you can make to the tabs that are easy (the example just adds a border to the currently-selected tab), and others that require more deep-diving into the mysteries of CSS to accomplish.
In brief, there is a class-based style that is applied automatically by the JavaScript that switches panes, so no matter how your user navigates (prev-next or direct tab navigation) the correct tab will have the active
classname applied to it. This class is added to the image itself, which is the source of some confusion. In order to effect changes to the background of the tab, the tab must be transparent (preferably PNG-24 to avoid any jaggies).
So if you wanted your normal tabs to have a background color, you would need to add this through CSS as well as provide a different background color for the currently-selected tab. Here’s a quick example. I’m writing this the way I would if I was hand-coding CSS, and I’ll provide a hint after for how to translate this into Freeway styles.
Assuming a completely transparent PNG-24 tab image, which I want to normally have a white background and to have a gray background when it is selected, I would write the following:
.controls a img {
background-color: #fff;
}
.controls a image.active {
background-color: #ccc;
}
To do this in Freeway, you could just wrap the above in a block, and pop it into the Before section of Page / HTML Markup. Or, you could read this article: http://actionsforge.com/articles/view/9-tag-only-styles and build these styles in Freeway’s Style editor.
Walter
On Jul 20, 2012, at 7:17 AM, Mark Lawrence wrote:
Hi everyone,
My carousel is up and running. I have arrows for go forwards and backwards. And I now have tab buttons that allows the user to select each tab in turn.
However I’d like to do the following but I’m not sure how.
I’d like each tab to stay highlighted when its tab is clicked on, so the user knows where they are. But more importantly I would like the tabs to highlight when the user clicks on the ‘Next’ arrow too.
So for example, the user is on ‘Tab 2’ this is highlighted to tell them so. But when the user clicks ‘Next’ button, ‘Tab2’ unhighlights and ‘Tab 3’ automatically highlights so they know they’ve moved on.
The aim is simple. Wherever the user is in the carousel, the tabs are highlighting where they are whether they’ve pressed the ‘Next’ tab or the ‘Tab’ buttons.
Hope that makes sense, and hope someone can help!
Kind regards,
Mark
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