Active state - Post ID 267054

User 2796380 Photo


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
User 2699991 Photo


Registered User
4,782 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/

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2796380 Photo


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
User 2699991 Photo


Registered User
4,782 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.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

I should have said assign the different background colours to the different tabs in REGULAR state not active just to clarify
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2796380 Photo


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
User 283347 Photo


Registered User
388 posts


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???
User 2699991 Photo


Registered User
4,782 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"
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2796380 Photo


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.