www.webdeveloper.com
Results 1 to 6 of 6

Thread: Altering CSS Rules with Javascript

  1. #1
    Join Date
    Dec 2005
    Posts
    2,984

    Altering CSS Rules with Javascript

    This is a quick compatibility issue that anybody who knows the ins and outs of Javascript and CSS will know immediately.

    What I'm trying to modify below, isn't being modified in FF, but it is in IE...is there a quick fix to this?

    Code:
        //GET THE STYLESHEET
        var mysheet=document.styleSheets["mainSheet"];
        var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;
    
        //THE TOGGLE FUNCTION
        function toggle (whichDiv,show) {
         var rule = "#" + whichDiv; //THE NAME OF THE DIV TO SHOW
         for (i=0; i<myrules.length; i++) { 
    
          if (myrules[i].selectorText.toLowerCase()=="#infohovers") {
           var infoHovers = myrules[i];
           infoHovers.style.display = show;
          }
    
          if (myrules[i].selectorText.toLowerCase()==rule){ 
           var targetrule = myrules[i]; 
    
            if (show == "block") {
             targetrule.style.zIndex = 1000;
            }
    
            else {
             targetrule.style.zIndex = 0;
            }     
    
           break; 
          } 
         }
        }
    
        function showDiv(whichDiv) {
    	toggle(whichDiv,"block");
        }	
        
        function hideDiv(whichDiv) {
    	toggle(whichDiv,"none");
        }
       //-->

  2. #2
    Join Date
    Dec 2004
    Posts
    8,637
    I would install the Venkman Script Debugger for Firefox, step through your code a line at a time, and find where the problem lies.

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    infoHovers.style.display = show; should be infoHovers.style.display = "block";

    show is not a valid value for the display property, on top of the fact that show by itself should be read by the JavaScript interpreter as a literal, and not a string.

  4. #4
    Join Date
    Dec 2004
    Posts
    8,637
    Quote Originally Posted by toicontien
    show is not a valid value for the display property
    This is a passed argument name. Check the function prototype statement.

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    missed that small piece of information My bad. Looking in the Firefox DOM Inspector for this page actually, I notice that the document.styleSheets object is actually an array of integer indexed style sheets. Try throwing myrules into an alert box and see what it shows.

    Firefox might not be able to reference a style sheet by using a name (or the title as I imagine you are using). You might have to loop though the styleSheets array trying to match the .title property to "mainSheet".

  6. #6
    Join Date
    Feb 2006
    Posts
    2,926
    I think the problem is a simple one, since it works in IE.

    Firefox won't use an integer value to set an attribute- put your zIndexes in quotes.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles