Rollover and Carousel

Freeway
1

I was wondering how you go about setting up the tabs on a carousel so that they highlight and retain this state when the page they are related to are selected and then revert back to their default state when the next tab is selected?
So far the carousel is fine to set up but I have tried setting it up with a rollover in each of the tab graphic boxes but I appear to get a javascript error.
Any inputs would be most appreciated. I have had a scan through the previous threads but can’t appear to find what I’m looking for

Cheers

Anthony

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

2

I guess that this in some way ties in with the other post I have about toggling off and on of buttons and how they relate to other buttons on the page.

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

3

Whilst sitting waiting on a reply here but I have been trying to work out something.

Having looked at Walters example where the tabs change the background colour of the box I was wondering if it is possible for the font colour to change when the tab is selected as well as the background of the box. I’d like to have the tabs reversing thier colour scheme when they are the active tab.

I’ve tried setting up the tab tags and applying them and though I can get the background to reverse the font itself doesn’t

I hope I’m not having a somewhat extended period of daftness here! Forgive me if I am and its something obvious.

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

4

The issue is that you can only change whatever you can change through CSS here, because the only difference between the tabs is CSS, and they are images, not HTML boxes. If the tabs were allowed to be HTML boxes, then this would be simple, but you can’t wrap a link around an HTML box, so that’s out. In order to change the background that completely, you need to make your tabs as clear GIF images and then make full-image background images for them. Be sure when you do this to actually import a tab-size clear GIF image, don’t just draw a clear GIF box in Freeway and expect it (as I did) to work. Freeway simply drops the image altogether in that case. Have a look at my sprites example[1] for one way to do this on a technical level. Then you simply change the background-position offset for the .active style, and that magically gets you the correct button image.

Walter

  1. Home

On Nov 8, 2011, at 5:19 PM, tonzodehoo wrote:

Whilst sitting waiting on a reply here but I have been trying to work out something.

Having looked at Walters example where the tabs change the background colour of the box I was wondering if it is possible for the font colour to change when the tab is selected as well as the background of the box. I’d like to have the tabs reversing thier colour scheme when they are the active tab.

I’ve tried setting up the tab tags and applying them and though I can get the background to reverse the font itself doesn’t

I hope I’m not having a somewhat extended period of daftness here! Forgive me if I am and its something obvious.

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

5

Hello Walter, Thanks again for this.
I’m working my way through the sprite set up just now. Wanted to check where I’d place the Carousel tab action as its to work the Carousel that I’d like to have such a menu as this rather than navigating to pages.

When you mention the GIF image are you talking about this in the context of the sprite set up or as part of the original Carousel tab issue?

The Sprite menu is one I’ll definitely be using. Do you think its one that might be emerging as an option for a menu action at all?

All the best for now

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

6

This reminds me of another aspect of menus which sort of ties in with this.
I am using a CSS menu on the same site as this carousel.
I’d like the CSS menu item to be highlighted when the related page in question is selected.
The menu I have set up uses html boxes rather than just text.
You can see it in action here.
http://www.toryglen.org.uk

I can see that the sprite menu set up might deliver the current page highlighted feature I’d been hoping to achieve but before rebuilding this CSS menu can it be modified to do what sprite does?

Cheers for now

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

7

On Nov 9, 2011, at 6:33 AM, tonzodehoo wrote:

This reminds me of another aspect of menus which sort of ties in with this.
I am using a CSS menu on the same site as this carousel.
I’d like the CSS menu item to be highlighted when the related page in question is selected.
The menu I have set up uses html boxes rather than just text.
You can see it in action here.
http://www.toryglen.org.uk

This menu doesn’t seem to be marking the current page in any way, but I could swear there is such a feature in the CSS Menus Action. The way that the Carousel does this is that it applies the ‘active’ classname to the currently active link, and so anything you do to the .active selector in your stylesheet will be magically mapped on to that element.

I recall seeing a class named something like fwCurrent within a CSS Menus page at one point, so I would definitely look through the options in the Action and read the manual to see if there’s any way to get this for free. You definitely want to avoid having to manually apply a classname to a link on every page of your site – what a pain!

I can see that the sprite menu set up might deliver the current page highlighted feature I’d been hoping to achieve but before rebuilding this CSS menu can it be modified to do what sprite does?

If you write a bunch of carefully-named CSS, you can decorate a CSS Menu entirely with sprites. But make an otherwise blank page with a simple CSS Menu on it, and you’ll see the entire raft of CSS you’d have to overload with your own code. Of course, this effort would be paid back because your page would have the graphic style you want, while preserving the semantic and machine-readable list-based menu structure, so if you can invest the time, it would be a great addition to your bag of tricks.

Walter

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

8

On Nov 9, 2011, at 6:19 AM, tonzodehoo wrote:

Hello Walter, Thanks again for this.
I’m working my way through the sprite set up just now. Wanted to check where I’d place the Carousel tab action as its to work the Carousel that I’d like to have such a menu as this rather than navigating to pages.

An instance of Carousel Tab is applied to each graphic box that you want to turn into a direct navigation control, used to select a particular tab out of the Carousel and cause it to scroll into view.

When you mention the GIF image are you talking about this in the context of the sprite set up or as part of the original Carousel tab issue?

Carousel Tab requires a graphic box as its host. If you draw an empty graphic box and apply the Action to it, Freeway doesn’t publish the image, so the effect is broken. If you import an image into that graphic box (in this case a 1x1 clear GIF) and stretch it to fit the box, then it does publish the image, and the sprite effect has somewhere to go.

The Sprite menu is one I’ll definitely be using. Do you think its one that might be emerging as an option for a menu action at all?

I floated this in the Action list several years ago, when I developed the example page. Paul Dunning made the CSS Rollover Action, which does a variation on the sprite idea, but doesn’t actually do the whole thing. The issue is that in order to do what sprites really do best, you must conjoin all of the images into a single block, but Freeway doesn’t expose anything to the Action writer that would make that possible (even though Freeway’s graphic engine has done this trick since version Nought). Without some way to stitch all the images together, the Action wouldn’t be very useful for the lay user.

It should be possible to add this to the core of Freeway, in fact it lends itself to that very well, since it can be expressed in some simple algorithmic rules (if an image is below such-and-such dimensions, add it to the sprite block and replace it with a clear GIF spacer), but Softpress have a lot of fish to fry, and only so many pans, so I doubt it’s going to see the feature list any time soon.

Walter

All the best for now

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

9

I floated this in the Action list several years ago, when I developed the example page. Paul Dunning made the CSS Rollover Action, which does a variation on the sprite idea, but doesn’t actually do the whole thing. The issue is that in order to do what sprites really do best, you must conjoin all of the images into a single block, but Freeway doesn’t expose anything to the Action writer that would make that possible (even though Freeway’s graphic engine has done this trick since version Nought). Without some way to stitch all the images together, the Action wouldn’t be very useful for the lay user.

Those recent additions to the Actions API that Stewart detailed the other day may make this kind of thing easier to build into an Action. It won’t expose every single button to the Action (or if it does, it’s a complex job - probably beyond what Actions can do right now). However, it is likely that the creation of a sprite for each button is possible, which is a step in the right direction.

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

10

And the CSS Menu action does have an option to ‘hilight current page’ - it is the first checkbox in the Main Menu section.

David

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

11

Hello Dave, I have this set up in the CSS menu but as I’m using html boxes in this it doesn’t appear to function. Is there a way to get this to work using the style sheets or something?

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

12

but as I’m using html boxes in this it doesn’t appear to function.

Not sure what you mean by this?

D

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

13

Sorry for the brevity and imprecise nature of my previous response there!

I have set up the CSS menu as you do and then inserted html boxes with links and text rollovers in the indented list structure.
Does this make sense?

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

14

Any particular reason for doing it this way - you would be as well not using the CSS menu action at all.

Using the CSS action on its own you can style it like you have and retain all the functionality of current page hilighting etc.

D

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

15

It was actually Wlater that put me onto it on this thread:

http://freewaytalk.net/thread/view/94414#m_94414

The text rollovers were to trigger some layers. If it can be done within the CSS menu then that would be great but I couldn’t see how to. If you’ve any ideas then let me know.

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

16

Are you triggering layers from the menu here?

D

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

17

This is a v quick example that uses the CSS menu action with text rollover action for the menu text http://www.deltadesign.co/menutest/

Click the link to highlight current page, rollover link to trigger image.

D

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

18

Morning Dave,

Looks quite good. Yes I am triggering layers.
I assume that you aren’t using indented html boxes in this one then?
How are you able to get the trigger to work from within the CSS without the html boxes?

I’m curious…

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

19

I am using a simple list (as per a normal CSS Menu) but instead of text I have a space then insert the Text Rollover action followed by another space. The link text is applied in the Text Rollover action palette and the whole link is styled by selecting the Space-TextRollover Action-Space ‘sandwich’ and styling that.

I can send you an example if it will help.

D

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

20

Sounds interesting. Yes indeed an example would be most helpful.
If it offers a bit more straightforward result then that will be grand.

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