...
PDA

Dynamic div width - possible?

scuba_
07-15-2008, 05:06 PM
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?


<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>
scuba_
07-15-2008, 05:44 PM
I did it :-)

I'm so proud of me .. haha

added this in my function:
var widthD = document.getElementById("dynamicDiv")
var heightD = document.getElementById("dynamicDiv")
widthD.style.width = one + 'px';
heightD.style.height = two + 'px';
jcdevelopment
07-15-2008, 05:46 PM
well, congradualtions. Its the best feeling in the world.
scuba_
07-15-2008, 05:48 PM
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?
jcdevelopment
07-15-2008, 05:54 PM
not all that great at DOM differences but try this


var widthD = document.getElementById("dynamicDiv").value;
var heightD = document.getElementById("dynamicDiv").value;
scuba_
07-15-2008, 06:17 PM
I didn't add this:
var size = document.getElementById("size");


IE: worked without it .. figures..

bottom line:

Here is a working final product:

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






not all that great at DOM differences but try this


var widthD = document.getElementById("dynamicDiv").value;
var heightD = document.getElementById("dynamicDiv").value;
macwiz
07-15-2008, 06:56 PM
Thanks! I needed that too!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum