Applying text-transform css property using JQuery

Question

My code looks like below, I type something in textbox, then change the dropdowns to UPPERCASE etc, all works great but when i select "Small Caps" from drop down nothing happens, i tried changing the drop down property to variant but its still not working, not sure what the 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>

j08691 · Accepted Answer · 2012-06-05 14:59:59Z

1

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

So small caps (and variant) are not options to select from. Instead, look into the 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

answered Jun 5, 2012 at 14:59

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j08691 Over a year ago

Anonymous downvoting coward care to comment?

Collectives™ on Stack Overflow

Applying text-transform css property using JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related