Create a Resizable and Movable DIV with DynDiv

Tuesday, May 28, 2013
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

No comments: