www.webdeveloper.com
Results 1 to 2 of 2

Thread: Increase or decrease text size

  1. #1
    Join Date
    Oct 2004
    Posts
    18

    Increase or decrease text size

    Hi
    I want to keep two buttons whose functionality will be to increase text size and decrease text size..How can this be done

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there mailtome,

    you may find this of interest
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>increase font-size</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         font-family:arial;
         font-size:8px;
         background:#009;
     }
    
    #enlarge {
        width:50%;
        padding:30px;
        text-align:justify;
        border:inset 6px #009;
        background:#ddddff;
        margin:auto;
    }
    
    #control {
         width:108px;
         border:solid 1px #009;
         background:#b2b2e0;
         padding:2px;
     }
    
    #control input {
         width:30px;
         margin:1px;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    var i=8;
    
    function increase() {
      i++;
    if(i>30) {
      i=30;
    return;
      }
          document.getElementById("enlarge").style.fontSize=i+"px";
          document.forms[0][1].value=i+"px";
    
     }
    
    function decrease() {
      i--;
    if(i<8) {
      i=8;
    return;
      }
         document.getElementById("enlarge").style.fontSize=i+"px";
         document.forms[0][1].value=i+"px";
    
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    
    <form action="">
      <div id="control">
       <input type="button" value="↑" onclick="increase()"/>
        <input id="pix" type="text"value="8px"/>
      <input type="button" value="↓" onclick="decrease()"/>
     </div>
    </form>
    
    <p id="enlarge">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit 
    venenatis purus. Integer massa libero, vehicula id, consequat sed, tincidunt 
    nec, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
    per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna non magna. 
    Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc. Curabitur ut sem. 
    Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt turpis. 
    Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis 
    a, accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a 
    pulvinar adipiscing, est orci adipiscing felis, sed laoreet urna magna quis neque. 
    Proin facilisis aliquet urna.
    </p>
    
    </body>
    </html>
    coothed
    Last edited by coothead; 12-15-2004 at 05:24 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles