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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cycle Through Style Sheets

    We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are 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) {
            for (var i=0; i<document.styleSheets.length; i++) {
                   // browser-compatibility 
                   var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].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>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by chappy01 View Post
    The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser
    After changing the text in a few places to be certain, it worked for me.

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Logic Ali

    I still can't get it to work consistently when placed inside the site itself, sometimes it works and sometimes it doesn't (only inside the site with the 20 or so style sheets attached).

    Ran to another new issue with this where it doesn't seem to work at all in Chrome. Any thoughts?


  •  

    Posting Permissions

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