highlight title when in 'current' status.

[orenlebbo]

1) Script Title: Glossy Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-glossy.htm

3) Describe problem:

hi.
i'm using this menu on the left sidebar of this page (http://kidumi.com/all-in-1.co.il/portfolio/).
i want to add different background color to menu's titles tabs when in 'current' page. i want it to have the same background it has when mouse-overing it...

is there a way to do that ?

thanks
oren

[Nile]

Find the red in your html code, and add the rest in the following code:


onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
if(status == "block"){ //on open
header.className += " hover";
} else { //on close
header.className = header.className.substr(0, header.className.indexOf(" hover"));
}
}

I haven't tested this out yet, but it should add a class "hover" when the menu is open, and take it away when it's not. So all you have to do is add a class hover to your css with the styling you want.

[orenlebbo]

thank you for your answer.
i added the code but what happened is it colors all the titles in the same color.
there's no 'current' effect... and the hover effect doesn't work to.. it resets all the cutomization i had before....
you can see it here (http://kidumi.com/all-in-1.co.il/portfolio/food-beverages/la-farina/)

[Nile]

Okay, scratch that and change it to:


onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
if(status == "block"){ //on open
header.style.fontColor = "#???";
} else { //on close
header.style.fontColor = "#???";
}
}

Change the blue to the color you want it when it opens, and the red when it coses.

[orenlebbo]

nope...
now the menu is working well but no color changing when open/close...
this is what i used:

onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
if(status == "block"){ //on open
header.style.fontColor = "#EC008C";
} else { //on close
header.style.fontColor = "#8E8E8E";
}
}

[Nile]

Stupid mistake, color not fontColor (my fault):


onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
if(status == "block"){ //on open
header.style.color = "#EC008C";
} else { //on close
header.style.color = "#8E8E8E";
}
}

[orenlebbo]

still not... :(

[Nile]

It's .color not .Color

[orenlebbo]

still don't...
and also now it cancelled the hover effect somehow...

[Nile]

This, I tested:


onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
header.style.color = (state == "none") ? "#8E8E8E" : "#EC008C";
header.onmouseover = function(){ this.style.color = "#EC008C"; }
header.onmouseout = function(){ this.style.color = "#8E8E8E"; }
}

[orenlebbo]

yes !!! :)
thank you so much !!

[Nile]

No problem, I'm glad to help :D

In an effort to keep things organized, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"

[orenlebbo]

i'll do it !
thanks again :)

[Nile]

Did you fix the issue?

[orenlebbo]

i thought i did... but i didn't... :(
once mouseovering the title after its open, it losses it color again..

[Nile]

It seems the answer that we're looking for has been right infront of our eyes the whole time. Undo everything I told you to do, but keep that hover class in the css.

Now, find the following in your HTML:


toggleclass: ["", ""],

And change it to:


toggleclass: ["", "hover"],


And there we go, after all those posts, who knew that the answer we were looking for was just sitting there. :D

[orenlebbo]

well first of all it's not "we"... it's you who worked hard :)
anyway - it doesn't work for me..
are you sure that's all i need to do ?

[Nile]

It doesn't look like you made a .hover class for your link in the css

[orenlebbo]

i'm afraid i don't understand...
the titles already has their default classes: <a class="menuitem submenuheader">.
do you mean i should a css:

.hover {color: #EC008C;}
i'm a newbie... don't really know the rules.. :)

[Nile]

Yes, add the following to your css:


.hover {color: #EC008C !important;}

[orenlebbo]

awesome!!
this " !important" always give me troubles...

this thread is resolved now :)
thanks man for your help. i really appreciate it

[Nile]

I'm glad to help, once again :D. Please set the thread to resolved now.

Eventually you'll learn the ways of !important. ;)