59 users online (0 members and 59 guests)  


  Results 1 to 3 of 3

Related

  1. Need html text script help    Forum: HTML Forum
    Replies: 2
  2. Replies: 1
  3. Replies: 1
  4. Window resizing, again    Forum: Javascript Forum
    Replies: 3
  1. #1
    JCD37's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2007
    Posts
    2

    HTML <DIV></DIV> Resizing Script

    I dunno wether this is suited for this category or not, but here it goes.

    I got this <DIV> tag:
    Code:
     <DIV style="position:absolute;width:188px;height:16px;z-index:4" align="left">
    <FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Concurs 1</FONT></DIV>
    Now, I also have this script:

    Code:
    <SCRIPT language="JavaScript" type="text/javascript"><!--
    var X = 500;
    var Y = 500;
    function Smaller() {
    X = 200;
    Y = 200;
    }
    function Normal() {
    X = 500;
    Y = 500;
    }
    //--></SCRIPT>
    Now, what I want to do, is to make the width from the DIV to be X and the height from the DIV to be Y, so I can assign certain buttons in the site with the Normal()/Smaller() functions.
    I want it in the end to be smthing like this (of course, this is wrong:
    Code:
     <DIV style="position:absolute;width:Xpx;height:Ypx;z-index:4" align="left">
    <FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Concurs 1</FONT></DIV>
    How can I do that?
    Also, I wanna do smthing like this for changing the text's size, so tell me how to do that one too.

    Thank you in advance

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: HTML <DIV></DIV> Resizing Script

    Hi there JCD37,

    and a warm welcome to these forums..

    Have a look at this basic example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #mydiv {
        padding:10px;
        border:1px solid #999;
        font-family:arial,sans-serif;
        font-size:10px;
        color:#000;
        margin-top:10px;
        overflow:auto;
     }
    .start {
        width:188px;
     } 
    .norm {
        width:500px;
        height:500px;    
     }
    .sm {
        width:200px;
        height:200px;
     }
    #fnt {
        width:100px;
        text-align:center;
     }
    </style>
    
    <script type="text/javascript">
       var obj;
       var obj1;
       var obj2;
       var flag=true;
       var c=10;
    
    window.onload=function(){
       obj=document.getElementById('mybutton');
       obj1=document.getElementById('mydiv');
       obj2=document.getElementById('fnt');
    obj.onclick=function() {
       resize();
      }
    document.getElementById('mybutton1').onclick=function() {
       increase();
      }
    document.getElementById('mybutton2').onclick=function() {
       decrease();
      }
     }
    function resize() {
    if(flag==false) {
       obj1.className='sm';
       obj.firstChild.nodeValue='normal size';
       flag=true;
     }
    else {
       obj1.className='norm';
       obj.firstChild.nodeValue='small size';
       flag=false;
      }
     }
    function increase(){
    if(c<64) {
       c+=2;
       obj1.style.fontSize=c+'px';
       obj2.value='font-size='+c+'px';
      }
     }
    function decrease(){
    if(c>=12) {
       c-=2;
       obj1.style.fontSize=c+'px';
       obj2.value='font-size='+c+'px';
      }
     }
    </script>
    
    </head>
    <body>
    
    <div>
    <button id="mybutton">normal size</button>
    <button id="mybutton1">increase font size</button>
    <input id="fnt" type="text" value="font-size=10px">
    <button id="mybutton2">decrease font size</button>
    </div>
    
    <div id="mydiv" class="start">Concurs 1</div>
    
    </body>
    </html>

  3. #3
    JCD37's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2007
    Posts
    2

    Re: HTML <DIV></DIV> Resizing Script

    Quote Originally Posted by coothead View Post
    Hi there JCD37,

    and a warm welcome to these forums..

    Have a look at this basic example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #mydiv {
        padding:10px;
        border:1px solid #999;
        font-family:arial,sans-serif;
        font-size:10px;
        color:#000;
        margin-top:10px;
        overflow:auto;
     }
    .start {
        width:188px;
     } 
    .norm {
        width:500px;
        height:500px;    
     }
    .sm {
        width:200px;
        height:200px;
     }
    #fnt {
        width:100px;
        text-align:center;
     }
    </style>
    
    <script type="text/javascript">
       var obj;
       var obj1;
       var obj2;
       var flag=true;
       var c=10;
    
    window.onload=function(){
       obj=document.getElementById('mybutton');
       obj1=document.getElementById('mydiv');
       obj2=document.getElementById('fnt');
    obj.onclick=function() {
       resize();
      }
    document.getElementById('mybutton1').onclick=function() {
       increase();
      }
    document.getElementById('mybutton2').onclick=function() {
       decrease();
      }
     }
    function resize() {
    if(flag==false) {
       obj1.className='sm';
       obj.firstChild.nodeValue='normal size';
       flag=true;
     }
    else {
       obj1.className='norm';
       obj.firstChild.nodeValue='small size';
    
       flag=false;
      }
     }
    function increase(){
    if(c<64) {
       c+=2;
       obj1.style.fontSize=c+'px';
       obj2.value='font-size='+c+'px';
      }
     }
    function decrease(){
    if(c>=12) {
       c-=2;
       obj1.style.fontSize=c+'px';
       obj2.value='font-size='+c+'px';
      }
     }
    </script>
    
    </head>
    <body>
    
    <div>
    <button id="mybutton">normal size</button>
    <button id="mybutton1">increase font size</button>
    <input id="fnt" type="text" value="font-size=10px">
    <button id="mybutton2">decrease font size</button>
    </div>
    
    <div id="mydiv" class="start">Concurs 1</div>
    
    </body>
    </html>
    Thank you both for the script and the warm welcome, but I already found another way, using JavaScript

    Thank you anyways