CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Cycle Through Style Sheets

  1. 12-15-2011, 11:39 PM #1
    chappy01
    chappy01 is offline New Comer (less than 5 posts)
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Cycle Through Style Sheets

    We've been attempting to add a drop-down menu with hidden tables driven by javascript functionality to change the CSS from display:none to display: show, however the site that it's being added to has numerous (about 20) style sheets attached to it. When I use the code below it works fine inside of Dreamweaver but not in the site itself, which leads me to believe I've missed something very important in asking the script to loop through the sheets to find the correct values. Any help is greatly appreciated.

    Code:
    <style type="text/css">
		.al {display:none}
		.ca {display:none}
		.ct {display:none}
		.ga {display:none}
		.il {display:none}
		.la {display:none}
		.ma {display:none}
		.mi {display:none}
		.mn {display:none}
		.mo {display:none}
		.ms {display:none}
		.nc {display:none}
		.ne {display:none}
		.nh {display:none}
		.nv {display:none}
		.ny {display:none}
		.or {display:none}
		.sc {display:none}
		.tn {display:none}
		.tx {display:none}
		.va {display:none}
		.vt {display:none}
		.wa {display:none}
		.wi {display:none}
    </style>
    <script type="text/javascript">
        function showHide(cls, show) {

            // browser-compatibility 
            var rule = document.styleSheets[0].rules ? document.styleSheets[0].rules : document.styleSheets[0].cssRules;

            for (var j = 0; j < rule.length; j++) {
                if (rule[j].selectorText == "." + cls) { //find css selector
                    rule[j].style.display = (show) ? 'block' : 'none';
                }
            }
        }

        function selAction(sel) {
            for (var i = 0; i < sel.options.length; i++) {
                showHide(sel.options[i].value, i == sel.selectedIndex);
            }
        }
    </script>
</head>

<body>
    <table>
      <tr>
        <td colspan="3">
          <select name="type" onchange="selAction(this);">
            <strong><option value="et">
              Please Select Your State:
            </option>
            <option value="al">Alabama</option>
            <option value="ca">California</option>
            <option value="ct">Connecticut</option>
            <option value="ga">Georgia</option>
            <option value="il">Illinois</option>
            <option value="la">Louisiana</option>
            <option value="ma">Massachusetts</option>
            <option value="mi">Michigan</option>
            <option value="mn">Minnesota</option>
            <option value="mo">Missouri</option>
            <option value="ms">Mississippi</option>
            <option value="nc">North Carolina</option>
            <option value="ne">Nebraska</option>
            <option value="nh">New Hampshire</option>
            <option value="nv">Nevada</option>
            <option value="ny">New York</option>
            <option value="or">Oregon</option>
            <option value="sc">South Carolina</option>
            <option value="tn">Tennessee</option>
            <option value="tx">Texas</option>
            <option value="va">Virginia</option>
            <option value="vt">Vermont</option>
            <option value="wa">Washington</option>
            <option value="wi">Wisconsin</option></strong> </select>
        </td>
      </tr>
      <tr class="al">
        <td>
        No issues in your state at this time.</td>
      </tr>
      <tr class="ca">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ct">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ga">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="il">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="la">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ma">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mi">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mn">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mo">
        <td> No issues in your state at this time. </td>
      </tr>
      <tr class="ms">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nc">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ne">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nh">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nv">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ny">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="or">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="sc">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="tn">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="tx">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="va">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="vt">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="wa">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="wi">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      </table>
</center></td>
  </tr>
</table>
</body>
</html>
    Reply With Quote Reply With Quote
  2. 12-16-2011, 06:02 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The code doesn't:

    loop through the sheets
    It just makes one pass through document.styleSheets[0]. If once the code is put on the live page, that stylesheet is no longer the first on the page, that would explain it.

    Since you don't want to have to count stylesheets, and id is an invalid attribute for stylesheets, you could use title, or ensure that this is the last stylesheet before the script and find it that way.

    Using title:

    Code:
    <style type="text/css" title="menusheet">
		.al {display:none}
		.ca {display:none}
		.ct {display:none}
		.ga {display:none}
		.il {display:none}
		.la {display:none}
		.ma {display:none}
		.mi {display:none}
		.mn {display:none}
		.mo {display:none}
		.ms {display:none}
		.nc {display:none}
		.ne {display:none}
		.nh {display:none}
		.nv {display:none}
		.ny {display:none}
		.or {display:none}
		.sc {display:none}
		.tn {display:none}
		.tx {display:none}
		.va {display:none}
		.vt {display:none}
		.wa {display:none}
		.wi {display:none}
    </style>
    And then the script, which can go anywhere:

    Code:
        <script type="text/javascript">
        function showHide(cls, show) {
		// find the sheet:
	        for (var i = document.styleSheets.length - 1; i > -1; --i){
	        	if(document.styleSheets[i].title === 'menusheet'){
	        		showHide.sheet = document.styleSheets[i];
	        		break;
	        	}
	        }

            // browser-compatibility 
            var rule = showHide.sheet.rules ? showHide.sheet.rules : showHide.sheet.cssRules;

            for (var j = 0; j < rule.length; j++) {
                if (rule[j].selectorText == "." + cls) { //find css selector
                    rule[j].style.display = (show) ? 'block' : 'none';
                }
            }
        }

        function selAction(sel) {
            for (var i = 0; i < sel.options.length; i++) {
                showHide(sel.options[i].value, i == sel.selectedIndex);
            }
        }
    </script>


    In this second method (determine the last sheet before the script), the stylesheet must be right before the script (additions/changes highlighted):

    Code:
        <script type="text/javascript">
        function showHide(cls, show) {

            // browser-compatibility 
            var rule = showHide.sheet.rules ? showHide.sheet.rules : showHide.sheet.cssRules;

            for (var j = 0; j < rule.length; j++) {
                if (rule[j].selectorText == "." + cls) { //find css selector
                    rule[j].style.display = (show) ? 'block' : 'none';
                }
            }
        }

        function selAction(sel) {
            for (var i = 0; i < sel.options.length; i++) {
                showHide(sel.options[i].value, i == sel.selectedIndex);
            }
        }
        showHide.sheet = document.styleSheets[document.styleSheets.length - 1];
    </script>
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    There could be other problems.

    If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules