By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,258 Members | 1,733 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,258 IT Pros & Developers. It's quick & easy.

How can I automatically Resize the font size using JavaScript?

Exequiel
100+
P: 288
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Automaticaly resize the font ? How?</title>
  6. <script type="text/javascript">
  7. function font_size()
  8. {
  9.     var ranger = document.form_name.a.value;
  10.      var p1 = document.getElementById("p1");
  11.       var p3 = document.getElementById("p3");
  12.  
  13.                 p1.innerHTML = ranger + " Ako ay pogi";
  14.                  document.form_name.x.value=ranger;    
  15.                 document.getElementById("p2").style.fontsize= ranger+"px";
  16.                 document.getElementById("p3").style.fontSize="xx-large";
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <p id="p1"> </p>
  22. <br>
  23. <p id="p2">dfdfdfdfdfdfdf</p>
  24. <p id="p3" >dfgdfgdfgdfgdfgdfgdfg</p>
  25. <br />
  26.  
  27. <form id="numform" name="form_name"  method="post">0
  28.     <input type="range" name="a" max="30" id="rendz" onchange="font_size()"/>
  29.     <input type="text" form="numform" name="x" for="a" style=" width:15px;">
  30. <br>
  31.     <button onchange="font_size()">Button for javascript output</button>
  32.     <input type="submit" name="ok" value="Button for PHP output" />
  33. </form>
  34. <center>
  35. <?php 
  36.     if(isset($_POST['ok'])){
  37.         $range=$_POST['a'];
  38.             echo'the range output : '.$range;
  39. ?>
  40. <br>
  41. <font size=" <?php echo $range; ?>px;">Resize text output for PHP</font>
  42. <?php
  43.         }//end of isset
  44. ?>
  45. <br><br>
  46. </center>
  47. </body>
  48. </html>
My code for automaticaly resize doesn'nt work, can you please help me to fix this problem? please . . . ? :) and thank you. . .
Jul 30 '12 #1
Share this Question
Share on Google+
1 Reply


Exequiel
100+
P: 288
I've got it already. . . here's my code. . . :)
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Automaticaly resize the font ? by zick</title>
  6. <script type="text/javascript">
  7. function font_size()
  8. {
  9.     var ranger = document.form_name.a.value;
  10.       var p3 = document.getElementById("p3");
  11.                  document.form_name.x.value=ranger;    
  12.                 document.getElementById("p3").style.fontSize=ranger+"px";
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <br>
  18. <br />
  19. <center>
  20. <form id="numform" name="form_name"  method="post">
  21.     Resizer : <input type="range" name="a" max="30" id="rendz" onchange="font_size()"/>
  22.     <input type="text" name="x" style=" width:15px;">
  23. </form>
  24. <br>
  25. <br>
  26. <p id="p3">I am Zick :) </p>
  27. <br><br>
  28. </center>
  29. </body>
  30. </html>
Jul 31 '12 #2

Post your reply

Sign in to post your reply or Sign up for a free account.