Documentation
What is ByRei - dynDiv
ByRei - dynDiv is a simple JavaScript which will include in the Web page, its allow to move, resize, minimize a DIV such as a window.
You don't need additional JavaScript Code or need to code JavaScript to get this working. You simple include a special "class" in the Div and it should worked.
Versions History
Version 1.0 RC1 (2009-07-10):
- First officel Release Version after over 1 year of development and improvments... ;)
- This Version is a optimized Version from Version 0.9, because most of the Feature the Version 0.9 get very big so i try to optimized most of the stuff in this Version.
- Speed Optimazation and Caching in the most of the Parts
Version 0.9 (2009-07-06):
- Replace some Part with RegExp to avoid errors in Internet Explorer 8
- Fix some Internet Explorer 8 BUGs, the JavaScript try to detected error and recalculate values
- Fix a bug when only the resize option is used
- New Feature to save and load the Position and/or the Size of the dynDiv (Cookie based)
- New Feature to Keep Aspect Ratio (not completed tested)
- Improve Event Handling, so the Event Handling is full W3C conform
- Improve Error Handling, no it is checked if an object is already on the list before add this object
- Small Code overwork for JSLint
- Fix and Improve the website (grama, spelling, examples)
Version 0.8 (2008-07-07):
- small Database System
- New Feature to hide other dynDIVs when one dynDIV is moved
- New Feature to hide the resize Buttons
- New Feature to add the dynDiv function to DIVs after the pages was loaded
- Better Limit Handling with support complex DIVs Designs
- Optimize Code and remove dead Code / Variables
- Rename most of the function names for a better overview
- Small Code overwork for JSLint
Version 0.7 (2008-06-12):
- Improve Event Timing (very CPU friendly and idle state)
- Change general Event Handling
- Fix small issue with predefined z-Index
- Add ID System and Array with hold all movable DIV
- Add bring selected DIV as long it is moved
- New Feature to define a drop Area where dynDIVs can be dropped
- Change handling for option for "moveParentDiv", this is the reason for incompatible with Version 0.62 and lower
- Change the API to make it easier to control winDiv from other Scripts
This Version is not compatible with Version 0.62 and lower !
Version 0.62 (-):
- Fix some small issue like, resize when reach limit
Version 0.61 (2008-04-10):
- Fix a funny Bug which make it impossible to mark something on the web page in Internet Explorer.
(Thanks Patrick B. to show me this Bug.)
Version 0.6 (2008-04-02):
- Fix a Issue with the new Feature Minimize and Maximize Content
- Fix Source Code to be JSLint valid, don't asked me why ;)
Version 0.5 (2008-03-26):
- New Feature to Minimize and Maximize the Content
- Fix a Issue with Images an other Objects in the movable DIVs
Version 0.4 (2008-03-25):
- New Feature to limit Movements to the Web document or an restricted Area
- Changed Code to unique Name space
- Small Code improvements
- Automatic z-index Order to fix a Bug with multiple DIVs
- Changed Name space
This Version is not compatible with Version 0.3 and lower !
Version 0.3 (2008-02-28):
- Intern Test Version only
- Fix issues with limit Movements and other related Bugs with this Features
- Better Timing and smoother Movements
Version 0.2 (2008-02-28):
- Small Bug fixes
- Code Optimization
- Add Global Variable for current Position and Size
- Add new Feature for limit Movements
Version 0.1:
- First Release Version
Features of ByRei - dynDiv
- It is W3C compatible
- Works on different Browser also under Mac OS
- Multiple DIV's are possible
- No additional Javascript Coding is needed
- Simple activated over "class=..."
- Movearea can be limited
License and Copyright
* Copyright (c) 2008 Markus Bordihn (markusbordihn.de) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses.
Installation
Please take a look at the example Page, simple copy byrei-dyndiv.js and byrei-dyndiv.css to your web page.
Include both in your Web page insert the CSS Style Sheet and the JavaScript in you web page.
Options
This is an overview for the options in ByRei - dyndiv. You don't need all options but when you used move and resize, please make sure to add a special div for the resize buttons.
Keep also in mind, that this will only worked on "position=absolute;" DIVs.
... class="dynDiv_moveDiv" ...
... class="dynDiv_moveParentDiv" ...
... class="dynDiv_resizeDiv_tl" ...
... class="dynDiv_resizeDiv_tr" ...
... class="dynDiv_resizeDiv_bl" ...
... class="dynDiv_resizeDiv_br" ...
... class="dynDiv_bodyLimit" ...
... class="dynDiv_setLimit" ...
... class="dynDiv_minmaxDiv" ...
... class="dynDiv_minmax_Height-..." ...
... class="dynDiv_dropArea" ...
... class="dynDiv_dropArea-..." ...
... class="dynDiv_dropLimit" ...
... class="dynDiv_dropLimit-..." ...
... class="dynDiv_dropMode" ...
... class="dynDiv_hideMove" ...
... class="dynDiv_hideResize" ...
... class="dynDiv_showResize-..." ...
... class="dynDiv_keepAspect" ...
... class="dynDiv_saveSettings-..." ...
... class="dynDiv_loadSettings" ...
dynDiv_moveDiv
Make the full Div movable, please keep in mind to set a background that the div is not empty. ;)
Example:
<div class="dynDiv_moveDiv">
...
</div>
dynDiv_moveParentDiv
This can be used to set a child div to move the parent div. It is useful when you don't want that the user can move the full div, only when the user is over a special div or image.
Example:
<div>
...
<div class="dynDiv_moveParentDiv"> Move Parent Div </div>
...
</div>
dynDiv_resizeDiv_tl
Add a 10x10 resize Button on the top left Side of the Div. Need a own div !
Example:
<div class="dynDiv_moveDiv">
...
<div class="dynDiv_resizeDiv_tl"></div>
...
</div>
dynDiv_resizeDiv_tr
Add a 10x10 resize Button on the top right Side of the Div. Need a own div !
Example:
<div class="dynDiv_moveDiv">
...
<div class="dynDiv_resizeDiv_tr"></div>
...
</div>
dynDiv_resizeDiv_bl
Add a 10x10 resize Button on the bottom left Side of the Div. Need a own div !
Example:
<div class="dynDiv_moveDiv">
...
<div class="dynDiv_resizeDiv_bl"></div>
...
</div>
dynDiv_resizeDiv_br
Add a 10x10 resize Button on the bottom right Side of the Div. Need a own div !
Example:
<div class="dynDiv_moveDiv">
...
<div class="dynDiv_resizeDiv_br"></div>
...
</div>
dynDiv_bodyLimit
This limited the movements to the document, so you cant move the DIV outside the document / web page.
Example:
<div class="dynDiv_moveDiv dynDiv_bodyLimit">
...
</div>
dynDiv_setLimit
This set the limited Area for moving and re sizing a Div. This class need to be add to the surrounded div, this div need "position: relative" or "position: absolute" !
Please take a look at the example page for more Informations.
Example:
<div class="dynDiv_setLimit">
<div class="dynDiv_moveDiv">
...
</div>
</div>
dynDiv_minmaxDiv
This will allow you to minimize and maximize your Div. Need a own div !
Example:
<div class="dynDiv_minmaxDiv">[x]</div>
dynDiv_minmax_Height-
With this you will set the Minimum Height when a Div will be minimized. Default or Fallback Value is 20px.
Example for min Height 40px:
<div class="dynDiv_minmaxDiv dynDiv_minmax_Height-40">[x]</div>
dynDiv_hideResize / dynDiv_hideMove
This will hide other dynDIVs when the selected dynDIV will be resized or moved.
You can also used both option for the same dynDIV.
Example:
<div class="dynDiv_moveDiv dynDiv_hideResize dynDiv_hideMove">
...
</div>
dynDiv_showResize-...
This Option will hide the resize dynDIVs and will show the only when the dynDIV is active or when the dynDIV is doubleclicked.
The resize dynDIVs will automatic disapear when you click on another dynDIV.
1. Example for show resize on active dynDIV:
<div class="dynDiv_moveDiv dynDiv_showResize-active">
...
</div>
2. Example for show resize only on double click:
<div class="dynDiv_moveDiv dynDiv_showResize-dblclick">
...
</div>
dynDiv_dropArea / dynDiv_dropArea-...
This will set Drop Area, where the dynDIVs can be dropped. You can used the default "dynDiv_dropArea" or defined a special area with an unique name.
When you want to used a unique Name you can simple used "dynDiv_dropArea-[name]", but you need to used the same name for the DIVs which can be drop into this area.
The unique Name "dynDiv_dropArea-global" is reversed and is the default when you used "dynDiv_dropArea" !
Example for default:
<div class="dynDiv_dropArea">
...
</div>
Example for unique:
<div class="dynDiv_dropArea-test1">
...
</div>
<div class="dynDiv_dropArea-test2">
...
</div>
dynDiv_dropLimit / dynDiv_dropLimit-...
This will restricted the DIV that it can be only dropped in a Drop Area. You can choose if this will be the default Drop Area or a special Drop Area.
Take a look at the Example Pages to understand the concept of Drop Areas.
Example for default:
<div class="dynDiv_moveDiv dynDiv_dropLimit">
...
</div>
Example for unique:
<div class="dynDiv_moveDiv dynDiv_dropLimit-test1">
...
</div>
<div class="dynDiv_moveDiv dynDiv_dropLimit-test2">
...
</div>
dynDiv_keepAspect
This will try to keep the Aspect Ratio of the DIV, so its good for Image which should keep the aspect Ratio.
Please keep in mind that this feature is a beta feature, so when you found errors, please report them or use the source code to improve the function.
Example:
<div class="dynDiv_moveDiv dynDiv_keepAspect">
...
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
...
</div>
dynDiv_saveSettings-position / dynDiv_saveSettings-size / dynDiv_saveSettings-position_size
With "dynDiv_saveSettings-..." you can save the position, the size or both into a cookie.
So it is possible when the user revisits the website that the div is on the same position with the same size before he left the page.
Please keep in mind you need to give the main div a unique ID so that this feature can working.
You need also "dynDiv_loadSettings" to load the Settings when the website is loading.
Example for save Position:
<div id="unique_3249a" class="dynDiv_moveDiv dynDiv_saveSettings-position">
...
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
...
</div>
Example for save Size:
<div id="unique_3249b" class="dynDiv_moveDiv dynDiv_saveSettings-size">
...
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
...
</div>
Example for save Position and Size:
<div id="unique_3249c" class="dynDiv_moveDiv dynDiv_saveSettings-position_size">
...
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
...
</div>
dynDiv_loadSettings
When you have save the position, the size or both of them, then you need to tell dynDiv to load these Settings with the following class name "dynDiv_loadSettings".
Please keep in mind this command will load all values in the cookie, so you can manipulate the Cookie Information to defined a new position or / and size.
Example for load Position:
<div id="unique_3249a" class="dynDiv_moveDiv dynDiv_saveSettings-position dynDiv_loadSettings">
...
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
...
</div>
Example for load Size:
<div id="unique_3249b" class="dynDiv_moveDiv dynDiv_saveSettings-size dynDiv_loadSettings">
...
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
...
</div>
Example for load Position and Size:
<div id="unique_3249c" class="dynDiv_moveDiv dynDiv_saveSettings-position_size dynDiv_loadSettings">
...
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
...
</div>
Tips and Tricks
The dynDiv set the z-index automatic, so when you want a DIV that can be moved over all other Content, put this DIV at the end of you web page.
Used the function "dynDiv_setLimit" and "dynDiv_bodyLimit" to limited the Movements. But don't used the functions together !
Customize / Change Design
The Design is set over CSS (Cascading Style Sheets), so you can customize all elements over the class or over additional style attributes, please take a look at the example page for examples.
DivList DB - Version 0.8 and higher
Width Version 0.8 and higher there was add a small DB System for dynDIV.
This DB System make it very easy to used this in other JavaScript or Projects.
The System is very easy, you can ready a value for the current dynDIV or set the value.
Example for read a value:
active = ByRei_dynDiv.db(2); // Read if DIV is active or not
Example to set a value:
ByRei_dynDiv.db(2,false); // Set DIV to inactive
DivList - Verison 0.9 and higher
With Version 0.9 the DivList was adjusted to cover the new features.
divList Struction (version 0.9 / version 1.x)
==================
0. Object:[Object] - Movable Object
1. Limiter:[Object] - Object to which the dynDIV is limited
2. Status:[Boolean] - Active or Inactive
3. zIndex:[Number] - Init. zIndex for the dynDIV
4. left:[Number] - Init. Position left
5. top:[Number] - Init. Position top
6. dropLimit:[Text] - Contain the dropArea which the dynDIV is limited
7. dropMode:[Text] - Set up the dropMode for the dropArea (default,center,fit)
8. dropLog:[Boolean] - Is true when the dynDIV was dropped into the dropArea
9. hideAction:[Text] - Hide other DIVs for move or resize
10. showResize:[Text] - Show resize DIVs only on active or double click
11. keepAspect:[Number] - Keep the Aspect Ration of the DIV
12. saveSettings:[Text] - Save the Position and/or the Dimension of the Element in a Cookie
13. width:[Number] - Init Width in px
14. height:[Number] - Init Height in px
DivList - Version 0.7 and Version 0.8
With Version 0.7 there was add the DivList which contain all movable DIVs.
divList Struction (version 0.7 / version 0.8)
==================
0. Object:[Object] - Movable Object
1. Limiter:[Object] - Object to which the dynDIV is limited
2. Status:[Boolean] - Active or Inactive
3. zIndex:[Number] - Init. zIndex for the dynDIV
4. left:[Number] - Init. Position left
5. top:[Number] - Init. Position top
6. dropLimit:[Text] - Contain the dropArea which the dynDIV is limited
7. dropMode:[Text] - Set up the dropMode for the dropArea (default,center,fit)
8. dropLog:[Boolean] - Is true when the dynDIV was dropped into the dropArea
9. hideAction:[Text] - Hide other DIVs for move or resize
10. showResize:[Text] - Show resize DIVs only on active or double click
API for other JavaScript - Version 0.7 and higher
With Version 0.7 there is a new API for a simpler and better handling.
In this new API you can simple defined function when you drag or drop the Div.
<script>
ByRei_dynDiv.api.drop = function () {
alert('Size: ' + ByRei_dynDiv.api.obj.clientWidth + 'x' + ByRei_dynDiv.api.obj.clientHeight);
}
</script>
For more Information please take a look at the example Page
API for other JavaScript - Version 0.62 and lower
The Version 0.2 until Version 0.62 have include a small simple API to use this Script in other Script.
ByRei_dynDiv.target_div
This JavaScript Variable contain the current target Div, so you can use it to detected the current position and size.
ByRei_dynDiv.target_div.offsetTop // Position Top
ByRei_dynDiv.target_div.offsetLeft // Position Left
ByRei_dynDiv.target_div.offsetHeight // Position Height
ByRei_dynDiv.target_div.offsetWidth // Position Width
ByRei_dynDiv.move_selected_div
Is only set to a value when a div is moving, if no div is moving at the time, this value is "false".
ByRei_dynDiv.resize_selected_div
This is only set to a value when a div is re sizing, if no div is re sizing at the time, this value is "false".
Other things to Say
I hope you have fun with it ;)
Greetings,
- Markus B.