--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title>
+ <style type="text/css">
+
+ body, html { margin:0; padding:0; width:100%;
+ font-family:Arial,sans-serif;
+ }
+ a { letter-spacing:0.1em; }
+ #list {
+ position:absolute; left:0px; cursor:pointer;
+ }
+ #container { margin:0 auto; width:400px; }
+ #list ul {
+ width:175px;
+ list-style-type:none;
+ }
+ .fisheyeTarget {
+ font-weight:bold;
+ font-size:19px;
+ }
+ #container li {
+ text-align:right;
+ padding-bottom:12px;
+ }
+ .ilk {
+ border-top:1px solid #999;
+ color:#666;
+ font:14px Arial,sans-serif;
+ }
+ #inlineList li {
+ margin-top:20px;
+ margin-bottom:20px;
+ padding:20px;
+ border:2px solid #ededed;
+ display:inline;
+ background:#fff;
+ }
+
+ #lineHeightTest {
+ text-align:center;
+ position:relative;
+ overflow:visible;
+ }
+ span.line {
+ margin:10px;
+ padding:3px;
+ line-height:22px;
+ font:10px Arial,sans-serif;
+ display:block;
+ }
+ .imgBounce {
+ padding:0;
+ width:35px; height:35px;
+ vertical-align:middle;
+ position:relative;
+ top:0;
+ }
+ </style>
+ <script type="text/javascript">
+ var djConfig = { isDebug:true, parseOnLoad:true };
+ </script>
+ <script type="text/javascript" src="../../../dojo/dojo.js"></script>
+ <script type="text/javascript" src="../FisheyeLite.js"></script>
+ <script type="text/javascript">
+ dojo.require("dojo.parser");
+ dojo.require("dojox.widget.FisheyeLite");
+ dojo.addOnLoad(function(){
+
+ // turn li's in this page into fisheye items, presumtiously:
+ dojo.query("li.bounce").forEach(function(n){
+ new dojox.widget.FisheyeLite({ },n);
+ });
+
+ dojo.query("span.line").forEach(function(n){
+ // make a widget from each of the lines in the lineHeightTest
+ new dojox.widget.FisheyeLite({
+ properties: {
+ fontSize:1.75
+ },
+ easeOut: dojox.fx.easing.backInOut,
+ durationOut: 500
+ },n);
+ }).connect("onclick",function(e){
+ // you can still access the onclick of the real node
+ alert(e.target.innerHTML);
+ });
+
+ dojo.query("a").forEach(function(n){
+ // all the anchorhs get a little letter spacing love
+ new dojox.widget.FisheyeLite({
+ properties:{
+ fontSize:1.15,
+ letterSpacing:2.85
+ }
+ },n);
+ // stop anchors from doing _anything_
+ }).connect("onclick",dojo,"stopEvent");
+
+ dojo.query(".imgBounce").forEach(function(n){
+ // all the images need a width and a height (well, not need,
+ // but to scale you do)
+ new dojox.widget.FisheyeLite({
+ properties: {
+ height:1.75,
+ width:1.75
+ }
+ },n);
+ });
+
+ //
+ var vv = 0;
+ var r = dijit.registry.byClass("dojox.widget.FisheyeLite")._hash;
+ for(var l in r){
+ vv++;
+ }
+ // a few in markup, mostly from the query()'ies:
+ console.log("fisheyes on this page: ", vv);
+
+ });
+ </script>
+ </head>
+ <body class="tundra">
+ <div id="container">
+
+ <div id="list">
+ <ul>
+ <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
+ <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
+ <li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li>
+ <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
+ <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
+ <li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li>
+ <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
+ <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
+ </ul>
+ </div>
+
+ <h2>A paragraph: (with links)</h2>
+
+ <p>
+ Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+ semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+ Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+ facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
+ semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
+ magna. Sed vitae risus.
+ </p>
+
+ <h3>read the fine print:</h3>
+
+ <p>
+ <input type="button" onclick="dijit.byId('l1').show()" value="show first" />
+ <input type="button" onclick="dijit.byId('l1').hide()" value="hide first" />
+ <input type="button" onclick="dijit.byId('l3').show()" value="show third" />
+ <input type="button" onclick="dijit.byId('l3').hide()" value="hide third" />
+ </p>
+
+ <div id="lineHeightTest">
+ <span id="l1" class="line">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</span>
+ <span class="line">imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer</span>
+ <span id="l3" class="line">lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean</span>
+ <span class="line">id mi in massa bibendum suscipit. Integer eros. Nullam suscipit</span>
+ <span id="l5" class="line">mauris. In pellentesque. Mauris ipsum est, pharetra semper,</span>
+ <span class="line">pharetra in, viverra quis, tellus. Etiam purus.</span>
+ </div>
+
+ <p>
+ Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+ semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+ Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+ facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
+ semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
+ magna. Sed vitae risus.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+ semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+ Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+ facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
+ semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
+ magna. Sed vitae risus.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+ semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+ Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+ facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
+ semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
+ magna. Sed vitae risus.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+ semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+ Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+ facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
+ semper iaculis. Sed molestie tortor at ipsum.
+ </p>
+ <h3>another list: (no target, or ilk)</h3>
+ <div style="height:125px; position:relative;">
+ <div style="position:absolute; width:600px;">
+ <ul id="inlineList">
+ <li class="bounce">Foo</li>
+ <li class="bounce">Bar</li>
+ <li class="bounce">Baz</li>
+ <li class="bounce">Bam</li>
+ </ul>
+ </div>
+ </div>
+
+ <h3>oh right, Images:</h3>
+
+ <div style="position:relative; height:60px;"><div style="position:absolute">
+ <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
+ <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/>
+ <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/>
+ <img src="images/fisheye_4.png" class="imgBounce" />
+ <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/>
+ <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/>
+ <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
+ </div></div>
+
+ <div style="position:relative; float:left; width:1px; left:-75px; top:0;">
+ <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/><br>
+ <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br>
+ <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br>
+ <img src="images/fisheye_4.png" class="imgBounce" /><br>
+ <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br>
+ <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br>
+ <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
+ </div>
+
+ <p dojoType="dojox.widget.FisheyeLite"
+ properties="{ padding:1.55 }"
+ style="padding:12px; text-align:justify;">
+
+ Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+ imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
+ lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
+ id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
+ mauris. In pellentesque. Mauris ipsum est, pharetra semper,
+ pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
+ tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
+ elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
+ ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
+ pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
+ massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
+ nec est. Aenean id risus blandit tortor pharetra congue.
+ Suspendisse pulvinar.
+ </p>
+
+ <p>the end</p>
+
+ </div>
+ </body>
+</html>
projects / eow / blobdiff