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 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    insertRule from select

    Hi,
    My script adds rules to Css but I don't know how to make it use the value of the select box which triggers the event?

    Any help appreciated


    Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function addCSSRule (selectorText, declarations) {
       var styleSheet;
       if (document.styleSheets) {
         if (document.styleSheets.length === 0) {
           var styleElement;
           if (document.createElement && (styleElement = 
    document.createElement('style'))) {
             styleElement.type = 'text/css';
             document.getElementsByTagName('head')[0].appendChild(styleElement);
             styleSheet = styleElement.sheet;
           }
         }
         if (document.styleSheets.length > 0) {
           styleSheet = document.styleSheets[document.styleSheets.length - 1];
           if (styleSheet.insertRule) {
             styleSheet.insertRule(
               selectorText + ' { ' + declarations + ' }',
               styleSheet.cssRules.length
             );
           }
           else if (styleSheet.addRule) {
             styleSheet.addRule(selectorText, declarations);
           }
         }
       }
    }
    </script>
    </head>
    <body>
    
    <form>
    font Size<select name="size" onclick="addCSSRule('div', 'font-size: (this:value);');">
    	<option value="12px" SELECTED>12px</option>
    	<option value="15px">15px</option>
    	<option value="20px">20px</option>
    	<option value="25px">25px</option>
    </select></form>
    
    <div>this div</div>
    </body>
    </html>

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <select name="size" onclick="addCSSRule('div', 'font-size:'+this.value)">

    .....Willy

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts

    cross-browser

    <select name="size" onchange="addCSSRule('div', 'font-size:'+this.options[this.selectedIndex].value)">

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops;

    I didn't realize this.value was not cross-browser.

    .....Willy

  • #5
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys that did the trick

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Willy Duitt
    I didn't realize this.value was not cross-browser.
    It is, however, not quite so in the case of <select> elements. Older browsers (e.g., Netscape 4.x) will not obtain the value correctly unless you use the notation Glenn has demonstrated. Glenn also pointed out that the event you want to be listening for is the onchange event, as opposed to onclick.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    @Willy Duitt
    Lol, I figured out that myself when attempting to use it on that javascript you were helping me with. If you read this, go find my post again, I need more help

  • #8
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And thanks again
    I was wondering why my text box using onblur wasn't working guess I should have noticed the this.selectedIndex

  • #9
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another IE handicap
    With firefox I can add multiple Css selectors
    onchange="addCSSRule('body, td', 'font-size:'+this.options[this.selectedIndex].value)"

    but if you use more than 1 with IE it won't execute the script

    Now I have a sig
    The problem is IE


  •  

    Posting Permissions

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