Hello,
I am making something to change the properties of a div (height,width,color etc)
And everything works except the positioning, does anybody know what I'm doing wrong?
Thanks!
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" />
<title>Div aanpassen</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.property').keyup(function() {
var value = $(this).val();
var property = this.id;
if(property == 'width') {
$('#testDiv').width(value);
}
else if(property == 'height') {
$('#testDiv').height(value);
}
if(property == 'text') {
$('#testDiv').text(value);
}
else if(property =='color'){
$('#testDiv').css("background-color",(value));
}
if(property == 'top') {
$('#testDiv').css("top",(value));
}
else if(property == 'left') {
$('#testDiv').css("left",(value));
}
});
});
</script>
</head>
<body>
<form id="form2" name="form2" method="post" action="">
<table width="200" border="1">
<tr>
<td>Left:</td>
<td>
<label for="textfield"></label>
<input type="text" name="left" class="property" id="left" />
</td>
</tr>
<tr>
<td>Top:</td>
<td>
<label for="textfield2"></label>
<input type="text" name="top" class="property" id="top" />
</td>
</tr>
<tr>
<td>Width:</td>
<td><label for="textfield3"></label>
<input type="text" name="width" class="property" id="width" /></td>
</tr>
<tr>
<td>Height:</td>
<td><label for="textfield4"></label>
<input type="text" name="height" class="property" id="height" /></td>
</tr>
<tr>
<td>Color:</td>
<td><label for="textfield5"></label>
<input type="text" name="color" class="property" id="color" /></td>
</tr>
<tr>
<td>Text:</td>
<td><label for="textfield6"></label>
<input type="text" name="text" class="property" id="text" /></td>
</tr>
<tr>
<td> </td>
<td><label for="textfield6">
<input type="submit" name="button" id="button" value="KLIK" />
</label></td>
</tr>
</table>
</form>
<div id="testDiv" style="
width:100px;
height: 100px;
left:50px;
top:220px;
position:absolute;
background-color: #ff0000">
</div>
</body>
</html>