How to move an <input> element with jQuery?

Question

As the title says, I am looking for an efficient way to move a button when the mouse is moved over it (just for a little project I'm working on). I decided on using jQuery, but I am running into trouble with the code below. As it is syntactically correct (I believe), no errors are being thrown, but the button is not being moved as intended. Any help would be greatly appreciated, thanks.

<!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" />
    <script src = "jquery.js"></script>
    <title>Click The Button!</title>
</head>

<body>
    <input type="button" value="Try and Click Me!">
<script>
$("input").mouseenter(function(){
    $(this).style.position = "absolute";
    $(this).style.left = Math.floor(Math.random()*600)+"px";
    $(this).style.top = Math.floor(Math.random()*400)+"px";
});
</script>
</body>

</html>

Obligatory edit to thank all those who replied for their correct responses! Much appreciated.

Kevin Bowersox · Accepted Answer · 2014-01-05 10:41:09Z

3

When dealing with a jQuery Object such as $(this) use the css function to adjust CSS properties. Using element.style.left and etc is used when accessing the properties of a native DOM element, not an element selected with jQuery.

$("input").mouseenter(function(){
    $(this).css("position","absolute");
    $(this).css("left", Math.floor(Math.random()*600)+"px");
    $(this).css("top",Math.floor(Math.random()*400)+"px");
});

JS Fiddle: http://jsfiddle.net/5LWAk/

answered Jan 5, 2014 at 10:41

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

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

2 Comments

Jashwant Over a year ago

Just one thing to add here. css also accepts an object. So, you can save some function call. and also it would be more clean if you specify all properties at the same time.

1mmortal Over a year ago

Thanks a lot Kevin, and Jashwant for that little insight. Edit: Would 'upvote' if I had enough reputation points. :)

Dimitar Dimitrov · Accepted Answer · 2014-01-05 10:44:36Z

1

Give this a shot:

$("input").mouseenter(function () {
    $(this).css({
        "position":"absolute",
        "left": Math.floor(Math.random() * 600) + "px",
        "top": Math.floor(Math.random() * 400) + "px"
    });
});

Here is a fiddle

answered Jan 5, 2014 at 10:44

Dimitar Dimitrov

15.2k9 gold badges55 silver badges82 bronze badges

Comments

rrugbys · Accepted Answer · 2014-01-05 10:43:01Z

0

  $("input").mouseenter(function(){
            $(this).css({left:Math.floor(Math.random()*600)
            ,top:Math.floor(Math.random()*600)
            ,position:"absolute"});

  });

Check on Fiddle

answered Jan 5, 2014 at 10:43

rrugbys

2821 silver badge10 bronze badges

Comments

tcox5698 · Accepted Answer · 2014-01-05 10:56:36Z

0

Change your input to add an id:

<input id="mybutton" type="button" value="Try and Click Me!">

Then you can access the button

<script>
$("#mybutton").mouseenter(function(){
$(this).css({
    position: "absolute", 
    left: Math.floor(Math.random()*600)+"px", 
    top: Math.floor(Math.random()*400)+"px"
});
});
</script>

answered Jan 5, 2014 at 10:56

tcox5698

1112 bronze badges

Collectives™ on Stack Overflow

How to move an <input> element with jQuery?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related