| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
| 2 | "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| 3 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| 4 | <head> |
| 5 | <title>Test Effects</title> |
| 6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| 7 | <link href="effects_combi.css" rel="stylesheet" type="text/css" /> |
| 8 | <script src="../../MochiKit/MochiKit.js" type="text/javascript"></script> |
| 9 | <script src="../../MochiKit/Position.js" type="text/javascript"></script> |
| 10 | <script src="../../MochiKit/Visual.js" type="text/javascript"></script> |
| 11 | </head> |
| 12 | |
| 13 | <body> |
| 14 | <h3>Here are demos of all combination effects:</h3> |
| 15 | <div class="demo"> |
| 16 | <div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear('demo-effect-fade')"> |
| 17 | <span>Click for Visual.appear demo</span> |
| 18 | </div> |
| 19 | <div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)"> |
| 20 | <span>Click for Visual.fade demo</span> |
| 21 | </div> |
| 22 | <div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)"> |
| 23 | <span>Click for Visual.puff demo</span> |
| 24 | </div> |
| 25 | <div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)"> |
| 26 | <div style="height:120px;"> |
| 27 | |
| 28 | <span>Click for Visual.blindDown demo</span> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)"> |
| 32 | <span>Click for Visual.blindUp demo</span> |
| 33 | </div> |
| 34 | <div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)"> |
| 35 | <span>Click for Visual.switchOff demo</span> |
| 36 | </div> |
| 37 | <div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)"><div style="height:120px;"> |
| 38 | <span>Click for Visual.slideDown demo</span> |
| 39 | </div></div> |
| 40 | <div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)"><div style="height:120px;"> |
| 41 | <span>Click for Visual.slideUp demo</span> |
| 42 | </div></div> |
| 43 | <div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)"> |
| 44 | <span>Click for Visual.dropOut demo</span> |
| 45 | </div> |
| 46 | <div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)"> |
| 47 | <span>Click for Visual.shake demo</span> |
| 48 | </div> |
| 49 | <div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)"> |
| 50 | <span>Click for Visual.pulsate demo</span> |
| 51 | </div> |
| 52 | <div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)"> |
| 53 | <span>Click for Visual.squish demo</span> |
| 54 | </div> |
| 55 | <div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)"> |
| 56 | <span>Click for Visual.fold demo</span> |
| 57 | </div> |
| 58 | <div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)"> |
| 59 | <span>Click for Visual.grow demo</span> |
| 60 | </div> |
| 61 | <div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)"> |
| 62 | <span>Click for Visual.shrink demo</span> |
| 63 | </div> |
| 64 | <div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)"> |
| 65 | <span>Click for Visual.Highlight demo</span> |
| 66 | </div> |
| 67 | </div> |
| 68 | |
| 69 | <h3>Here are all demos on one single element:</h3> |
| 70 | <ul class="demo"> |
| 71 | <li onclick="MochiKit.Visual.appear('demo-all')">Click for Visual.appear demo</li> |
| 72 | <li onclick="MochiKit.Visual.fade('demo-all')">Click for Visual.fade demo</li> |
| 73 | <li onclick="MochiKit.Visual.puff('demo-all')">Click for Visual.puff demo</li> |
| 74 | <li onclick="MochiKit.Visual.blindDown('demo-all')">Click for Visual.blindDown demo</li> |
| 75 | <li onclick="MochiKit.Visual.blindUp('demo-all')">Click for Visual.blindUp demo</li> |
| 76 | <li onclick="MochiKit.Visual.switchOff('demo-all')">Click for Visual.switchOff demo</li> |
| 77 | <li onclick="MochiKit.Visual.slideDown('demo-all')">Click for Visual.slideDown demo</li> |
| 78 | <li onclick="MochiKit.Visual.slideUp('demo-all')">Click for Visual.slideUp demo</li> |
| 79 | <li onclick="MochiKit.Visual.dropOut('demo-all')">Click for Visual.dropOut demo</li> |
| 80 | <li onclick="MochiKit.Visual.shake('demo-all')">Click for Visual.shake demo</li> |
| 81 | <li onclick="MochiKit.Visual.pulsate('demo-all')">Click for Visual.pulsate demo</li> |
| 82 | <li onclick="MochiKit.Visual.squish('demo-all')">Click for Visual.squish demo</li> |
| 83 | <li onclick="MochiKit.Visual.fold('demo-all')">Click for Visual.fold demo</li> |
| 84 | <li onclick="MochiKit.Visual.grow('demo-all')">Click for Visual.grow demo</li> |
| 85 | <li onclick="MochiKit.Visual.shrink('demo-all')">Click for Visual.shrink demo</li> |
| 86 | <li onclick="new MochiKit.Visual.Highlight('demo-all')">Click for Visual.Highlight demo</li> |
| 87 | <li onclick="MochiKit.Visual.toggle('demo-all', 'blind')">Click for Visual.toggle demo (blind)</li> |
| 88 | <li onclick="MochiKit.Visual.toggle('demo-all', 'slide')">Click for Visual.toggle demo (slide)</li> |
| 89 | <li onclick="MochiKit.Visual.toggle('demo-all', 'appear')">Click for Visual.toggle demo (appear)</li> |
| 90 | <li onclick="MochiKit.Visual.toggle('demo-all', 'size')">Click for Visual.toggle demo (size)</li> |
| 91 | </ul> |
| 92 | <div id="demo-all"> |
| 93 | <span>Click on one of the left to see the effect</span> |
| 94 | </div> |
| 95 | <span id="reset" onclick="new MochiKit.Visual.appear('demo-all')">Click here to reset box</span> |
| 96 | |
| 97 | <div> |
| 98 | Links to other samples: |
| 99 | <ul> |
| 100 | <li><a href="effects_bigslide.html">Big slide effects</a></li> |
| 101 | <li><a href="effects_slide.html">Slide effects</a></li> |
| 102 | <li><a href="effects_blind.html">Blind effects</a></li> |
| 103 | <li><a href="effects_blindslide.html">Blind/Slide effects</a></li> |
| 104 | <li><a href="effects_fadeappear.html">Fade/Appear effects</a></li> |
| 105 | <li><a href="effects_onload.html">Onload effects</a></li> |
| 106 | <li><a href="effects_scroll.html">Scroll effects</a></li> |
| 107 | <li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li> |
| 108 | <li><a href="effects_queue.html">Queue effects</a></li> |
| 109 | <li><a href="effects_queue_limit.html">Queue limit effects</a></li> |
| 110 | </ul> |
| 111 | </div> |
| 112 | </body> |
| 113 | </html> |