changing div height and width

alikhan · **Posted:** Thu May 31, 2007 1:51 pm

hi, im reletively new to html and javascript and web stuff in general, and i was wondering if someone could teach me how to change a div's height and width based on what the user inputs?
PS it doesnt have to be pretty at all in the transition

Lansen · **Posted:** Mon Sep 17, 2007 3:41 pm

code:

<html>
<head>
<script type="text/javascript">
function changeHeight()
{
document.getElementById("specific-div").style.height= document.getElementById("height").value;
}
function changeWidth()
{
document.getElementById("specific-div").style.width= document.getElementById("width").value;
}
</script>
<style type="text/css">
#specific-div {width:250px; height:100px; border: 1px solid #000; padding: 5px;}
</style>
</head>

<body>
<input type="text" id="height" onChange="changeHeight()">
<input type="text" id="width" onChange="changeWidth()">
<input type="button" onclick="changeLink()" value="Change size">
<div id="specific-div">
Content
</div>
</body>

</html>

Hopefully that briefly outlines things for you.

Play around with it and ask away if you have a question, I'd be glad to elaborate.

Edit: Sorry, didn't realize how incredibly dead this was.

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members