mochikit_v14/examples/effects/full.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>Full Effects Test Suite</title>
   6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7     <link rel="stylesheet" href="../../include/css/documentation.css" type="text/css" />
   8     <script src="../../MochiKit/MochiKit.js" type="text/javascript"></script>
   9     <style type="text/css">
  10 #demo {
  11 }
  12
  13 #demo li {
  14     color: #8ba726;
  15     font-size: 1.2em;
  16 }
  17
  18 #democontainer {
  19     margin: 30px 5px 0px 5px;
  20 }
  21
  22 #demoall {
  23     position: absolute;
  24     top: 250px;
  25     left: 400px;
  26     font-size: 20px;
  27     background: #f3f3f3;
  28     color: #1C1D1F;
  29     text-align: center;
  30     border: 1px solid #ccc;
  31     width: 150px;
  32     height: 150px;
  33 }
  34     </style>
  35 </head>
  36
  37 <body>
  38 <div class="document">
  39 <div class="section">
  40 <h1>Full Effects Test Suite</h1>
  41 <ul id="demo">
  42     <li onclick="setStyle('demoall', {'display': 'block'});fade('demoall')">fade</li>
  43     <li onclick="setStyle('demoall', {'display': 'none'});appear('demoall')">appear</li>
  44     <li onclick="setStyle('demoall', {'display': 'block'});puff('demoall')">puff</li>
  45     <li onclick="blindDown('demoall')">blindDown</li>
  46     <li onclick="setStyle('demoall', {'display': 'block'});blindUp('demoall')">blindUp</li>
  47     <li onclick="switchOff('demoall')">switchOff</li>
  48     <li onclick="slideDown('demoall')">slideDown</li>
  49     <li onclick="slideUp('demoall')">slideUp</li>
  50     <li onclick="setStyle('demoall', {'display': 'block'});dropOut('demoall', {'distance': 500})">dropOut</li>
  51     <li onclick="setStyle('demoall', {'display': 'block'});shake('demoall')">shake</li>
  52     <li onclick="setStyle('demoall', {'display': 'block'});pulsate('demoall')">pulsate</li>
  53     <li onclick="setStyle('demoall', {'display': 'block'});squish('demoall')">squish</li>
  54     <li onclick="setStyle('demoall', {'display': 'block'});fold('demoall')">fold</li>
  55     <li onclick="grow('demoall')">grow</li>
  56     <li onclick="setStyle('demoall', {'display': 'block'});shrink('demoall')">shrink</li>
  57     <li onclick="setStyle('demoall', {'display': 'block'});Highlight('demoall', {startcolor: '#ffff33'})">Highlight</li>
  58     <li onclick="setStyle('demoall', {'display': 'block'});Morph('demoall', {'style': {'font-size': '3px'}, 'queue': 'start'});Morph('demoall', {'style': {'font-size': '20px'}, 'queue': 'end'});">Morph font</li>
  59     <li onclick="setStyle('demoall', {'display': 'block'});Morph('demoall', {'style': {'background-color': 'red'}, 'queue': 'start'});Morph('demoall', {'style': {'background-color': '#f3f3f3'}, 'queue': 'end'});">Morph color</li>
  60     <li onclick="toggle('demoall', 'blind')">toggle (blind)</li>
  61     <li onclick="toggle('demoall', 'slide')">toggle (slide)</li>
  62     <li onclick="toggle('demoall', 'appear')">toggle (appear)</li>
  63     <li onclick="toggle('demoall', 'size')">toggle (size)</li>
  64 </ul>
  65 <div id="demoall">
  66     <div id="democontainer">Click on one of the left to see the effect</div>
  67 </div>
  68 </div>
  69 </div>
  70 </body>
  71 </html>