[Pro] Carousel Tab Highlight

Freeway
1

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

2

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

3

Hi Walt,

Firstly, sorry for the late reply, just back from my hols!

Secondly, thank you for your response. I’m still having a problem finding the menu that allows me to select ‘a border’ around the currently selected tab number.

Could you explain (to a layman like myself) how I can effect the changes you say are possible. I only want something really simple, like a white border or something to the currently selected tab page number. So the easiest way I can achieve this (if possible) without any coding would be hugely appreciated.

Thank you again.

Mark

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

4

Freeway doesn’t expose a border attribute in the Edit Style dialog, but if you know the CSS, you can add it yourself with the Extended dialog.

Try this:

  1. Create a new style with the Tag set to .controls a image.active and the Name set to nothing. Note that you have to tab out of the Name field to get Freeway to notice that you don’t want it to have a value; clicking elsewhere doesn’t do the trick.
  2. Click on the Extended button, and in the resulting dialog, click New. In the Name field, enter border, and in the Value field, enter 1px solid white. Click Okay to save this attribute.
  3. Click New again to add a second attribute. In the Name field, enter margin, and in the Value field, enter -1px 0 0 -1px. Okay out of the stack of dialogs.

You don’t have to apply this style to anything, because it is only named in the Tag field, Freeway will publish it on every page in your site, and CSS will cause it to apply automagically.

First note: the ` back-ticks that you may see if you are reading this in Mail are not part of what you need to enter, they are how I indicate “code” to Markdown, the formatting engine used on the Web forum (and you won’t see them on the Web). Ignore them if you see them.

Second note: you can use this interface to create CSS rules of almost limitless depth, you just have to understand how Freeway constructs a rule in this interface.

Third note: CSS has this weird notion that a border is part of the dimensions of a box, so you can’t add a border to something without making it larger. Hence the negative margin (the values go top, right, bottom, left), which scoots the box to the top and left to compensate for it suddenly being larger when “active”.

Hope this helps,

Walter

On Jul 26, 2012, at 4:14 AM, Mark Lawrence wrote:

Hi Walt,

Firstly, sorry for the late reply, just back from my hols!

Secondly, thank you for your response. I’m still having a problem finding the menu that allows me to select ‘a border’ around the currently selected tab number.

Could you explain (to a layman like myself) how I can effect the changes you say are possible. I only want something really simple, like a white border or something to the currently selected tab page number. So the easiest way I can achieve this (if possible) without any coding would be hugely appreciated.

Thank you again.

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