Active state


Registered User
94 posts

I am having trouble getting "Active" to work. Had no problem with "Hover". I tried to follow the steps in "Colorful" tutorial. I think a step was left out or something I am doing wrong.
1.0 ..........I loaded Page 1 and clicked on Button 1 and now Class showed x-link-text-1. Loaded correct page into HREF.
2.0 ........I appended to Class "active" Now Class is "x-link-text-1" & "x-active"
3.0 ........Changed "Regular" to "Active"
4.0 .......Changed background color for active state.
5.0 .......Switch back to "Regular" state.
6.0 ........I loaded Page 2 and clicked on Button 2 and now Class showed x-link-text-1. Loaded correct page into HREF.
7.0 .......completed steps 2 - 5.
8.0 .......I loaded Page 3 and clicked on Button 3 and Class showed x-link-text-1. Loaded correct page into HREF.
9.0 .......completed steps 2 - 5.
10.0 ........Saved project and previewed on FF and Chrome. Clicking on a page "hover" works and page changes but does not show "Active" color.
What am I doing wrong or not doing?
Larry Penny


Registered User
1,370 posts
Online Now

Larry Penny wrote:
I am having trouble getting "Active" to work. Had no problem with "Hover". I tried to follow the steps in "Colorful" tutorial. I think a step was left out or something I am doing wrong.
1.0 ..........I loaded Page 1 and clicked on Button 1 and now Class showed x-link-text-1. Loaded correct page into HREF.
2.0 ........I appended to Class "active" Now Class is "x-link-text-1" & "x-active"
3.0 ........Changed "Regular" to "Active"
4.0 .......Changed background color for active state.
5.0 .......Switch back to "Regular" state.
6.0 ........I loaded Page 2 and clicked on Button 2 and now Class showed x-link-text-1. Loaded correct page into HREF.
7.0 .......completed steps 2 - 5.
8.0 .......I loaded Page 3 and clicked on Button 3 and Class showed x-link-text-1. Loaded correct page into HREF.
9.0 .......completed steps 2 - 5.
10.0 ........Saved project and previewed on FF and Chrome. Clicking on a page "hover" works and page changes but does not show "Active" color.
What am I doing wrong or not doing?

I think the problem is the "Active" state isn't the "active" state you are expecting

in FF / CC world "active" means it will briefly change to the colour you made when you CLICK on it,,, You have to be lightening fast to see it/

The Sky Is A big Empty Space : But There Is No Room For Error
https://foundation-framer-tutorials.com


Registered User
94 posts

I guess I have confused everyone. What I want to accomplish is to have the active page tab to be a different color than the other tabs. Example: Your are on Page 1 and its menu tab is brown while the other menu tabs are blue. Click on Page 2 menu tab when Page 2 opens the Page 2 tab is now brown while others are blue.
Larry Penny


Registered User
1,370 posts
Online Now

That is not automatically possible at the moment without editing the code and some css jiggery pokery after exporting

at the moment you would need to assign the relevant different colour you want for the page active tab on every page to achieve it within FF (unless someone else knows different)

What many designers do nowadays is to use the FF built in component " Breadcrumbs" inserted just below the menu border or the top left of the main part of the page,, this is an indicator for visitors as to where they are on the site, but once again needs manual adjusting for colours type etc on every page.
The Sky Is A big Empty Space : But There Is No Room For Error
https://foundation-framer-tutorials.com


Registered User
1,370 posts
Online Now

I should have said assign the different background colours to the different tabs in REGULAR state not active just to clarify
The Sky Is A big Empty Space : But There Is No Room For Error
https://foundation-framer-tutorials.com


Registered User
1,370 posts
Online Now

I have made a video showing the process

https://www.dropbox.com/s/g9ip5jyy6sa4ijg/home-active-buttons.zip?dl=0

have a go and see what you think
The Sky Is A big Empty Space : But There Is No Room For Error
https://foundation-framer-tutorials.com


Registered User
94 posts

That is it. I now see what I was doing wrong. Since you made the Utube why don't you finish it by adding How to change size of Tab/Button slightly, ease in/ease out, set delay" during hover and active state etc.. The other two states I don't know what their purpose is you could show how to install them also. This would be helpful for many.
Great Job the tutorial was slow enough where you could follow easily.
Thanks
Larry Penny


Registered User
196 posts
Online Now


in FF / CC world "active" means it will briefly change to the colour you made when you CLICK on it,,, You have to be lightening fast to see it/



It seems this does not work in FF, but it does work with RSD...please see the "ladybug" theme...it uses active satus...just FYI
Not sure if it is an oversight in FF or it is just not possible???


Registered User
1,370 posts
Online Now

mark johnson wrote:

in FF / CC world "active" means it will briefly change to the colour you made when you CLICK on it,,, You have to be lightening fast to see it/



It seems this does not work in FF, but it does work with RSD...please see the "ladybug" theme...it uses active satus...just FYI
Not sure if it is an oversight in FF or it is just not possible???


Thanks for that Mark but I don't use RSD and don't have any theme's,, It can be done in FF just a bit of messing about but needs to be applied to classes not the "state"
The Sky Is A big Empty Space : But There Is No Room For Error
https://foundation-framer-tutorials.com


Registered User
94 posts

FF is what I am using it in. Should work just fine on all three responsive.
Larry Penny

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.