Simple and Slick Dojo Fisheye Effect

Firstly check out the effect example. Hover over the list in the middle to see the effect. This is called the fisheye effect in dojo and it’s one of my favorites because it’s the easiest to implement. It’s ridiculously easy to implement. I’m going to assume that you know what a basic html page looks like, so in a quick three parts here’s the code:

First the Javascript:

<script type=”text/javascript” src=”includes/dojo/dojo/dojo.js” djConfig=”parseOnLoad: true”></script>

<script type=”text/javascript”>

dojo.require(“dojox.widget.FisheyeLite”);
dojo.addOnLoad(function(){
//make the list items into fisheye items
dojo.query(“li.fish”, dojo.byId(“fishyList”)).forEach(function(n){
new dojox.widget.FisheyeLite({ },n);
});
});
</script>

Next the CSS:

<style type=”text/css”>
@import “includes/dojo/dojo/resources/dojo.css”;
@import “css/dojo_lists.css”;
#fishyList ul {
width:600px;
list-style-type:none;
}
.fisheyeTarget {
font-weight:bold;
font-size:19px;
}
</style>

None of the CSS really matters as far as functionality goes. It does go a long way into making it look a lot slicker.

Now the HTML:

<ul id=”fishyList”>
<li class=”fish”><span class=”fisheyeTarget”>Cody Taylor’s<br><br></span></li>
<li class=”fish”><span class=”fisheyeTarget”>Dojo Javascript <br><br></span></li>
<li class=”fish”><span class=”fisheyeTarget”>Slick FishEye Effect<br><br></span></li>
</ul>

Of course you’ll have to download and put the dojo framework on your webserver and alter the include statements but other than that it’s that simple. You may want to look at the dojo documentation for the dojo.query and forEach functions.

Share

3 Responses to “Simple and Slick Dojo Fisheye Effect”

  • Rodney Reid Says:

    That is really cool. I love browser tricks, thanks.

    I _think_ you can do a similar effect without JavaScript on Safari 4 beta with CSS3 Animations, and on IE 5.5+ with HTML+TIME, but nobody has pulled off the fisheye effect with those yet.

  • Eric Says:

    Hi,

    The example doesn’t seem to be working anymore.

  • Cody Taylor Says:

    @Eric, Thanks for the heads up. It’s fixed.

Leave a Reply