Changing div properties using Jquery

krantenwijk2 · 01-13-2013, 02:44 PM

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>&nbsp;</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>

AndrewGSW · 01-13-2013, 07:02 PM

You haven't written any code that changes the position(?).

krantenwijk2 · 01-13-2013, 09:29 PM

This is the positioning right?

Code:

		 if(property == 'top') {
            $('#testDiv').css("top",(value));
        }
		else if(property == 'left') {
            $('#testDiv').css("left",(value));
        }

AndrewGSW · 01-14-2013, 12:57 AM

Sorry, I thought you meant the position property (absolute, etc.).

The value from an input is always text (a string) initially, so you need to convert it to a number; multiplying by 1 is one way to do this:

Code:

		 if(property == 'top') {
            $('#testDiv').css("top",(value * 1));
        }
		else if(property == 'left') {
            $('#testDiv').css("left",(value * 1));
        }

You might want to add pixels as well, to ensure it will work in all browsers, although, these days, it probably will anyway:

Code:

		 if(property == 'top') {
            $('#testDiv').css("top",(value * 1) + 'px');
        }
		else if(property == 'left') {
            $('#testDiv').css("left",(value * 1) + 'px');
        }

The height() and width() jQuery methods will automatically convert to a number, which is why these were working.