SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    PHP warrior dkode's Avatar
    Join Date
    Sep 2001
    Location
    Planet Namek
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change field b value depending on change to field a

    here is what I am trying to do:

    I have two text boxes...width and height

    what i want it to do is if i change the width, with javascript, find out what the difference is between the old value and new value and then take the difference and apply it to both width and height. it is going to be used with php so people can dynamically resize an image but I want to constrain the proportions. later on i will have a checkbox that will enable/disable the whole thing...heres what i have so far. i might be completely off base. havent used js much:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript">
    var width = 200;
    var height = 300;
    var diff = 0;
    
    function change_size() {
    	if (document.theForm.width > width) {
    		diff = document.theForm.width - width;
    		height = document.theForm.height - diff;
    		width = document.theForm.width - diff;
    	}
    	else {
    		diff = width - document.theForm.width;
    		height =  diff - document.theForm.height;
    		width = diff - document.theForm.width;	
    	}
    	// Now set the new width and height
    	document.theForm.height = height;
    	document.theForm.width = width;
    }
    </script>
    </head>
    
    <body>
    <form method="post" action="<?=$PHP_SELF?>" name="theForm">
    <p>width = 
      <input name="width" type="text" value="200" onChange="change_size(); ">
    </p>
    <p> height = 
      <input name="height" type="text" value="300">
    </p>
    </form>
    </body>
    </html>
    anyone know what i am talking about? thanks.
    "Mankind cannot define memory, yet it defines mankind"
    -- Project 2501, Ghost in the Shell

    Smarty | PEAR | PHP Manual | MySQL Manual

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about something more like this:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    var width  = 200;
    var height = 300;
    var wdiff  = height/width;
    var hdiff  = width/height;
    
    function change_size(el) {
    	f = el.form;
    	if('w' == el.name){
    		width  = el.value;
    		height = parseInt(width * wdiff);
    		f.h.value = height;
    	}else{
    		height = el.value;
    		width  = parseInt(height * hdiff);
    		f.w.value = width;
    	}
    }
    </script>
    </head>
    
    <body>
    <form method="post" action="<?=$PHP_SELF?>">
    <p>width  = <input name="w" type="text" value="200" onkeyup="change_size(this)"></p>
    <p>height = <input name="h" type="text" value="300" onkeyup="change_size(this)">
    </p>
    </form>
    </body>
    </html>
    ----Adopt-a-Sig----
    Your message here!


Bookmarks

Posting Permissions

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