Jquery Code to Move any Element Left, Right, Up or Down
icon-search
Jquery Code to Move any Element Left, Right, Up or Down

Jquery Code to Move any Element Left, Right, Up or Down

Jquery Code to Move any Element Left, Right, Up or Down

Programming languages are one of the thing that can help you to make your computer to do what you want there are many programming languages invented and in web design and web development one of the best programming language is JavaScript.

jQuery is a JavaScript library which has functionalities like JavaScript but it is very easy to understand then JavaScript and it is very lightweight JavaScript library.

In today's post we will see or we will use jQuery code to move any element up, down, left or right we can do that simply by using a single jQuery snippet.

I was trying to create an app and I used this script in that web application and I decided to share it with you because I think that you people may also need that.

For demo purpose I have used some HTML markup for you:


<div style="padding:20px;"> <button id="moveleft">Move Left</button>  <button id="moveright">Move right</button> <button id="movedown">Move Down</button> <button id="moveup">Move Up</button></div>
<div id="textbox" style="position:absolute;padding:10px;background:#FFFFCC;width:300px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt purus. Donec eleifend libero in orci mattis pulvinar. Ut et felis eu leo malesuada eleifend. Ut sit amet odio eu ipsum rutrum consequat. Aliquam congue ultricies sagittis.</div>


The main thing is this jQuery code which will work for us to make how to move any Div over an element in any direction.

$(document).ready(function(){$("#moveleft").click(function(){$("#textbox").animate({marginLeft:"-=30px"})}),$("#moveright").click(function(){$("#textbox").animate({marginLeft:"+=30px"})}),$("#movedown").click(function(){$("#textbox").animate({marginTop:"+=30px"})}),$("#moveup").click(function(){$("#textbox").animate({marginTop:"-=30px"})})});

Conclusion:

As I have told you that we have used jQuery code for this show your code will never work until you add jQuery library in your project.

That's pretty much in today's tutorial.
Disqus Codes

No comments

Notifications

Disqus Logo