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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing div properties using Jquery

    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>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You haven't written any code that changes the position(?).
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the positioning right?

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

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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