Next Prev

Dojo Fisheye

A fisheye effect based on Dojo library.
It's easy to setup once you learn a few things about djConfig parameters.
Downside of this script is the size of the dojo widgets javascripts, if you plan on having this dojo effect only
analyze the code and try to get rid of some .js files.

To setup this demo on your website, you need the 'src' directory from dojotoolkit.org
Also this effect seems to load pretty slow on some computers.

Web 2.0 Box Generator

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.ajaxdaddy.com/web20/dojo/fisheye/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<title>FisheyeList Widget Demo</title>

<style type="text/css">
 img, div { behavior: url(css/iepngfix.htc) }
</style>
<script type="text/javascript">
	var djConfig = {
    isDebug: true, 
    baseScriptUri: "../"
  };
</script>
<script type="text/javascript" src="javascript/dojo.js"></script>

<style type="text/css">
.dojoHtmlFisheyeListBar {
	margin: 0 auto;
	text-align: center;
}
.outerbar {
	text-align: center;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
}
.page {
	padding: 60px 20px 20px 20px;
}

</style>
</head>
<body>

<div class="outerbar">

<script type="text/javascript">
	dojo.require("dojo.widget.*");
</script>

<script>
	function load_app(id){
		alert('Icon '+id+' was clicked');
	}
</script>

<center>
<div dojoType="FisheyeList"
	itemWidth="50" itemHeight="50"
	itemMaxWidth="200" itemMaxHeight="200"
	orientation="horizontal"
	effectUnits="2"
	itemPadding="10"
	attachEdge="top"
	labelEdge="bottom"
	enableCrappySvgSupport="false"
>

	<div dojoType="FisheyeListItem" onClick="load_app(1);" 
		iconsrc="images/icon_browser.png" caption="Web Browser">
	</div>

	<div dojoType="FisheyeListItem" onClick="load_app(2);"
		iconsrc="images/icon_calendar.png" caption="Calendar">
	</div>

	<div dojoType="FisheyeListItem" onClick="load_app(3);"
		iconsrc="images/icon_email.png" caption="Email">
	</div>

	<div dojoType="FisheyeListItem" onClick="load_app(4);"
		iconsrc="images/icon_texteditor.png" caption="Text Editor">
	</div>

	<div dojoType="FisheyeListItem" onClick="load_app(5);"
		iconsrc="images/icon_update.png" caption="Software Update">
	</div>

	<div dojoType="FisheyeListItem" onClick="load_app(6);"
		iconsrc="images/icon_users.png" caption="Users" >
	</div>
</div>

</div>

<div class="page">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna.</p>
</div>
</center>

</body>
</html>

Comment on this example

Aniruddha

2010-01-31 20:59:28

nice menu list...

Ouster

2009-10-25 01:00:39

Woah ! this is 100% Like iMac ! GJ

Gijs

2009-03-17 13:39:21

Nice example tnx :)

Waldbroel

2009-02-18 08:39:44

Thats really cool effect. Better as Flash!

Study Guitar Online

2008-10-19 18:37:58

This is really neat

Devyn

2008-05-27 20:06:56

Slooooow...

Xudas

2007-12-27 15:57:27

If you have problem seeing it in IE6 (internet explorer 6) maybe you should download IE7 the newer version, I see it perfectly find... :) IE7 Rules

Vimal

2007-10-17 22:14:32

How to use dojo in .net

Vimal

2007-10-17 22:14:25

How to use dojo in .net

Maria

2007-09-25 09:29:51

hardly I am learning to use dojo but I want to implement it in .net but I have errors and not so that FATAL exception raised: Could not load 'dojo.debug'; last tried '__package__.js' Validation (XHTML 1.0 Transitional): Element 'script' is missing required attribute 'type'. somebody podria to help me

Sam Stanley

2007-08-19 20:31:12

This comment box is confusing, i believe it submitted but i dont see my posted comment, i still see this comment box and a submit button.

Sam Stanley

2007-08-19 20:29:45

This demo does not do anything in Firefox 2.0

Pradeep

2007-07-10 13:02:39

good, but when i try to click the next icon third icon is enlarging .for clicking the next icon i have to move the mouse slowly

Meysam

2007-07-06 08:58:53

looks fine but i've seen better scripts

Misha

2007-06-29 22:01:50

looks fine but i've seen better scripts

John

2007-06-29 21:59:23

this demo is not working in IE6 :(

Iulius

2007-06-27 11:14:29

COOL

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Dojo Fisheye

Comment on this example