Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: active header links color

  1. #1
    Join Date
    May 2009
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default active header links color

    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/dynamici...enu-glossy.htm

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

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

  3. #3
    Join Date
    May 2009
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    	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:
    Code:
    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/dynamici...uppliment2.htm
    DD Admin

  5. #5
    Join Date
    May 2009
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default drop down function breaks

    would you mind showing me how it's placed in the script?

    I place the code and it breaks.

    Code:
    <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>

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The line:

    Code:
    var colorsarray=['blue', 'green', 'red']
    should be placed outside the initialization code block, for example, here instead:

    Code:
    <script type="text/javascript">
    
    var colorsarray=['blue', 'green', 'red']
    
    //initialization code here
    DD Admin

  7. The Following User Says Thank You to ddadmin For This Useful Post:

    racerxfactor (05-19-2009)

  8. #7
    Join Date
    May 2009
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default it's getting there

    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

  9. #8
    Join Date
    May 2009
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default another observation

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

    Code:
    <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
    Last edited by racerxfactor; 05-19-2009 at 06:27 PM.

  10. #9
    Join Date
    May 2009
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    /poke

  11. #10
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:


    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.
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •