PDA

View Full Version : active header links color



racerxfactor
05-18-2009, 05:23 PM
1) Script Title: accordion
2) Script URL (on DD): http://nowhereyet.com ---no live yet
3) Describe problem: it's not so much a problem. now i know you can set a background image to the active link of which header you press.

i was wondering how you can set up having the active link a different text color and different colors for each header.


http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm

ddadmin
05-18-2009, 09:21 PM
Well, the "toggleclass" option lets you define two different classes that get applied to the header depending on whether it's active or not. Why not just include in the active header's class CSS rules that cause the header link to be of a certain color? This is the option in question:


toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

racerxfactor
05-18-2009, 09:32 PM
thing is, i have seven different menu items with their own sub menus and i'll need to have 7 different colors for each item.

ddadmin
05-19-2009, 07:47 AM
In that case you'll need to use the onopenclose event handler to more selectively modify the header's link color depending on which one is expanded (based on its index relative to its peers) and if it's expanded or not. For example:


onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
header.style.color=(state=="block")? colorsarray[index] : 'white'
}

where colorarray is a JavaScript array you should define somewhere within your script containing the colors of the headers:


var colorsarray=['blue', 'green', 'red']

The color "white" above corresponds to the default header color you want each header to change back to when it is collapsed. For more info on the onopenclose event, see: http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm

racerxfactor
05-19-2009, 04:49 PM
would you mind showing me how it's placed in the script?

I place the code and it breaks.


<script type="text/javascript">


ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
header.style.color=(state=="block")? colorsarray[index] : 'white'
var colorsarray=['blue', 'green', 'red']
}
})


</script>

ddadmin
05-19-2009, 04:56 PM
The line:


var colorsarray=['blue', 'green', 'red']

should be placed outside the initialization code block, for example, here instead:


<script type="text/javascript">

var colorsarray=['blue', 'green', 'red']

//initialization code here

racerxfactor
05-19-2009, 05:43 PM
so far so good, however, it seems to only apply to the class "menuitem submenuheader"; a few of my links are class "menuitem" and it does not apply to them

racerxfactor
05-19-2009, 05:49 PM
actually it does apply to the specific link for class "menuitem" but the corresponding drop down doesn't take into effect


<a class="menuitem submenuheader" href="#" id="visit">visit</a>
<div class="submenu">
<ul>
<li><a href="familymuseum/visit/location_hours.html" class="visit">location hours + admissions</a></li>
<li><a href="familymuseum/visit/facilities_amenities.html" class="visit">facility + amenities</a></li>
<li><a href="familymuseum/visit/transportation.html" class="visit">transportation + parking</a></li>
<li><a href="familymuseum/visit/public_programs.html" class="visit">special exhibitions</a></li>
<li><a href="familymuseum/visit/lectures_discussions.html" class="visit">programs, classes + events</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="tickets.html" id="tickets">tickets</a>
<a class="menuitem submenuheader" href="#" id="museum">museum</a>
<div class="submenu">
<ul>
<li><a href="familymuseum/museum/galleries.html" class="museum">permanent galleries</a></li>
<li><a href="familymuseum/museum/campus.html" class="museum">museum campus</a></li>
<li><a href="familymuseum/museum/membership.html" class="museum">membership</a></li>
<li><a href="familymuseum/museum/press_room.html" class="museum">press room</a></li>
<li><a href="familymuseum/museum/employment.html" class="museum">employment + volunteers</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="#" id="about">about</a>
<div class="submenu">
<ul>
<li><a href="#" class="about">coming soon</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="#" id="special">what's new</a>
<div class="submenu">
<ul>
<li><a href="#" class="special">coming soon</a></li>
</ul>
</div>
<a class="menuitem" href="#" id="calendar">calendar</a>
<a class="menuitem" href="familymuseum/contact.html" id="contact">contact</a>
</div>

so if i click id=tickets it will drop down the submenu of museum

racerxfactor
05-21-2009, 05:43 PM
/poke

ddadmin
05-22-2009, 01:34 AM
I'm not sure I understand actually. It's normal for only the headers that contains the CSS class "submenuheader" to respond to the user as far as expanding/contracting its corresponding sub contents. The designated CSS class is set in your initialization code:



ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group

So when you say:


actually it does apply to the specific link for class "menuitem" but the corresponding drop down doesn't take into effect

That's to be expected, unless you mean the link contains both "submenuheader" and "menuitem" for its class name.

racerxfactor
05-22-2009, 04:29 PM
yes, only the headers containing "menuitem subheader" will only be effected by the varcolor.

i thought i'd remedy that by changing (headerclass: "submenuheader",) with (headerclass: "menuitem",) which breaks it.

any solutions?