Dear Friends,
Dhurima Blog presents, How to make my div containers movable within an HTML page?
If you Say, it's very Difficult, then you are wrong. It's so easy man. just follow given Steps:
Click for Demo Page
Step 1: Choose where you want to use it. We suppose you want to add under a Contact Page.
Step 2: If You add this on your Website, then
Dhurima Blog presents, How to make my div containers movable within an HTML page?
If you Say, it's very Difficult, then you are wrong. It's so easy man. just follow given Steps:
Click for Demo Page
Step 1: Choose where you want to use it. We suppose you want to add under a Contact Page.
Step 2: If You add this on your Website, then
- First Copy below script and css and paste under head tag.
| <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <style> #divContainer, #divResize { border:dashed 1px #CCC; width:120px; height:120px; padding:5px; margin:5px; font:13px Arial; cursor:move; float:left } </style> </head> |
- Now Copy below code and Paste where you want add movable div under Body tag.
- Now Copy below script code and Paste below body Tag and just top of the HTML closing Tag.
- Save your HTML File and Run your file. That's it for Website.
| <body> <div> <div id="divContainer"> I am Draggable </div> <div id="divResize"> I am Draggable and Resizable </div> </div> </body> Note: Here is 2 div first for Draggable and second for Draggable and Resizable both. If you want to add only one then just remove another. |
| <script> $(document).ready(function() { $(function() { $('#divContainer').draggable(); }); $(function() { $("#divResize").draggable().resizable(); }); }); </script> </html> |
Step 3: If You add this on your Blogger, then
- Go to Blogger Dashboard --> Click on 'Template' --> Click on 'Edit HTML'
- Copy below script and css link and paste under below of head tag.
- Now Go to Blogger Dashboard --> Click on 'Template' --> Click on 'Customise' --> Click on 'Advanced' --> Click on 'Add CSS'. Under the Opened CSS Box, Just Copy and Past Below CSS code. According to your Choice you can Change it.
- Now Copy below code and Paste where you want add movable div. You Can Use Add Gadget for it.
| <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> |
| #divContainer, #divResize { border:dashed 1px #CCC; width:120px; height:120px; padding:5px; margin:5px; font:13px Arial; cursor:move; float:left } |
| <div> <div id="divContainer"> I am Draggable </div> <div id="divResize"> I am Draggable and Resizable </div> </div> <script> $(document).ready(function() { $(function() { $('#divContainer').draggable(); }); $(function() { $("#divResize").draggable().resizable(); }); }); </script> |
If You like this Post, Please Like my Blog Comment on this post and Visit my another post. Visit my Facebook Page
That's It
