Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts

    toggleClass() bug

    I jusy found this wierd bug with toggleClass().

    here's the code I'm working with

    html
    Code:
    <div id="contentContainer" class="contentContainer">
         <div id="contentContainerHeader" class="containerHeader001"></div>
    </div>
    css
    Code:
    #contentContainer{
    	width:190px;
    	min-height:200px;
    	margin-top:10px;
    }
    #contentContainerHeader{
    	width:190px;
    	height:30px;
    	background-repeat:no-repeat;
    }
    .contentContainerHeader001{
    	width:190px;
    	height:30px;
    	background-image:url(../images/header-001.png);
    	background-repeat:no-repeat;
    }
    .containerContainerHeader002{
    	width:190px;
    	height:30px;
    	background-image:url(../images/header-002.png);
    	background-repeat:no-repeat;
    }
    jQuery
    Code:
    $(document).ready(function() {
         $('.contentContainer').hover(over, out);
        function over(event) {
         $(this).children('.contentContainerHeader001').toggleClass('contentContainerHeader002');
        }
        function out(event) {
         $(this).children('.contentContainerHeader002').toggleClass('contentContainerHeader002');
    	}
    });
    Now, it seems that the position of the "contentContainerHeader001" and "contentContainerHeader002" matter on the css file.

    Everything works the way it is, but if I switch the css araound like this. With "contentContainerHeader002" before "contentContainerHeader001"...
    Code:
    .containerContainerHeader002{
    	width:190px;
    	height:30px;
    	background-image:url(../images/header-002.png);
    	background-repeat:no-repeat;
    }
    .contentContainerHeader001{
    	width:190px;
    	height:30px;
    	background-image:url(../images/header-001.png);
    	background-repeat:no-repeat;
    }
    It no longer works.

    I couldn't find any documentation about the css position mattering.

    Could someone explain why this is happening?
    Last edited by gilgimech; 01-17-2011 at 06:50 AM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Is this difference intentional?
    Code:
    "contentContainerHeader002" before "contentContainerHeader001"
    
    .containerHeader002{
    ...
    }
    .contentContainerHeader001{
    ...
    }
    There is no contentContainerHeader002 in CSS, but there is in jQuery ... can you validate this?

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Sorry, that was just a typo. I actually use content specific names. I just wrote up generic for the examples. They should both be contentContainerHeader001 and contentContainerHeader002.I will edit it.
    Last edited by gilgimech; 01-17-2011 at 06:49 AM.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    It's still looking weird but I think I managed to identify the problem:

    When toggling the class "contentContainerHeader002" for an element with class "contentContainerHeader001" you will have the following classNames for the element

    1. "contentContainerHeader001"
    2. "contentContainerHeader001 contentContainerHeader002"

    In the second case the order of CSS entries counts. If the declaration of class "contentContainerHeader001" preceeds the declaration of class "contentContainerHeader002", you will see the background-image change on hover (second entry wins). If "contentContainerHeader002" preceeds "contentContainerHeader001" you will see no change (second entry wins, which is the unchanged background-image this time).

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by devnull69 View Post
    When toggling the class "contentContainerHeader002" for an element with class "contentContainerHeader001" you will have the following classNames for the element

    1. "contentContainerHeader001"
    2. "contentContainerHeader001 contentContainerHeader002"

    In the second case the order of CSS entries counts. If the declaration of class "contentContainerHeader001" preceeds the declaration of class "contentContainerHeader002", you will see the background-image change on hover (second entry wins). If "contentContainerHeader002" preceeds "contentContainerHeader001" you will see no change (second entry wins, which is the unchanged background-image this time).

    OK, that makes sense. So I guess, removeClass() and addClass() would be a better choice then? Then you wouldn't run into that issue with the css placement.

    Then why does it seem like most people prefer toggle to add/remove? Toggle seems to be very limited in that perspective.

    It's still looking weird but I think I managed to identify the problem:
    Sorry bout that. I just hacked up the code and css from what I was using to get an example out. I should have just copied it.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    People prefer toggle to switch on/off certain element states because it is easy to use. But you should make sure you don't have two conflicting class names.

    Two CSS definitions conflict if they have the same specificity. The specificity is defined by the number and "cardinality" of selectors involved.

    http://www.smashingmagazine.com/2007...u-should-know/

    So usually you declare an "active" class and you just toggle on/off this class. The normal behaviour of the element should then be specified using a selector with a lower specificity


  •  

    Posting Permissions

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