+++ /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