Javascript Fisheye Menu

In my previous post i mentioned about a homepage site i had created. In that site i used a fisheye menu. Fisheye menus are a very good way to display many links or icons but still being able to see them. I got the idea from a book call "Designing the user interface" by Ben Schneiderman which is a book i would recomend to anyone.

I thought i would just break down this script so that you can all use them in your websites. They are not only a benefit to Human Computer Interaction, but they also look pretty good.

First of all you need to create the menu.

<div id="fisheye2" class="fisheye">
      <div class="fisheyeContainter">
         <a href="http://www.facebook.com" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/FaceBook-128x128.png" width="128" /><span>Facebook</span></a>
         <a href="http://www.google.co.uk" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/Google-128x128.png" width="128" /><span>Google</span></a>
         <a href="http://www.youtube.com" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/Youtube-128x128.png" width="128" /><span>Youtube</span></a>
</div>
</div>

This is just a series of nested <div> tags.

They we addd the css to make the menu look presentable.

<style type="text/css">
.fisheye{
   text-align: center;
   height: 50px;
   position: relative;
}
a.fisheyeItem
{
   text-align: center;
   color: #000;
   font-weight: bold;
   text-decoration: none;
   width: 40px;
   position: absolute;
   display: block;
   top: 0;
}
a.fisheyeItem2
{
   text-align: center;
   color: #000;
   font-weight: bold;
   text-decoration: none;
   width: 40px;
   position: absolute;
   display: block;
   bottom: 0;
}
.fisheyeItem img
{
   border: none;
   margin: 0 auto 5px auto;
   width: 100%;
}
.fisheyeItem2 img
{
   border: none;
   margin: 5px auto 0 auto;
   width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
   display: none;
   positon: absolute;
}
.fisheyeContainter
{
   height: 50px;
   width: 500px;
   left: 0px;
   position: absolute;
}
#fisheye2
{
   position: absolute;
   width: 98%;
   bottom: 0px;
}
</style>

Now the menu looks presentable we need to add a script at the bottom of the page that will call functions in a javascript file when users hover near the icons.

<script type="text/javascript">
   
   $(document).ready(
      function()
      {
         $('#fisheye2').Fisheye(
            {
               maxWidth: 70,
               items: 'a',
               itemsText: 'span',
               container: '.fisheyeContainter',
               itemWidth: 60,
               proximity: 90,
               alignment : 'left',
               valign: 'center',
               halign : 'center'
            }
         )
      }
   );

</script>

Now all we need to do is include the two javascript files at the top of the page. This script can be used in any language as it is javascript based, all you need to do is include the two javescript files.

<script type="text/javascript" src="/ColdfusionSamples/Fisheye/js/jquery.js"></script>
<script type="text/javascript" src="/ColdfusionSamples/Fisheye/js/interface.js"></script>

Here is an example of the finished script

Horizontal Loop

Many of you may have had a time when you have wanted to output from a query in a grid format.

This script will enable you to loop through the results horizontally, across the screen

Here is a demo of the result

[More]

Overlaying 2 Images

In this tutorial i will show you how to over lay one image onto another using coldfusions built-in image functions, this method can be used to add a walter mark to an image.

[More]

Hashing Passwords

After being criticized for my last post about 2 way encryption of passwords i have decided to write a post about hashing your passwords. As was pointed out in my last post this is a more secure way of keeping your password data safe.

[More]

Encrypting Passwords

In this tutorial i will show you how you can easily encrypt and decrypt passwords using coldfusion

[More]

Coldfusion Login Script

Here i am going to show you how to make a login script that will check users against a database for the user name and password.

First of all we will need to make a login form, this is just going to be a basic form with a user name field, password field and a login button.

[More]

Simple Contact Form With JavaScript Validation

This is a very simple contact form script with JavaScript validation.

This form has three fields name, email address and message but can be easily modified with new fields.

Here is an example of the contact form

I hope to see some examples of what you do with this script. Like Mark Ireland has done with my previous Simple JavaScript Calculator script.

[More]

Simple JavaScript Calculator

Here i have a very simple script for a JavaScript calculator

It is a pretty basic script that uses a text field to create the equation with the buttons and then equates the equation to show you the answer.

There is also a Memory Store (MS), Memory Recall (MR), and a Memory Clear (MC). For those of you that may require it

[More]

CF8 Rich Text Editor

Many of you may not know that CF8 has a built-in Rich Text Editor.

It is actually very easy to use this script, all you need is to have a cfform with a cftextarea.

[More]

CAPTCHA Script

In this tutorial i will show you have to create and implement a CAPTCHA script into a form to validate that a person is using you site rather than a bot. This is a good script that can be used on forums and contact forms to eliminate SPAM on your site.

[More]

More Entries

Archives By Subject

Advertising (4) [RSS]
Blog Design (1) [RSS]
CFProject Scripts (2) [RSS]
Coldfusion Charts (3) [RSS]
Coldfusion Functions (5) [RSS]
Coldfusion Overview (1) [RSS]
Coldfusion Tutorials (16) [RSS]
For Sale (2) [RSS]
Image Manipulation (1) [RSS]
Java (1) [RSS]
JavaScript (4) [RSS]
PHP (1) [RSS]
Railo (4) [RSS]
SQL (1) [RSS]
Useful Tools (3) [RSS]

Recent Comments

Simple Coldfusion Upload Script
Alban said: Here is the error I get on the cffile line: String index out of range: -1 [More]

Coldfusion 8 Functions
Mark said: Can Cold Fusion do math functions similar to say Excel? I need to make several calculations, and if ... [More]

BlogCFC on Railo
iphone clone said: Thanks for sharing [More]

Coldfusion Protx VSP Form Integration Kit
confinedspace said: @Dom: Cheers for that - helped me out. Just one thing to note, I would add "all" as a thir... [More]

Coldfusion to PHP?
Jonny Shaw said: PHP is very similar to most other OOP languages, which i am quite familiar with, so it wasn't really... [More]

Recent Entries

No recent entries.
ColdFusion Blog | ColdFusion Hosting | ColdFusion Q & A