jQuery move div after text-input change

Question

I'm trying to move an image holder div to specific x and y coordinates after input from two separate text field inputs have been changed. Below is the code for just the x coordinate.

Here is a jfiddle here

var img1x;
var img1y;
var img1position;

img1position = $( "#img1" ).position();
img1x = img1position.left;
img1y = img1position.top;

I've tried this and it only moves the div if the imput value is "0". it won't move for anything else:

$("#img1x").change(function() {
  //alert("img1x: " +img1x);
    $( "#img1" ).css('left', $( "#img1x" ).val());
});

and I've tried this and it does nothing.

$("#img1x").change(function() {
  img1x = $( "#img1x" ).val();
  //alert("img1x: " +img1x);
    $( "#img1" ).css('left', img1x);
});

Andrew is right, you might try use api.jquery.com/animate for a fluid transition then you wouldn't need the px in the end — kidwon
– kidwon, Commented Jan 11, 2013 at 22:42

Flash · Accepted Answer · 2013-01-11 22:40:19Z

3

Try adding 'px':

$("#img1x").change(function() {
  img1x = $( "#img1x" ).val();
  alert("img1x: " +img1x);
    $( "#img1" ).css('left', img1x + "px");
});

Works for me: http://jsfiddle.net/VNqqx/

The reason 0 works is because left: 0 is valid CSS.

answered Jan 11, 2013 at 22:40

Flash

16.9k15 gold badges74 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Livi17 Over a year ago

Right, of course, I was forgetting "px"! Thanks! The cold medication is playing tricks on me.

Justin Bicknell · Accepted Answer · 2013-01-11 22:41:31Z

1

Try adding 'px', or * 1 to get an int:

$( "#img1" ).css('left', img1x + 'px');

see http://jsfiddle.net/dhpkW/1/

answered Jan 11, 2013 at 22:41

Justin Bicknell

4,81620 silver badges27 bronze badges

Comments

joeltine · Accepted Answer · 2013-01-11 22:42:03Z

1

Add a "px" to your left value:

$( "#img1" ).css('left', img1x+'px');

answered Jan 11, 2013 at 22:42

joeltine

1,63018 silver badges24 bronze badges

Comments

kidwon · Accepted Answer · 2013-01-11 22:45:37Z

1

You could try this for fluid transition

$("#img1x").change(function () {
    img1x = $("#img1x").val();
    alert("img1x: " + img1x);
    $("#img1").animate({
        'left': img1x
    }, 700);
});

You don't need the px then.

Check it out http://jsfiddle.net/dhpkW/6/

answered Jan 11, 2013 at 22:45

kidwon

4,5425 gold badges31 silver badges46 bronze badges

Collectives™ on Stack Overflow

jQuery move div after text-input change

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related