Create a Resizable and Movable DIV with DynDiv

DynDiv is a single javascript file that can be used to resize and move a div box. The script is developed by  Markus Bordihn and released the MIT and GPL  licenses. 

Project Page: http://code.google.com/p/dyndiv/ 
Support Page: http://code.google.com/p/dyndiv/issues/list

DOWNLOAD NOW

Features:

• One JavaScript to rule them all ;)
• Support moving, resize, minimize and maximize the Div
• CPU friendly Event Handling (need only CPU power when a DIV is moving or resizeing)
• Drop Area Support with different Drop Modes (e.g: Puzzle)
• Restricted Areas, the movements and re sizing can be restricted to the browser window or to a special area
• Crossbrowser compatible (Firefox, Safari, Internet Explorer, Chrome)
• Hide resize Buttons on request
• Easy Implementation over css class names
• Save and Load Position or Size of the dynDIVs
• Posibility to keep aspect Ratio
• Simple small API to used this JavaScript in other Scripts
• Easy Dynamic Divs for everyone
• of course W3C conform
• and also JSLint checked (Source Code only)

The Code is very simple to use below is an example of its usage.

HTML

<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"> </script> 
[Custom or additional CSS code]

<div id="testdiv_1" class="dynDiv_moveDiv">
 <p style="padding: 10px;"> This is a test div with ByRei DynDiv, resize it ;) </p>
 <div class="dynDiv_resizeDiv_tl"> </div>
 <div class="dynDiv_resizeDiv_tr"> </div>
 <div class="dynDiv_resizeDiv_bl"> </div>
 <div class="dynDiv_resizeDiv_br"> </div>
</div>
<div id="testdiv_2">
 <img src="../example.jpg" width="100%" height="100%" alt="">
 <div id="testdiv_2_move" class="dynDiv_moveParentDiv"> Move Div here! </div>
 <div class="dynDiv_resizeDiv_tl"> </div>
 <div class="dynDiv_resizeDiv_tr"> </div>
 <div class="dynDiv_resizeDiv_bl"> </div>
 <div class="dynDiv_resizeDiv_br"> </div>
</div>
  

CSS 

#Testdiv_1 {
 width: 150px;
 height: 150px;
 background: #ccc;
 border: 1px solid #aaa;
 top: 300px;
 left: 350px;
 position: absolute;
}

#Testdiv_2 {
 width: 295px;
 height: 394px;
 right: 10px;
 top: 160px;
 border: 1px solid #aaa;
 position: absolute;
}

#Testdiv_2_move {
 text-align: center;
 filter: alpha (opacity = 50);
 opacity: 0.5;
 color: #fff;
}
  

More Examples >>

DOWNLOAD NOW