dojo.fx.wipeIn examples

Contents

• dojo.fx.wipeIn examples
  • Wiping in a node with “display: none; position: absolute;”

Wiping in a node with “display: none; position: absolute;”

When you are trying to wipe in a node to a fixed height or width you have to use dojox.fx.wipeTo.

Note that the padding of the content which gets wiped in is set on a separate inner node. This ensures that you don’t get weird x-browser behaviour.

dojo.require("dojo.fx");
dojo.require("dijit.form.Button");

wipeInOne = function(){
  dojo.fx.wipeIn({
    node: "wipeDisplayNode",
    duration: 300
  }).play();
}

wipeOutOne = function(){
  dojo.fx.wipeOut({
    node: "wipeDisplayNode",
    duration: 300
  }).play();
}

dojo.require("dojo.fx"); dojo.require("dijit.form.Button"); wipeInOne = function(){ dojo.fx.wipeIn({ node: "wipeDisplayNode", duration: 300 }).play(); } wipeOutOne = function(){ dojo.fx.wipeOut({ node: "wipeDisplayNode", duration: 300 }).play(); }

<div style="height: 110px;">
  <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:wipeInOne">Wipe in</button>
  <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:wipeOutOne">Wipe out</button>
  <div id="wipeDisplayNode" style="position: absolute; top: 50px; background: #ccc; display: none;">
    <div style=" padding: 10px;">Hi friends<br />We like dojofx. don't we?</div>
  </div>
</div>

<div style="height: 110px;"> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:wipeInOne">Wipe in</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:wipeOutOne">Wipe out</button> <div id="wipeDisplayNode" style="position: absolute; top: 50px; background: #ccc; display: none;"> <div style=" padding: 10px;">Hi friends<br />We like dojofx. don't we?</div> </div> </div>

Table of Contents

• dojo.fx.wipeIn examples
  • Wiping in a node with “display: none; position: absolute;”