Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dynamic div width - possible?

    Hello,
    I am trying to make this 'form'/drop downs' change the height and width of a div.
    I would like the DIV width equal to "one" and the DIV height equal to "two".

    I've tried all sorts of scripts from all over the internet, and I can't make any of them work.

    I stripped down the site to make it as simple as possible and rid any scripts that I don't see fit.

    Once the total is calculated, and the div is resized, I'd like to be able to submit the result "prod" + "one" + "two" into a formmail.


    Thanks in advance for anyone who reads this and can help.

    one more thing:
    this does not work in FF .. any ideas?


    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <SCRIPT LANGUAGE="JavaScript">
    
    function  doMath() {
    var one = eval(document.theForm.elements[0].value)
    var two = eval(document.theForm.elements[1].value)
    var prod = one  *  two
    /*alert("The product of "  +  one  +  " and "  +
    two  +  " is "  +  prod  +  ".")*/
    size.innerHTML=prod;
    }
    
    </script>
    <style type="text/css">
    <!--
    #dynamicDiv {
    	position:absolute;
    	left:187px;
    	top:95px;
    	width:30px;
    	height:30px;
    	z-index:1;
    	background-color: #99CCCC;
    	border:solid 0px #ffffff;
    	background-image:url(http://enstudios.com/images/grid.gif);
    }
    -->
    </style>
    </head>
    
    
    <body>
    
    <div id="dynamicDiv"></div>
    
    <FORM NAME="theForm">
    Select Width:
    <select name="os0" onchange="doMath()">
      <option value="10">10
      <option value="20">20
      <option value="30">30
      <option value="40">40
      <option value="50">50
      <option value="60">60
    </select>
     Select Height:
    <select name="os1" id="yh" onchange="doMath()">
      <option value="10">10
      <option value="20">20
      <option value="30">30
      <option value="40">40
      <option value="50">50
      <option value="60">60
     </select>
    <INPUT TYPE="button" VALUE="Add 'em" onClick="doMath()">
    </FORM>
    <p><span id="size" style="font-family:Tahoma; font-size:40px; color:#ff0000">.</span></p>
    </body>
    </html>
    Last edited by scuba_; 07-15-2008 at 06:30 PM. Reason: added more info

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did it :-)

    I'm so proud of me .. haha

    added this in my function:
    Code:
    var widthD = document.getElementById("dynamicDiv")
    var heightD = document.getElementById("dynamicDiv")
    widthD.style.width = one + 'px';
    heightD.style.height = two + 'px';

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well, congradualtions. Its the best feeling in the world.

  • #4
    New Coder
    Join Date
    Feb 2008
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    well, congradualtions. Its the best feeling in the world.
    most definitely is..

    I just realized that it still doesn't work in FFox ..

    Any ideas?

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    not all that great at DOM differences but try this

    Code:
    var widthD = document.getElementById("dynamicDiv").value;
    var heightD = document.getElementById("dynamicDiv").value;

  • #6
    New Coder
    Join Date
    Feb 2008
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't add this:
    var size = document.getElementById("size");


    IE: worked without it .. figures..

    bottom line:

    Here is a working final product:
    Code:
    <!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" />
    <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
    
    function  doMath() {
    var one = eval(document.theForm.elements[0].value);
    var two = eval(document.theForm.elements[1].value);
    var prod = one*two;
    /*
    alert("The product of "  +  one  +  " and "  +
    two  +  " is "  +  prod  +  ".")*/
    var size = document.getElementById("size");
    size.innerHTML=prod;
    
    var widthD = document.getElementById("dynamicDiv");
    var heightD = document.getElementById("dynamicDiv");
    /*
    var widthD = document.getElementById("dynamicDiv").value;
    var heightD = document.getElementById("dynamicDiv").value;
    */
    widthD.style.width = one + 'px';
    heightD.style.height = two + 'px';
    }
    
    </script>
    
    
    
    <style type="text/css">
    <!--
    #dynamicDiv {
    	position:absolute;
    	left:187px;
    	top:95px;
    	height:10px;
    	width:10px;
    	z-index:1;
    	background-color: #99CCCC;
    	background-image:url(images/grid.gif);
    	overflow: hidden;
    }
    -->
    </style>
    </head>
    
    <body>
    
    <div id="dynamicDiv">&nbsp;</div>
    
    <FORM NAME="theForm">
    Select Width:
    <select name="os0" onchange="doMath()">
      <option value="10">10
      <option value="20">20
      <option value="30">30
      <option value="40">40
      <option value="50">50
      <option value="60">60
      <option value="70">70
      <option value="80">80
      <option value="90">90
      <option value="100">100
      <option value="110">110
      <option value="120">120
      <option value="130">130
      <option value="140">140
      <option value="150">150</select>
     Select Height:
    <select name="os1" id="yh" onchange="doMath()">
      <option value="10">10
      <option value="20">20
      <option value="30">30
      <option value="40">40
      <option value="50">50
      <option value="60">60
      <option value="70">70
      <option value="80">80
      <option value="90">90
      <option value="100">100
      <option value="110">110
      <option value="120">120
      <option value="130">130
      <option value="140">140
      <option value="150">150</select>
    <INPUT TYPE="button" VALUE="Add 'em" onClick="doMath()">
    </FORM>
    <p><span id="size" style="font-family:Tahoma; font-size:40px; color:#ff0000">.</span></p>
    </body>
    </html>



    Quote Originally Posted by jcdevelopment View Post
    not all that great at DOM differences but try this

    Code:
    var widthD = document.getElementById("dynamicDiv").value;
    var heightD = document.getElementById("dynamicDiv").value;

  • #7
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Thanks! I needed that too!


  •  

    Posting Permissions

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