Friday, March 15, 2013
Move a HTML Div with CSS and Javascript, No JQuery!
On the web, when anyone searches about "how to move div or any other element" their are thousands of results, but only few of results are teaching it with Pure Javascript. In this tutorials i'll also teach you the same but i'll also add little bit of twist in it. Check the demo, i'm sure you will like it.
I know i'm bad in selecting color schemes, now you guys also know that after seeing the above image..!
1. <div id="tcp">
2. <input type="text" maxlength="3" id="mtop" placeholder="Add pixel to move top" />
3. <input type="text" maxlength="3" id="mleft" placeholder="Add pixel to move left" />
4. </div>
2. <input type="text" maxlength="3" id="mtop" placeholder="Add pixel to move top" />
3. <input type="text" maxlength="3" id="mleft" placeholder="Add pixel to move left" />
4. </div>
After creating div we will style it...Create a external or internal or inline stylesheet, depends on you.
In stylesheet the position should be absolute.
1. #tcp {
2. position:absolute;
3. background-color:#ebebeb;
4. }
2. position:absolute;
3. background-color:#ebebeb;
4. }
I'm not adding too much style over here, but in the demo i have added many styles.
Now, let's add the main ingredient; which is javascript.
1. function moveit(dmove, gtop, gleft, numvalid){
2. dmove.style.top = gtop.value + 'px';
3. dmove.style.left = gleft.value + 'px';
4. }
2. dmove.style.top = gtop.value + 'px';
3. dmove.style.left = gleft.value + 'px';
4. }
Now we will create a new input type which is button. We are making it to call our 'function moveit()'.
1. <input type="button" value="Move" id="done" />
Ok, Now we'll add 'OnClick event' and we will call our 'function moveit()' also we will pass parameters.
1. <input type="button" value="Move" id="done"
OnClick="moveit(document.getElementById('tcp'), document.getElementById('mtop'),
document.getElementById('mleft'))" />
OnClick="moveit(document.getElementById('tcp'), document.getElementById('mtop'),
document.getElementById('mleft'))" />
The OnClick function is too large, so it's not fitting to my blog's body..doesn't matter.
If you will try it, it will work. But it's not moving smoothly, i'll try it..later, i'll add one more post on how to make it to work smoothly.
The first parameter of 'function moveit' in which we are calling our 'div' which id is 'tcp' and the other parameters are in which we are calling our text boxes.
Check out TheCodePress on Facebook : http://www.facebook.com/Thecodepress
Check out TheCodePress on Twitter : https://twitter.com/TheCodePress
Don't forget to subscribe the blog :
Subscribe to:
Post Comments (Atom)
i liked the syntax highlighter
ReplyDeletewhich one is that..
i created it manually :)
DeleteNice!!!
ReplyDeleteit will help me a lot for a exercise I gotta do for university
Is it complicated to make it smoothly?? Is needed to change this code??
Thanks again :)
This comment has been removed by a blog administrator.
DeleteThanks...It's not much complicated to make it work smoothly. If you are using Jquery or mootools or any other JS libs then it's 'very easy', But here we are talking about how to do that with simple JS, that's why you'll need to add some CSS3 transitions or you may need to add a while loop to increment 1px again and again.
ReplyDeleteg8t work,
ReplyDeletebut i want to move that box on click of the cursor location. i don't want to put top or left. i just want to click my cursor on any place of the page and it should go there.
Hey, you can use 'event.clientX' and 'event.clientY' to get the coordinates and use it as values of dmove.style :) thanks!
Deleteg8t, but iam a lazy coder can i get a demo and code, i want to know when my event will trigger..
ReplyDeleteRight now i have a problem with my hosting so pravin uncle i'm sending you the code through pastebin link: http://pastebin.com/W9F4uxjH
DeletePlease check it and if you encounter any error then please comment it below :) thanks! enjoy!
gr8t work, u have good coding knowledge....thats great...so just try to focus on ur study...and keep this as ur hobby.
ReplyDeletethank you for the nice tutoriel
ReplyDeletehtml , css , js :)