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

Coldfusion and Java
nike air max shoes said: Free shipping buy coach handbags in coach outlet online,save up 76%,[url=http://www.coachhandbags-...... [More]

Coldfusion and Java
coach handbags said: These four pairs are all from Sergio Rossi. And their color is all can match well with your wedding ... [More]

Select Last Number In Access
coach handbags said: These four pairs are all from Sergio Rossi. And their color is all can match well with your wedding ... [More]

Select Last Number In Access
nike air max shoes said: Free shipping buy coach handbags in coach outlet online,save up 76%,[url=http://www.coachhandbags-...... [More]

Unlimited Website Hosting
nike air max shoes said: Free shipping buy coach handbags in coach outlet online,save up 76%,[url=http://www.coachhandbags-...... [More]

Recent Entries

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