SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict greg76's Avatar
    Join Date
    Aug 2004
    Location
    Poland
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing css with javascript

    Hey ya'll,

    been fighting with this little problem for 3 hours or so, cannot come up with a solutions.

    I simply want to change a background of a DIV with a js.

    I have this CSS:
    Code CSS:
    #panel2 {
      background: transparent url('../images/layout/benefits_bg21.jpg') no-repeat;
    }
     
    .panel21 {
      background: transparent url('../images/layout/benefits_bg21.jpg') no-repeat;
    }
     
    .panel22 {
      background: transparent url('../images/layout/benefits_bg22.jpg') no-repeat;
    }
     
    .panel23 {
      background: transparent url('../images/layout/benefits_bg23.jpg') no-repeat;
    }

    and this little javascript:
    Code JavaScript:
    function toggleTab_uo(thisClass) {
      document.getElementById('panel2').className = thisClass;
    }

    and finally this html:
    Code HTML4Strict:
    <div id="panel2">
     <div class="subnav tab1b_nav" id="tab1b_nav">
       <a href="javascript:toggleTab_uo('panel21');">01</a>
       <a href="javascript:toggleTab_uo('panel22';">02</a>
       <a href="javascript:toggleTab_uo('panel23');">03</a>
     </div>
    ..
    ..
    and with every click on sub nav, I would like to change the background image of the Panel2 div. I tried different classes; changed colour, font size - virtually everything EXCEPT the background image; no matter what I do - the background of Panel2 stays always the same, which is the one defined for #panel2 in CSS.

    What am I doin' wrong?

    Thanks for any tip or advice!
    Cheers,
    Greg

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have 2 issues to deal with from what I see. First you have a syntax error in your inline javascript:
    Code:
     <div class="subnav tab1b_nav" id="tab1b_nav">
       <a href="javascript:toggleTab_uo('panel21');">01</a>
       <a href="javascript:toggleTab_uo('panel22';">02</a> <!--Missing closing parenthesis -->
       <a href="javascript:toggleTab_uo('panel23');">03</a>
     </div>
    Code CSS:
     
    Secondly, your css rules are in conflict. You cannot override an ID based rule with a class based rule by default. Since both rules are active, the ID takes precedence. You have 2 options to deal with this easily. The first is to remove the rules from the ID selector into a class, and make that class active by default. The second is to use the css keyword !important to force the classes to override the id rules.
    Example:
    Code CSS:
    #panel2 {
      background: transparent url('../images/layout/benefits_bg21.jpg') no-repeat;
    }
     
    .panel21 {
      background: transparent url('../images/layout/benefits_bg21.jpg') no-repeat !important;
    }
     
    .panel22 {
      background: transparent url('../images/layout/benefits_bg22.jpg') no-repeat !important;
    }
     
    .panel23 {
      background: transparent url('../images/layout/benefits_bg23.jpg') no-repeat !important;
    }

  3. #3
    SitePoint Addict greg76's Avatar
    Join Date
    Aug 2004
    Location
    Poland
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zarin Denatrose View Post
    The first is to remove the rules from the ID selector into a class, and make that class active by default. The second is to use the css keyword !important to force the classes to override the id rules.
    I tried the first one prior, I figured that ID has higher rank there; but the second option worked like a charm!

    Thank you soo much for your time,
    much appreciated!



    Cheers,
    Greg


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
  •