PDA

View Full Version : Resolved highlight title when in 'current' status.



orenlebbo
07-03-2011, 10:22 AM
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
07-03-2011, 03:34 PM
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
07-03-2011, 04:04 PM
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
07-03-2011, 04:12 PM
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
07-03-2011, 04:20 PM
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
07-03-2011, 04:25 PM
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
07-03-2011, 04:33 PM
still not... :(

Nile
07-03-2011, 04:34 PM
It's .color not .Color

orenlebbo
07-03-2011, 04:39 PM
still don't...
and also now it cancelled the hover effect somehow...

Nile
07-03-2011, 04:48 PM
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
07-03-2011, 04:50 PM
yes !!! :)
thank you so much !!

Nile
07-03-2011, 04:51 PM
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
07-03-2011, 04:53 PM
i'll do it !
thanks again :)

Nile
07-03-2011, 04:54 PM
Did you fix the issue?

orenlebbo
07-03-2011, 04:56 PM
i thought i did... but i didn't... :(
once mouseovering the title after its open, it losses it color again..

Nile
07-03-2011, 06:03 PM
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
07-03-2011, 06:10 PM
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
07-03-2011, 06:20 PM
It doesn't look like you made a .hover class for your link in the css

orenlebbo
07-03-2011, 06:32 PM
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
07-03-2011, 07:19 PM
Yes, add the following to your css:


.hover {color: #EC008C !important;}

orenlebbo
07-03-2011, 07:23 PM
awesome!!
this " !important" always give me troubles...

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

Nile
07-03-2011, 07:24 PM
I'm glad to help, once again :D. Please set the thread to resolved now.

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