Simple API Example for dynDiv
The new API Version Version 0.7 and higher allow a lot of new things.
Its has also 3 Event Handler so that you can simple execute javascript only if it is needed.
A small DB System also helps to simple read or write special DIVs Data, which are keeped in the DivList.
API Event Handler
To used the Event Handler is very simple, the following Event Handler are available.
Drag - Event
This Event will be triggered when the User drag the movable Div or start the resize of the movable Div.
ByRei_dynDiv.api.drag = function () {
...
}
Drop - Event
This Event will be triggered when the User dropped the movable Div or end the resize of the movable Div.
ByRei_dynDiv.api.drop = function () {
...
}
Alter - Event
This Event will be triggered when the User move or resize the dynDIV.
ByRei_dynDiv.api.alter = function () {
...
}
API Variables
There are also some API Variables, when the User want to get some Information about the dynDiv.
ByRei_dynDiv.api.obj
This Variable contain the current Object for winDiv so its a referent direct to the Div.
ByRei_dynDiv.api.elem
This Variable contain the Element ID for the winDiv, so you can simple used this for the "divList".
ByRei_dynDiv.cache.l_obj
Keep the last dynDiv [Object], will be empty when only 1 winDiv was moved or resize.
ByRei_dynDiv.cache.l_elem
Keep the last dynDiv Element ID, will be empty when only 1 winDiv was moved or resize.
ByRei_dynDiv.divList - DivList
The DIV List contain some useful Information for e.g: what is the limiter for movements or what is the drop area.
You can also check if the dynDiv was dropped in the drop area or not.
Example:
Initial zIndex = ByRei_dynDiv.divList[ByRei_dynDiv.api.elem][3]
divList structure
==================
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
Small DB System
You should try always to used the small DB System to access or set information for the current winDiv.
The DB System checks if it found info and when not it returns false without any jInformationerror.
When you try this only with the divList, you need to make sure that you check if the array is defined, if an element id is defined and so on.
Read information with DB System
To read Information is very easy, simple used ByRei_dynDiv.db([divList ID]) to read out information.
Example to read the Status:
var Status = ByRei_dynDiv.db(2);
Write information with DB System
To write information is also very easy, simple used ByRei_dynDiv.db([divList ID],[new Value]) to set the variable.
Example to change the Status:
ByRei_dynDiv.db(2,false);
Other Important Variables
There are also some Variables with are important to know.
ByRei_dynDiv.cache.modus
Defined the Modus for e.g: move, resize, moveparent...
Add dynDiv after Pageload
With Version 0.8 it is very easy to add dynDiv after the Page was loaded.
Please keep in mind, that normaly dynDiv scans all DIVs so when you want to add a Div which has resize Button in it you need to add these as well.
Example of the Syntax:
ByRei_dynDiv.add([Object], [ID or z-Index]);
So ByRei_dynDiv.add() need the [Object] you can easy get the Object over document.getElementById('..');.
Example to add a dynDiv after Pageload
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
...
<div id="test_dynDiv" class="dynDiv_moveDiv" style="width: 100px; height: 100px; border: 1px solid red;">
Test
</div>
...
ByRei_dynDiv.add(document.getElementById('test_dynDiv'), 1);
You can also used document.getElementsByTagName('div') to get all DIVs and used an for or while loop to add all of them dynamic.
Example
This Example show some simple Information when the dynDIV is dragged and moved.
API 1 Test
API 2 Test - Body Limit
Please Move or Resize the DIVs to see the Output here.
API JavaScript Code
<script type="text/javascript">
// Check for ByRei_dynDiv
if (typeof ByRei_dynDiv !== 'undefined') {
// Alter Event
ByRei_dynDiv.api.alter = function() {
var
mode = ByRei_dynDiv.cache.modus;
debug('Div is alter...'
+ '<br>ID: ' + ByRei_dynDiv.api.elem
+ '<br>Mode: ' + mode
+ '');
};
// Drag Event
ByRei_dynDiv.api.drag = function () {
var
mode = ByRei_dynDiv.cache.modus,
limit = ByRei_dynDiv.db(1),
status = ByRei_dynDiv.db(2);
debug('Div was dragged...'
+ '<br>ID: ' + ByRei_dynDiv.api.elem
+ '<br>Mode: ' + mode
+ '<br>Status: ' + statu
+ '<br>Limit: ' + limit
+ '');
};
// Drop Event
ByRei_dynDiv.api.drop = function () {
if (ByRei_dynDiv.api.obj) {
var
id = ByRei_dynDiv.api.elem,
width = ByRei_dynDiv.db(13),
height = ByRei_dynDiv.db(13),
top = ByRei_dynDiv.api.obj.style.top,
left = ByRei_dynDiv.api.obj.style.left,
offset_left = ByRei_dynDiv.db(4),
offset_top = ByRei_dynDiv.db(5),
status = ByRei_dynDiv.db(2);
debug('Div was dropped...'
+ '<br>ID: ' + id
+ '<br>Status: ' + statu
+ '<br>Width: ' + width
+ '<br>Height: ' + height
+ '<br>Left: ' + left
+ '<br>Top: ' + top
+ '<br>Offset-Left: ' + offset_left
+ '<br>Offset-Top: ' + offset_top
+ '');
}
};
}
// Simple Output
function debug(text) {
document.getElementById('debug').innerHTML = text;
}
</script>
HTML Code
<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="byrei-dyndiv_0.8.js"></script>
[Custom or additional CSS Code]
<div style="position: relative;">
<div id="testdiv_1" class="dynDiv_moveDiv">
<p style="padding: 10px;"> API 1 Test </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" class="dynDiv_moveDiv dynDiv_bodyLimit">
<p style="padding: 10px;"> API 2 Test - Body Limit </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>
<p id="debug" style="border: 1px solid red; height: 175px; width: 200px;">
Please Move or Resize the DIVs to see the Output here.
</p>
[API JavaScript Code]
Additional CSS Code
#testdiv_1, #testdiv_2 {
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #aaa;
top: 0px;
left: 500px;
position: absolute;
}
#testdiv_2 {
left: 250px;
}