Applying text-transform css property using JQuery -


my code looks below, type in textbox, change dropdowns uppercase etc, works great when select "small caps" drop down nothing happens, tried changing drop down property variant still not working, not sure issue is

<!doctype html> <html> <head>   <title> - test </title>  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>  <script type='text/javascript'> $(window).load(function(){           $('#ta1').keyup(function(){                 $('#float1').html("<p>"+$(this).val()+"</p>");             });              $("#size").change(function() {                 $('#float1').css("text-transform", $(this).val());             }); });   </script>   </head> <body>   <form id="myform">          <label>font style</label>       <select id="size" > <option value="0">[no engraving]</option> <option value="variant">small caps</option> <option value="uppercase">all caps</option> <option value=" lowercase">no caps</option> <option value="capitalize">normal</option> </select>     </p>    </form>    <p>       <label>top leg       <input type="text" name="top_leg" id="ta1" class="changeme" maxlength="10">(10 char, $1)       </label> </p> <p>      <label></label> </p> <!--start top leg div-->   <div id="container" class="changeme2" style=" left: 298px;     position: absolute;     top: 287px;     z-index: 999;">         <div id="float1">             <p>              </p>         </div>     </div> <!--stop top leg div-->    </html>   <div> </body> 

the valid attributes text-transform css rule are: none | [ [capitalize | uppercase | lowercase ] || full-width || full-size-kana ]

so small caps (and variant) not options select from. instead, font-variant rule (https://developer.mozilla.org/en/css/font-variant). font-variant's attributes are: normal | small-caps | inherit.

https://developer.mozilla.org/en/css/text-transform


Comments

Popular posts from this blog

jquery - Invalid Assignment Left-Hand Side -

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -