0

I am using the following code to change font text of whatever typed in text box and it works great, what i want to do now is display the text as CURVE using Jquery something like below. I tried to use http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/ but i see that most of the text there is harcoded and i dont want that.So in short if someone typed text in the textbox it should be displayed as curved instead of one single line\

enter image description here

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - </title>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
            $('#ta').keyup(function(){
                $('#float').html("<p>"+$(this).val()+"</p>");
            });
            $("#fs").change(function() {
                $('#float').css("font-family", $(this).val());
            });
            $("#size").change(function() {
                $('#float').css("font-size", $(this).val() + "px");
            });

});//]]>  

</script>


</head>
<body>
  <form id="myform">
    <button>erase</button>
    <select id="fs"> 
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>

    <select id="size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>    <textarea id=ta class="changeMe">Text into textarea</textarea>
    <div id="container" class="changeMe">
        <div id="float">
            <p>
                Text into container
            </p>
        </div>
    </div>


</body>


</html>
VisioN
  • 143,310
  • 32
  • 282
  • 281
user580950
  • 3,558
  • 12
  • 49
  • 94
  • why `textarea` is out of the `form`? for curving the text using javascript, `canvas` is the best option. http://stackoverflow.com/questions/2840862/is-there-a-way-to-curve-arc-text-using-css3-canvas – Ram May 26 '12 at 14:13
  • that code works how to use canvas in my above example ? – user580950 May 26 '12 at 14:19
  • `this text is curved` is inside `
    ` > `

    `? what's the current problem?

     – Ram May 26 '12 at 14:27

2 Answers2

1

Include the plugin in your code and use this for your script

$(window).load(function(){
    function update(){
        var text = '<p>' + $('#ta').val() + '</p>',
            size = $('#size').val(),
            font = $('#fs').val();

        $('#float')
            .css({
                fontFamily: font,
                fontSize: size + 'px'
            })
            .html(text)
            .find('p')
            .arctext();

    }

    $('#ta').keyup( update );
    $("#fs, #size").change( update );
});

Demo at http://jsfiddle.net/gaby/AnyNQ/1/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
0

Check out CircleType.js. You can see how it was used on this site to create curved text inputs.

Full disclosure: CircleType.js is my project but I think it could be helpful in your situation.

peterhry
  • 1,120
  • 12
  • 16