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..!



Now create a div in HTML, which is very simple...and id should be 'tcp' or anything else what you want to add.

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>

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.
   }

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.   }

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'))" />       

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 : 

12 comments:

  1. i liked the syntax highlighter
    which one is that..

    ReplyDelete
  2. Nice!!!
    it 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 :)

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  3. Thanks...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.

    ReplyDelete
  4. g8t work,
    but 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.

    ReplyDelete
    Replies
    1. Hey, you can use 'event.clientX' and 'event.clientY' to get the coordinates and use it as values of dmove.style :) thanks!

      Delete
  5. g8t, but iam a lazy coder can i get a demo and code, i want to know when my event will trigger..

    ReplyDelete
    Replies
    1. Right now i have a problem with my hosting so pravin uncle i'm sending you the code through pastebin link: http://pastebin.com/W9F4uxjH
      Please check it and if you encounter any error then please comment it below :) thanks! enjoy!

      Delete
  6. gr8t work, u have good coding knowledge....thats great...so just try to focus on ur study...and keep this as ur hobby.

    ReplyDelete
  7. thank you for the nice tutoriel
    html , css , js :)

    ReplyDelete

Your Comment Will Be Visible After Approval, Thanks !