diff options
Diffstat (limited to 'includes/js/dojox/fx/tests/test_crossFade.html')
| -rw-r--r-- | includes/js/dojox/fx/tests/test_crossFade.html | 145 |
1 files changed, 0 insertions, 145 deletions
diff --git a/includes/js/dojox/fx/tests/test_crossFade.html b/includes/js/dojox/fx/tests/test_crossFade.html deleted file mode 100644 index 330a34a..0000000 --- a/includes/js/dojox/fx/tests/test_crossFade.html +++ /dev/null @@ -1,145 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" - "http://www.w3.org/TR/html4/strict.dtd"> -<html> -<head> - <title>dojox.fx - animation sets to use!</title> - - <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> - <script type="text/javascript" src="../_base.js"></script> - <style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/themes/dijit.css"; - @import "../../../dijit/themes/tundra/tundra.css"; - @import "../../../dijit/tests/css/dijitTests.css"; - - #crossfade { - position:absolute; - top:0; - left:300px; - border:2px solid #ededed; - width:50px; height:50px; - background:#fff; - text-align:center; - } - - table tr { padding:5px; margin:5px; border:1px solid #ccc; } - - .box { - width:75px; height:75px; float:left; - border:1px solid #ededed; - padding:20px; - background-color:#fee; - } - .two { background-color:#c7bedd; } - .nopad { padding:0 !important; - width:100px; height:100px; border:0; - } - .hidden { - opacity:0; - } - </style> - <script type="text/javascript"> - dojo.require("dijit.form.Button"); - dojo.require("dijit.TitlePane"); - - function basicXfade(){ - dojox.fx.crossFade({ - nodes: [dojo.byId('node1'),dojo.byId('node2')], - duration: 1000 - }).play(); - }; - - function absoluteXfade(){ - dojox.fx.crossFade({ - nodes: ["node3","node4"], - duration:1000 - }).play(); - }; - - var _anim; - function simpleLoop(){ - dojo.byId('button').disabled = "disabled"; - _anim = dojox.fx.crossFade({ - nodes: ["node5","node6"], - duration:1000 - }); - dojo.connect(_anim,"onEnd","simpleLoop"); - _anim.play(500); - }; - function stopLoop(){ _anim.stop(); } - - function buttonExample(){ - dojox.fx.crossFade({ - nodes: [ - // FIXME: fails in ie6?!? - dijit.byId('node7').domNode, - dijit.byId('node8').domNode - ], - duration: 350 - }).play(); - } - - dojo.addOnLoad(function(){ - // this is a hack to make nodes with class="hidden" hidden - // because ie6 is a horrible wretched beast - dojo.query(".hidden").forEach(function(node){ - dojo.style(node,"opacity","0"); - }); - - - }); - - </script> -</head> -<body class="tundra"> - <h1 class="testTitle">dojox.fx.crossFade test</h1> - - - <h3>a simple demonstration of two nodes fading simultaneously</h3> - <div> - <input type="button" onclick="basicXfade()" value="run" /> - <div style="padding:20px"> - <div id="node1" style="display:inline;" class="box hidden">box1</div> - <div id="node2" class="box">box2</div> - </div> - <br style="clear:both"> - </div> - - <h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3> - <input type="button" onclick="absoluteXfade()" value="run" /> - <div> - <div style="width:100px; height:100px; position:relative; border:1px solid #666; "> - <div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div> - <div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div> - </div> - <br style="clear:both"> - </div> - - <h3>simple looping crossfade</h3> - <input type="button" onclick="simpleLoop()" value="run" id="button" /> - <div> - <div style="padding:20px;"> - <div id="node5" class="box nopad">box one</div> - <div id="node6" class="box two nopad hidden">box two</div> - </div> - <br style="clear:both"> - </div> - - <!-- FIXME: acting oddly, only in IE though - <h3>An example of cross-fading a dijit.form.Button</h3> - <input type="button" onclick="buttonExample()" value="run" id="button" /> - <div> - <div style="position:relative;"> - <div dojoType="dijit.TitlePane" id="node7" - style="position:absolute; top:0; left:0;">Lorem content two</div> - <div dojoTYpe="dijit.TitlePane" id="node8" class="hidden" - style="position:absolute; top:0; left:0;">Lorem content one</div> - </div> - <br style="clear:both;"> - </div> - --> - - <h3>that's all, folks...</h3> - -</body> -</html> |