Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: text a:active not working in Animated Collapsible DIV

  1. #11
    Join Date
    Sep 2009
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    This works great, but I have a specific case where certain links have to also change to a different color, so therefore I need to target some specific ID's or classes. I need all of them to change to bold, but I am not getting the specific syntax correct to target a specific ID to change color. Is it also/alternately possible to target a group and apply a set of changes?

    Here's the part of the code below that has me a bit stumped:

    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    if ($('#'+divobj.id+"-toggle").length==1) //if toggler link exists
    $('#'+divobj.id+"-toggle").css('font-weight', (state=='block')? 'bold' : 'normal')

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

    Default

    To also make toggler links that carry a certain CSS class name (ie: "someclass") bold when expanded, you would extend the code above with the part in red below:

    Code:
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    	if ($('#'+divobj.id+"-toggle").length==1){ //if toggler link exists
    		$('#'+divobj.id+"-toggle").css('color', (state=='block')? 'green' : 'gray')
    		if ($('#'+divobj.id+"-toggle").hasClass('someclass'))
    			$('#'+divobj.id+"-toggle").css('fontWeight', (state=='block')? 'bold' : 'normal')
    	}
    }
    DD Admin

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

    Ouroboros (10-01-2009)

  4. #13
    Join Date
    Sep 2009
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much! I'm really learning a lot here. One thing I've noticed is that when a link is set to toggle a div and this type of function has been applied to it, the regular css :hover and :active states disappear. I guess this is just the nature of having a script applied to it that overrides normal behavior?

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

    Default

    Well, when you explicitly change the CSS color of a link, by way of:

    Code:
    $('#'+divobj.id+"-toggle").css('color', (state=='block')? 'green' : 'gray')
    for example, that operation supersedes the color values set in the ":hover" and "active" states. My CSS specificity is a little rusty, but I believe that's the cause. If so, you might instead switch CSS classes instead, in which all states of the link accounted for within the CSS class definition, for example:

    Code:
    $('#'+divobj.id+"-toggle").get(0).className=(state=='block')? 'greenclass' : 'grayclass'
    DD Admin

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

    Ouroboros (10-01-2009)

  7. #15
    Join Date
    Sep 2009
    Posts
    9
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Ah OK. Very interesting and powerful - I forget the power of jQuery sometimes until a specific example like this comes along. I'll have a go at it and if it works I'll let you know. Thanks again for being so kind and helpful!

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
  •