mochikit_v14/examples/effects/index.html

   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>