How can I automatically Resize the font size using JavaScript?

288 Contributor

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Automaticaly resize the font ? How?</title>

<script type="text/javascript">

function font_size()

{

    var ranger = document.form_name.a.value;

     var p1 = document.getElementById("p1");

      var p3 = document.getElementById("p3");
 
                p1.innerHTML = ranger + " Ako ay pogi";

                 document.form_name.x.value=ranger;    

                document.getElementById("p2").style.fontsize= ranger+"px";

                document.getElementById("p3").style.fontSize="xx-large";

}

</script>

</head>

<body>

<p id="p1"> </p>

<br>

<p id="p2">dfdfdfdfdfdfdf</p>

<p id="p3" >dfgdfgdfgdfgdfgdfgdfg</p>

<br />
 
<form id="numform" name="form_name"  method="post">0

    <input type="range" name="a" max="30" id="rendz" onchange="font_size()"/>

    <input type="text" form="numform" name="x" for="a" style=" width:15px;">

<br>

    <button onchange="font_size()">Button for javascript output</button>

    <input type="submit" name="ok" value="Button for PHP output" />

</form>

<center>

<?php 

    if(isset($_POST['ok'])){

        $range=$_POST['a'];

            echo'the range output : '.$range;

?>

<br>

<font size=" <?php echo $range; ?>px;">Resize text output for PHP</font>

<?php

        }//end of isset

?>

<br><br>

</center>

</body>

</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

Subscribe Reply

2937

Exequiel

288

Contributor

I've got it already. . . here's my code. . . :)

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Automaticaly resize the font ? by zick</title>

<script type="text/javascript">

function font_size()

{

    var ranger = document.form_name.a.value;

      var p3 = document.getElementById("p3");

                 document.form_name.x.value=ranger;    

                document.getElementById("p3").style.fontSize=ranger+"px";

}

</script>

</head>

<body>

<br>

<br />

<center>

<form id="numform" name="form_name"  method="post">

    Resizer : <input type="range" name="a" max="30" id="rendz" onchange="font_size()"/>

    <input type="text" name="x" style=" width:15px;">

</form>

<br>

<br>

<p id="p3">I am Zick :) </p>

<br><br>

</center>

</body>

</html>

Jul 31 '12 #2

Similar topics

Fixed font size

by: wj | last post by:

Hi all, I making a web site where people can change the font size with a form on a seperate page. I store the value in session-variables and read them every time a page is loaded. I wonder if...

Latest Bytes

Setting applet window size using javascript?

by: Put 030516 in email subj to get thru | last post by:

I've always been bothered about having to statically declare the size of a Java applet window (container?) in the calling HTML. I've always wanted the moral equivalent of width=50% statement (of...

Latest Bytes

CSS class and tag font sizes using em.

by: Luke Duddridge | last post by:

Hello, I work for a local council and have recently been part of the project for a new website design which went live at the end of september at www.tauntondeane.gov.uk. I set the relative...

Latest Bytes

Best way to specify font size

by: JD | last post by:

Hi guys What's the best way to specify font size using CSS? I try to avoid absolute units like pt and px because then users can't resize the fonts in IE, but % and em are a complete pain to use...

Latest Bytes

Font size is messing up my form!

by: Jesper | last post by:

Hi, When working with high display resolution it's sometimes preferable to increase the general font size using control panel-> display properties-> settings -> advanced -> general -> Display ->...

Latest Bytes

how do I implement font size using ems so that they can resize in ie 6 on a pc

by: newspost2000 | last post by:

http://www.htmldog.com/articles/elasticdesign/demo/ I found this wonderful site the demonstrates how you cannnot resize text formated using styles in ie 6 if you specify font size using pt units...

Latest Bytes

file size using javascript

by: gsuns82 | last post by:

hi friends,can any one give the coding for finding file size using java script???

Latest Bytes

Font resizing using javascript

by: morgiemorganson | last post by:

Hi, I am sure this will be a 2 second answer but as I am a JS novice I need some help. I am using some buttons on my site to allow users to change the font sizes. It works fine when there is...

Latest Bytes

How to set default font size to small for a page's body?

by: Don Li | last post by:

I've tried <body style="font-family:Verdana,Arial,Helvetica;font-size:0.8em;"> or <body style="font-family:Verdana,Arial,Helvetica;font-size:11pct;"> or <body...

Latest Bytes

Check File Size using JavaScript

by: Frinavale | last post by:

Hi there! I'm hoping that someone knows how to check the size of a file before it is uploaded to the server using JavaScript. I have seen suggested solutions using an ActiveX control to check...

Latest Bytes

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

Latest Bytes

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Latest Bytes

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Latest Bytes

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

Latest Bytes

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Latest Bytes

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

Latest Bytes

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Latest Bytes

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Latest Bytes

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

Latest Bytes