Home/ Questions/Q 8144553
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T13:25:14+00:00

I am adding font styles like (small caps,all caps,no caps and normal)to the curved

  • 0

I am adding font styles like (small caps,all caps,no caps and normal)to the curved shape text but among this styles only small caps,all caps and no caps is working but for normal its not working.Why?

Normal text should be look like ‘Normal’ means first letter should be caps and remaining should be small.Please give me answer for this as soon as possible.
Is there anyone to answer my question.

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form>
Top Center:<input type="text" name="Location 3" id="ta3" class="changeMe2" maxlength="15"><br /><br />

Bottom Center:<input type="text" name="Location 4" id="ta4" class="changeMe2" maxlength="25">

      <font color="#000000">Font Style :</font>
        <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>
</form>

 <div id="container3" class="changeMe2" style="left:112px; font-size:18px; text-align:center;letter-spacing:-1px;
    position: absolute;
    top:117px;
    z-index: 999;">

        <div id="float3">

               <p>              
                </p>   
        </div>
    </div>


 <div id="container4" class="changeMe2" style="left:109px; font-size:18px; text-align:center;letter-spacing:-1px;
    position: absolute;
    top: 217px;
    z-index: 999;">
        <div id="float4">
            <p>           
             </p>
        </div>
    </div>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="arctext.js"></script>
<script type="text/javascript">
$(window).load(function(){
    function curveTop(){
        var text = '<p>' + $('#ta3').val() + '</p>',
               size = $('#size').val();

        $('#float3')
            .css({
               fontStyle: size
            })
            .html(text)
            .find('p')
            .arctext({radius:80});

        }

    $('#ta3').keyup( curveTop );
    $("#size").change( curveTop );

    function curveBottom(){
        var text = '<p>' + $('#ta4').val() + '</p>',
            size  = $('#size').val();


        $('#float4')
            .css({
               fontStyle: size
            })
            .html(text)
            .find('p')
            .arctext({radius: 80, dir: +2});

        }

    $('#ta4').keyup( curveBottom );
    $("#size").change( curveBottom );
});


$('#ta3').keyup(function(){
                $('#float3').html("<p align = 'center'>"+$(this).val()+"</p>");
            });

             $("#size").change(function() {
                 if($("#size option:selected").val()=="variant") {
                  $('#float3').css("font-variant", "small-caps");
                  }

                  else{
                  $('#float3').css("font-variant", "normal");
                  $('#float3').css("text-transform", $(this).val());

                  }
            });


             $('#ta4').keyup(function(){
                $('#float4').html("<p align = 'center'>"+$(this).val()+"</p>");
            });
                        $("#size").change(function() {
                 if($("#size option:selected").val()=="variant") {
                  $('#float4').css("font-variant", "small-caps");
                  }

                  else{
                  $('#float4').css("font-variant", "normal");
                  $('#float4').css("text-transform", $(this).val());

                  }
            });

</script>
</head>



</body>

</html>

See this code and please do the needful.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I put your example on jsFiddle:
    http://jsfiddle.net/h5c6Y/2/

    The text is capitalized just as you expect in Firefox and Chrome. It doesn’t work in IE 8 unless you update the text after applying the text transform. So I modified your code to update the text after applying a transform.

    $("#size").change(function() {
    if($("#size option:selected").val()=="variant") {
        $('#float3,#float4').css("font-variant", "small-caps");
    } else {
        $('#float3,#float4').css("font-variant", "normal");
        $('#float3,#float4').css("text-transform", $(this).val());
    }
    // Added the next two lines to force IE to refresh the text
    $('#float3').html("<p align = 'center'>"+$(this).val()+"</p>");
    $('#float4').html("<p align = 'center'>"+$(this).val()+"</p>");
});
    • 0