Home/ Questions/Q 6624365
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:38:37+00:00

Basically when i type something in the textarea, i can change the font either

  • 0

Basically when i type something in the textarea, i can change the font either by inputting a size in a input box with id font_size or clicking the 64px button, once the font changes and i click done, i appended the value of what’s in the textarea to the image in the div with an id image_conv but the problem here is that it doesn’t take the formatted value of the text in the textarea to the div, i want the output in the div to be the formatted text value. Does anyone know how i can solve this?
Many thanks in advance.
ps: i uploaded the backgroung image of the text area on image shack so everyone could use it, i don’t know if it works though cos i haven’t tried it 🙂

 <html>  
<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
     function sixty_four() {
        var text_input = $('#textarea');
        text_input.css("font-size", "64px");
       }
     function append_font() {
       var text_input = $('#textarea');
       var font = $('#font_size').val();
        text_input.css("font-size", font + "px");
       }
      function text_manual() { 
      var text_value = $('#textarea').val();
      $('#image_conv').append(text_value);
      $('#image_conv').fadeIn('slow');
      }
    </script>

    <style type="text/css">
    #textarea {
    height:300px;
    width:300px;
    resize: none;
    }

    #image_conv {
        background: url(http://imageshack.us/photo/my-images/97/sliverc.png/) no-repeat left top;
        border: 3px solid #000;
        height:300px;
        width:300px;
    }


    </style>
    </head>

    <body>

    <textarea id="textarea"> </textarea><br/><br/>
    Font size:<input type="text" id="font_size"/><input type="button" id="font_size" value="Append Font" onClick="append_font()"/> 
    <input type="button" id="64px" value="64px" onClick="sixty_four()" /><br/><br/>
    <input type="button" id="manual_text" value="Done" onClick="text_manual()"/> 
    <div id="image_conv" >
    </div>
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is how you should do it:

    $('#sixty_four').click(function(){
    $('#textarea').css('font-size', '64px');
});
$('#font_size_btn').click(function() {
    $('#textarea').css('font-size', $('#font_size').val() + 'px');
});
$('#manual_text').click(function(){ 
    var $textarea = $('#textarea');
    $('#image_conv')
        .html($textarea.val())
        .css('font-size', $textarea.css('font-size'))
        .fadeIn('slow');
});

    Demo

    • 0