SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict itsource's Avatar
    Join Date
    Jun 2001
    Location
    Thailand
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    increase size textarea with JavaScript and PHP

    I have textarea to provide user add article, if user seem font too small in textarea, user can click button to increase font size to 16 px or increase to 10 px, and user can preview article by click preview

    I'm modify my code to view simple like this
    PHP Code:
    <html>
    <head>
    <style>
    TEXTAREA {
    font-family:MS Sans Serif;font-size:10px; 
    }
    </style></head>
    <body>

    <form action="<? echo $PHP_SELF?>" method="post" name='b'>
    <form name='b'> 
    <table width=100%>
    <tr><td>
            <textarea name="a" cols=100 rows=20></textarea> <br><br>
    </td></tr>
    <tr><td>
            <input type="button" value='increase font' onClick='document.b.a.style.fontSize = 16'>
            <input type="button" value='decrease font' onClick='document.b.a.style.fontSize = 10'><br>

    <input type=submit value=preview>
    <input type=submit value=add>
    </td></tr>
    </table>
    </form> 

    </body></html>
    I have 2 problem with this code
    1. If i'm click increase font to 16 px, the size of text is exceed border of table. How should I do?
    2. If I'm increase size to 16px and click preview, when it load again, font it textarea remain 10px (instead 16 px) How shold I do?

    Thanks.
    I live in Thailand. My English grammar not well.

  2. #2
    SitePoint Addict Viral's Avatar
    Join Date
    Nov 2001
    Location
    Washington DC
    Posts
    294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Try this

    This version will change the font and textarea col size. The Increase and Decrease font buttons become your previews, no need for a separate button for that. You can obviously tweak the col sizes (100 and 50) so that they are the correct size for your table in each font size:

    PHP Code:
    <? 
    if (!$size) { $size='10'; } // sets default font size to 10 
    if ($size == 10) {          // sets textarea column width depending on font size
       
    $cols '100';
    }else{
       
    $cols '50';
    }
    ?>   
    <html>
    <head>
    <script language="JavaScript">
    function fontSize(n) {
       document.b.size.value = n;
       document.b.submit();
    }
    </script>
    <style>
    TEXTAREA {
    font-family:MS Sans Serif;font-size:<? echo $size?>px; 
    }
    </style></head>
    <body>

    <form action="<? echo $PHP_SELF?>" method="post" name='b'>
    <input type='hidden' name='size' value='<? echo $size?>'>
    <table width=100%>
    <tr><td>
            <textarea  name="a" cols=<? echo $cols?> rows=20><? if ($a) { echo $a; } ?></textarea> <br><br>
    </td></tr>
    <tr><td>
            <input type="button" value='increase font' onClick='fontSize(16)'>
            <input type="button" value='decrease font' onClick='fontSize(10)'><br>

    <input type=submit value=add>
    </td></tr>
    </table>
    </form> 

    </body></html>
    Hope this helps,
    --Viral


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •