Demo search engine
Source window
<body onload="javascript:demo.dnd.moveTo({top:665, left:550}, 1);">
<a class="button" href="javascript:demo.dnd.moveTo({top:665, left:740}, 2000);"><span><span><span>Move to</span></span></span></a>
<a class="button" href="javascript:demo.dnd.moveTo({top:665, left:550}, 200);"><span><span><span>Reset</span></span></span></a>
<div id="containerDiv" style="position:absolute; border: 1px dashed #000000; background-image: url(img/grid.gif); background-color:#FAFAFA; width:500px; height:300px; top:40px; left:50px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
<div id="truck" style="position:relative;"> </div>
<div id="dragableDiv" style="position:relative;">
<div id="dragWindow">
<div id="dragHandle"> </div>
<div id="contentDiv">
Lorem ipsum dolor sit amet, consectetuer adipisci elit.
Sed voluptatem in inquit, de aut vitae, exercitus possit alias nulla,
ut adamare maiorum a fieri si dici maestitiam ad dicunt, iam..
Et inquam sic familias, sequatur animis quae et quae ea esse,
autem impediri quaeque modo inciderint consecutionem expectata,
sed severa etiamsi, in egregios temporibus infinito ad artibus,
voluptatem aristotele, tandem aliquo industriae collegi timiditatem sibi igitur aut,
se cum tranquillitate loquuntur quod nullo, quam suum illustribus fugiendam illis tam consequatur..
</div>
</div>
</div>
</div>
<script type="text/javascript">
if(typeof(demo) == "undefined") {
demo = {};
}
// init
toutou.require("toutou.html.dom");
toutou.require("toutou.html.dnd");
toutou.require("toutou.effect.move");
demo.dnd = new function() {
this.moveDivBull = tt$("truck");
toutou.effect.move.extend(this.moveDivBull);
this.moveDivWin = tt$("dragableDiv");
toutou.effect.move.extend(this.moveDivWin);
var winLayout = this.moveDivWin.tt_getMarginLayout();
var bullLayout = this.moveDivBull.tt_getMarginLayout();
this.offsetTop = winLayout.height - bullLayout.height;
this.offsetLeft = bullLayout.width - 11;
}
demo.dnd.moveTo = function(endPosition, duration) {
this.moveToBull(endPosition, duration);
// TODO : nettoyer ce code après l'installation de la nouvelle version de TouTouJS
// le "clone" sera effectué dans la méthode toutou.effect.move.moveTo
toutou.require("toutou.js.object");
var endPosition2 = toutou.js.object.clone(endPosition);
endPosition2.left+= this.offsetLeft;
endPosition2.top-= this.offsetTop;
this.moveToWin(endPosition2, duration);
}
demo.dnd.moveToBull = function(/*Object*/ layout, time) {
this.moveDivBull.tt_effect.move.moveTo(layout, time);
}
demo.dnd.moveToWin = function(/*Object*/ layout, time) {
this.moveDivWin.tt_effect.move.moveTo(layout, time);
}
</script>
</BODY>
Move
This a demonstration about a move effect created with ToutouJS.The move effect is applyed on two DIV.
Move to
Reset
Lorem ipsum dolor sit amet, consectetuer adipisci elit.
Sed voluptatem in inquit, de aut vitae, exercitus possit alias nulla,
ut adamare maiorum a fieri si dici maestitiam ad dicunt, iam..
Et inquam sic familias, sequatur animis quae et quae ea esse,
autem impediri quaeque modo inciderint consecutionem expectata,
sed severa etiamsi, in egregios temporibus infinito ad artibus,
voluptatem aristotele, tandem aliquo industriae collegi timiditatem sibi igitur aut,
se cum tranquillitate loquuntur quod nullo, quam suum illustribus fugiendam illis tam consequatur..
Description
- The ToutouJS function used for the move effect is:
tt_effect.move.moveTo(layout, time); - To use it, you must first include the move library with this code:
toutou.require("toutou.effect.move"); - Then, you have to assign on wich DIV you want to apply the move effect with this command:
this.moveDivBull = tt$("truck");
toutou.effect.move.extend(this.moveDivBull); - To finally execute the fade effect like that:
div1.tt_effect.move.moveTo(layout, time);
Move demo with callback: /effects/move_with_events
Other demos with callback functions: callback