JavaScript DHTML/Mochkit/Effect
Demo of MochiKit Visual Elements
<!--
MochiKit is dual-licensed software. It is available under the terms of the
MIT License, or the Academic Free License version 2.1. The full text of
each license is included below.
-->
<!-- Code revised from MochiKit demo code -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo of MochiKit Visual Elements</title>
<style type="text/css">
h1 { background: darkgreen; color: yellow; text-align: center; }
h2 { background: darkgreen; color: yellow; padding-top: 0.25em;}
.invisible { display: none; }
</style>
<script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript">
var roundedCornersOnLoad = function () {
swapDOM("visual_version", SPAN(null, MochiKit.Visual.VERSION));
roundClass("h1", null);
roundClass("h2", null, {corners: "bottom"});
};
addLoadEvent(roundedCornersOnLoad);
// rewrite the view-source links
addLoadEvent(function () {
var elems = getElementsByTagAndClassName("A", "view-source");
var page = "rounded_corners/";
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var href = elem.href.split(/\//).pop();
elem.target = "_blank";
elem.href = "../view-source/view-source.html#" + page + href;
}
});
</script>
</head>
<body>
<h1>MochiKit.Visual <span id="visual_version"></span></h1>
<h2>Rounded Corners</h2>
<p>
This example demonstrates the rounded corners functionality of
<a href="http://mochikit.ru">MochiKit</a>"s
<a href="../../doc/html/lib/MochiKit/Visual.html">MochiKit.Visual</a>.
</p>
<p>
The heading at the top of this page should have all four corners
rounded. The heading for this section should just have the bottom
corners rounded.
</p>
View Source:
<ul>
<li><a href="rounded_corners.js" class="view-source">rounded_corners.js</a></li>
<li><a href="index.html" class="view-source">index.html</a></li>
</ul>
</body>
</html>
Full Effects Test Suite
<!--
MochiKit is dual-licensed software. It is available under the terms of the
MIT License, or the Academic Free License version 2.1. The full text of
each license is included below.
-->
<!-- Code revised from MochiKit demo code -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full Effects Test Suite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="MochiKit-1.4.2/include/css/documentation.css" type="text/css" />
<script src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js" type="text/javascript"></script>
<style type="text/css">
#demo {
}
#demo li {
color: #8ba726;
font-size: 1.2em;
}
#democontainer {
margin: 30px 5px 0px 5px;
}
#demoall {
position: absolute;
top: 250px;
left: 400px;
font-size: 20px;
background: #f3f3f3;
color: #1C1D1F;
text-align: center;
border: 1px solid #ccc;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="document">
<div class="section">
<h1>Full Effects Test Suite</h1>
<ul id="demo">
<li onclick="setStyle("demoall", {"display": "block"});fade("demoall")">fade</li>
<li onclick="setStyle("demoall", {"display": "none"});appear("demoall")">appear</li>
<li onclick="setStyle("demoall", {"display": "block"});puff("demoall")">puff</li>
<li onclick="blindDown("demoall")">blindDown</li>
<li onclick="setStyle("demoall", {"display": "block"});blindUp("demoall")">blindUp</li>
<li onclick="switchOff("demoall")">switchOff</li>
<li onclick="slideDown("demoall")">slideDown</li>
<li onclick="slideUp("demoall")">slideUp</li>
<li onclick="setStyle("demoall", {"display": "block"});dropOut("demoall", {"distance": 500})">dropOut</li>
<li onclick="setStyle("demoall", {"display": "block"});shake("demoall")">shake</li>
<li onclick="setStyle("demoall", {"display": "block"});pulsate("demoall")">pulsate</li>
<li onclick="setStyle("demoall", {"display": "block"});squish("demoall")">squish</li>
<li onclick="setStyle("demoall", {"display": "block"});fold("demoall")">fold</li>
<li onclick="grow("demoall")">grow</li>
<li onclick="setStyle("demoall", {"display": "block"});shrink("demoall")">shrink</li>
<li onclick="setStyle("demoall", {"display": "block"});Highlight("demoall", {startcolor: "#ffff33"})">Highlight</li>
<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>
<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>
<li onclick="toggle("demoall", "blind")">toggle (blind)</li>
<li onclick="toggle("demoall", "slide")">toggle (slide)</li>
<li onclick="toggle("demoall", "appear")">toggle (appear)</li>
<li onclick="toggle("demoall", "size")">toggle (size)</li>
</ul>
<div id="demoall">
<div id="democontainer">Click on one of the left to see the effect</div>
</div>
</div>
</div>
</body>
</html>
Test Effects
<!--
MochiKit is dual-licensed software. It is available under the terms of the
MIT License, or the Academic Free License version 2.1. The full text of
each license is included below.
-->
<!-- Code revised from MochiKit demo code -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h3 {
clear: both;
}
.example {
font-size: 1.0em;
float: left;
margin-right: 10px;
margin-bottom: 10px;
width: 112px;
height: 112px;
border: 4px solid #669;
background-color: #ccf;
text-align: center;
padding: 1em 0.2em 0.2em 0.2em;
}
.demo {
clear: both;
}
</style>
<script src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js" type="text/javascript"></script>
<script src="MochiKit-1.4.2/lib/MochiKit/Position.js" type="text/javascript"></script>
<script src="MochiKit-1.4.2/lib/MochiKit/Visual.js" type="text/javascript"></script>
<script type="text/javascript">
function showEffect() {
f = document.forms[0];
v = f["effect"].value;
if (v.substring(0, 1) == "+") {
v = "MochiKit.Visual.toggle("demo-all","" + v.substring(1) + """;
} else {
v = "MochiKit.Visual." + v + "("demo-all"";
}
if (f["slow"].checked) {
v += ",{duration:4}";
}
v += ")";
var v = eval(v);
}
function resetBox() {
e = MochiKit.DOM.getElement("demo-all");
MochiKit.Visual.appear(e);
MochiKit.Style.setStyle(e, {});
}
</script>
</head>
<body>
<h3>Here are demos of all combination effects:</h3>
<div class="demo">
<div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear("demo-effect-fade")">
<span>Click for Visual.appear demo</span>
</div>
<div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)">
<span>Click for Visual.fade demo</span>
</div>
<div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)">
<span>Click for Visual.puff demo</span>
</div>
<div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)">
<span>Click for Visual.blindDown demo</span>
</div>
<div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)">
<span>Click for Visual.blindUp demo</span>
</div>
<div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)">
<span>Click for Visual.switchOff demo</span>
</div>
<div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)">
<span>Click for Visual.slideDown demo</span>
</div>
<div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)">
<span>Click for Visual.slideUp demo</span>
</div>
<div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)">
<span>Click for Visual.dropOut demo</span>
</div>
<div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)">
<span>Click for Visual.shake demo</span>
</div>
<div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)">
<span>Click for Visual.pulsate demo</span>
</div>
<div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)">
<span>Click for Visual.squish demo</span>
</div>
<div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)">
<span>Click for Visual.fold demo</span>
</div>
<div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)">
<span>Click for Visual.grow demo</span>
</div>
<div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)">
<span>Click for Visual.shrink demo</span>
</div>
<div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)">
<span>Click for Visual.Highlight demo</span>
</div>
</div>
<h3>Here are all demos on one single element:</h3>
<div id="demo-all" class="example" onclick="showEffect()">
<span>Click to see the selected effect</span>
</div>
<form action="" style="margin-left:140px;height:150px;">
<fieldset style="border:none;">
<select name="effect" size="1">
<optgroup label="Single effects">
<option value="appear">appear</option>
<option value="fade">fade</option>
<option value="puff">puff</option>
<option value="blindDown">blindDown</option>
<option value="blindUp">blindUp</option>
<option value="slideDown">slideDown</option>
<option value="slideUp">slideUp</option>
<option value="switchOff">switchOff</option>
<option value="dropOut">dropOut</option>
<option value="shake">shake</option>
<option value="pulsate">pulsate</option>
<option value="squish">squish</option>
<option value="fold">fold</option>
<option value="grow">grow</option>
<option value="shrink">shrink</option>
<option value="Highlight">Highlight</option>
</optgroup>
<optgroup label="Toggle effects">
<option value="+appear">appear</option>
<option value="+blind">blind</option>
<option value="+slide">slide</option>
<option value="+size">size</option>
</optgroup>
</select>
<input type="checkbox" name="slow"/> in slow-motion
</fieldset>
<fieldset style="border:none;">
<input type="button" name="show" value="Click to show effect" onclick="showEffect()"/>
<input type="button" name="show" value="Click to reset box" onclick="resetBox()"/>
</fieldset>
</form>
<div class="demo">
<h3>Links to other samples:</h3>
<ul style="float:left;margin-top:0;">
<li><a href="effects_bigslide.html">Big slide effects</a></li>
<li><a href="effects_slide.html">Slide effects</a></li>
<li><a href="effects_blind.html">Blind effects</a></li>
<li><a href="effects_blindslide.html">Blind/Slide effects</a></li>
<li><a href="effects_fadeappear.html">Fade/Appear effects</a></li>
</ul>
<ul style="float:left;margin-top:0">
<li><a href="effects_onload.html">Onload effects</a></li>
<li><a href="effects_scroll.html">Scroll effects</a></li>
<li><a href="effects_grow_shrink.html">Grow/Shrink effects</a></li>
<li><a href="effects_queue.html">Queue effects</a></li>
<li><a href="effects_queue_limit.html">Queue limit effects</a></li>
</ul>
</div>
<div class="demo"/>
</body>
</html>