SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2001
    Location
    Lewes, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Display stylesheet attribute

    Hi all,

    I'm trying to add some debug functionality to a project I'm working on, in which debug messages can be printed as <div>s with a certain ID or class. The user can click on a link which triggers a function that changes the display property of the divs from "none" to "block"... Sounds fine so far, but there may be many divs on the same page with the same id, all of which need to be toggled when the user clicks on the link.

    This is what I have so far:

    PHP Code:
    <style>
    #debug_msg {
        
    displaynone;
        
    font-colorred;
    }
    </
    style>

    <
    script>

    //Shows/hides debug information
    function showHideDebug() {
        if (
    document.all.debug_msg.style.display == 'block') {
            
    document.all.debug_msg.style.display'none';
           } else {
               
    document.all.debug_msg.style.display 'block';
           }
    }
    </script> 
    Then each debug message appears like this:

    <div id="debug_msg">Test debug message</div>

    Now, this works perfectly when there's only one message, but when there are more than one, it just does nothing

    Does anyone have any ideas?

    Many thanks in advance
    Andy

  2. #2
    SitePoint Member
    Join Date
    Oct 2001
    Location
    Lewes, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, so I just found out that the ID needs to be unique throughout the page. That means that every debug message that my JSP spits out will need to exist in a different named div. Is that right?

    How would I show/hide all the different divs at once? Would I need to loop through them all? Can I use a common class in the stylesheet, and change its display attribute in a Javascript function, avoiding actually changing every div one-by-one?

    Any help or advice is much appreciated, guys

    Andy

  3. #3
    SitePoint Member
    Join Date
    Oct 2001
    Location
    Lewes, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, I sorted it now... Here's the code I settled on:

    PHP Code:
    <style>
    .
    debug_msg {
        
    displaynone;
        
    font-colorred;
        
    border-width1;
        
    border-styledashed;
    }
    </
    style>

    <
    script>

    function 
    getStyleClass (className) {
      if (
    document.all) {
        for (var 
    0document.styleSheets.lengths++)
          for (var 
    0document.styleSheets[s].rules.lengthr++)
            if (
    document.styleSheets[s].rules[r].selectorText == '.' className)
              return 
    document.styleSheets[s].rules[r];
      }
      else if (
    document.getElementById) {
        for (var 
    0document.styleSheets.lengths++)
          for (var 
    0document.styleSheets[s].cssRules.lengthr++)
            if (
    document.styleSheets[s].cssRules[r].selectorText == '.' className)
              return 
    document.styleSheets[s].cssRules[r];
      }
      return 
    null;
    }

    //Shows/hides debug information
    function showHideDebug() {
       var 
    currDisp getStyleClass('debug_msg').style.display;
        
        if (
    currDisp == 'none') {
            
    getStyleClass('debug_msg').style.display 'block';
        } else {
            
    getStyleClass('debug_msg').style.display 'none';
        }
    }
    </script> 
    All debug messages are then in divs with a class of "debug_msg"... So it's the class itself that changes and not the individual divs

    Hope it helps someone else out there

    Andy


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
  •