euDock 2.0.06 JScript Emulation of Dock style MAC OS X bar

Download euDock 2.0.06 (tutorial-demos) project - 450.68 KB

Live Demo

Introduction

euDock is a JavaScript emulation of the Dock style MAC OS X bar.
It uses PNG, GIF, JPG (or other Web type) images, objects and transformation functions. PNG images in Internet Explorer are supported.

Using the Code

euDock has a lot of features described in the tutorial.

In the following code, I show the basic configuration of euDock bar.

Place the following inside your <HEAD></HEAD> HTML tag:

<HEAD>
   <script language="JavaScript1.3" src="js/euDock.2.0.js"></script>
   <script language="JavaScript1.3" src="js/euDock.Image.js"></script>
</HEAD>

Later, place everywhere:

<script>
   euEnv.imageBasePath="js/";

   var dock = new euDock();
   
   dock.setBar({
        left      :{euImage:{image:"barImages/dockBg-l.png"}},
        horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
        right     :{euImage:{image:"barImages/dockBg-r.png"}}
       });
   
   dock.setIconsOffset(2);
           
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://www.codeproject.com"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://www.codeproject.com"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://www.codeproject.com"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://www.codeproject.com"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});
</script>

I suggest you download the tutorial/demos and take a look at the features. I can't explain everything here.

History

Ver 2.0.06 (17 June 2007) features

BUG FIX: euDock will SURVIVE on Safari... (I don't have enough money for a Mac)
Added delete Icon feature
Added (optional) Target Link Location
Now Cursor Pointer will change
[Examples]

Ver 2.0.04 (9 November 2006) features

BUG FIX: euDock can (now) SURVIVE with all kinds of prototype scripts
Added euCENTER align feature to euLabel object
Added a NEW tutorial page
[EXTERNAL FUNCTIONS EXAMPLES]

Ver 2.0.02 (12 July 2006) features

Added new generic align functions (euCENTER euHORIZONTAL euVERTICAL)
[ALIGN EXAMPLES]

Ver 2.0 (6 July 2006) features

Various Effect objects
Improved performances with PNG images on Internet Explorer
Programmable zooming functions
New tutorial and examples

Ver 2.00a (28 June 2006) features

Multiple docking system
Programmable objects
Fading PNGs in Explorer

Ver 1.06 features

Hook and align to a fixed position
Some bug fixes

Ver 1.04 features

Hook and align to HTML objects

Ver 1.02 features

Screen align: top, bottom, left, right
Resizing images
Link to external events
Fading images

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)

About the Author

Pier...

Web Developer

Italy

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Submenus

PajeroExceed

9:42 26 Jan '10

I've spend ages trying to find a dock-menu example with dock-submenus that I can use for my website. I have not been able to find one yet but as this one looks fantastic and has a forum, I thought I ask the question... Is it possible to create a dock submenu, that, when you click on a dock-menu item, a dock-submenu with only pictures will appear from the menu item? Not sure if it can be done. If not possible, I can stop looking..... Laugh | :laugh:

Re: Submenus

Pier...

2:45 27 Jan '10

Mmmmm... Good Question. Teoretically It is possible (You need only to create a submenu object, something similar to the Ghost object). The only problem is that I've no time to follow euDock Anymore and add new features. I'm Sorry...
Sign In·View Thread·Permalink

Re: Submenus

PajeroExceed

3:55 27 Jan '10

Not to worry. Do you mind me giving it a go by using your code as my template? I'm not very experienced in Java at all but I might figure it out. Do you have any pointers
Sign In·View Thread·Permalink

Re: Submenus

Pier...

8:18 27 Jan '10

You can use it as template if you want. And I can Give You some advice to make it possible. Or help You to write some javascript code. The problem is that I've no time to debug it. (My only computer is a Linux Machine, I cannot try it with IE 7-8-9)
Sign In·View Thread·Permalink

Re: Submenus

PajeroExceed

9:57 27 Jan '10

That sounds great. I will start this weekend. Thanks for the offer. I'm sure I will need some assistance especially in the beginning.
Sign In·View Thread·Permalink

Compatibility with IE 8

Member 991635

0:34 29 Sep '09

Hi It would be nice if you could do some tests to check compatibility with IE8. Best regards
Sign In·View Thread·Permalink

Re: Compatibility with IE 8

Pier...

2:28 1 Oct '09

Mmmmm... Currently I've only Linux machines available. I'm sorry.
Sign In·View Thread·Permalink

Re: Compatibility with IE 8

Member 991635

4:45 7 Oct '09

Hi To bad, I'm getting some problems with IE8. I'm using two pictures, one for static and the other one for hover effect when passing the mouse. In IE8 the picture for static don't appears. It would be nice if you could get a Virtual Machine with Windows. Regards
Sign In·View Thread·Permalink

Re: Compatibility with IE 8

Pier...

22:48 7 Oct '09

I've tried at last with an IE8 installation. http://eudock.jules.it Works perfectly. It has anyway static images (I.E. the icon with GNU). Have you tried it? Have you tried Your site with another Browser? If it not works, try to send me your sources or a Link to your site.
Sign In·View Thread·Permalink

Re: Compatibility with IE 8

Member 991635

1:26 8 Oct '09

Hi

I made tests on different machines and in one of them I got no problems.
Among the problems detected (there are no errors from the browser), when we hover the mouse in the menu the CPU goes to 80-90% and it's slow to react.
Then I realize that this was a security problem on IE8.
If I define my site as safe, everything works like it should be.
If anyone complains about IE8, this could be the answer.

Thanks again

Re: Compatibility with IE 8

Riepi

3:08 22 Feb '10

Hello, I also got into some trouble with IE8. I figured out when there is a DoctypeDeclaration like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

IE 8 only shows the hover image but not the initial one.

It only works in Quirksmode, but for cross-browser-compatibility of some other components i need to use strict/standard mode.

Is there any workaround?

Riepi

Re: Compatibility with IE 8

Pier...

23:41 24 Feb '10

Unfortunately I don't touch javascript/HTML code since 2007 and I don't know Quirksmode or similar. I've also problems to debug it under windows/IE8. So, currently there are no workarounds available. I'm Sorry...
Sign In·View Thread·Permalink

Re: Compatibility with IE 8

Riepi

1:09 26 Feb '10

What a pity. Thank you however. Here some information about Quirksmode: http://www.quirksmode.org/css/quirksmode.html Riepi
Sign In·View Thread·Permalink

Changing menu without postback

Member 991635

2:54 31 Oct '08

Hi Pier

Finally I find you in the Web. First of all, very nice work, it's just 'fantastico'.

I'm using eudock has the main menu to my page asp.net application, however depending on login I want to change menu icons according to the user (change icons, or just disabling the ones I don't need). I think this should be possible using postback but I would like to do it without postback in my page.

I've been using your script like this:

<script type="text/javascript" language="javascript">
var dock = new euDock();
var ic_fichas;
var ic_relatorios;
var ic_prevencao;
var ic_login;

// I call this function in Body onLoad event
// Args has a list of icons I want to show

function eudock_load(args) {
...
// I check every icon according to my list
if (check_icon(args,"login") == true) {
// I add menu icon
ic_login = dock.addIcon( ...
}
if (check_icon(args,"fichas") == true) {
// I add menu icon
ic_fichas = dock.addIcon( ...
}
if (check_icon(args,"relatorios") == true) {
// I add menu icon
ic_relatorios = dock.addIcon( ...
}
...
}

// This works ok, but if I try to delete an icon, I got an error

function test_delete_icon() {
dock.delIcon(ic_login);
// Error says: 'dock' is a null or not an object
}
</script>

Can you tell me the best way to this without using postbacks to change Eudock menu.

Best regards
Quim

Re: Changing menu without postback

Member 991635

5:40 31 Oct '08

Hi Pier. Some times we only find a solution afer we post the problem. It's working already, for same how I got a problem with Ajax that's solved already. I'm deleting all icons and create new ones without any problem. Best regards Quim
Sign In·View Thread·Permalink

Re: Changing menu without postback

Pier...

22:34 2 Nov '08

Ok, Thanks... If You find other problems you can e-mail me to: eudock@libero.it
Sign In·View Thread·Permalink

Trouble using labels

Jordan Van Schyndel

10:41 21 Jul '08

Hi Pier,
Great script... has many more features than any other out there. I'm trying to use labels and hitting a roadblock. My labeled icons do not appear and I receive the following error:

window[ii] is not a constructor

http://127.0.0.1:8000/window/eudock2.0/js/euDock.2.0.js

Line 862

Here is my addIcon() call:

dock.addIcon(new Array({
        euLabel: {
            object: {
                euImage: {
                    image: "eudock2.0/iconsEuDock/cube.png"
                }
            },
            txt: "some text",
            style: "text-align : center; border : 5px dashed #9Fb6b6;",
            anchor: euDOWN,
            offsetX: 0,
            offsetY: 0
        }
    }), {
        link: "http://www.google.ca"
    });

Can you see anything on first glance?

Re: Trouble using labels

Pier...

2:13 22 Jul '08

Hi Jordan Mmmm... It seems that you don't have: <script language="JavaScript1.3" src="eudock2.0/js/euDock.Label.js"></script> In the header of your HTML page. It is possible? Every Feature is a separate object script. Cheers... Pier...
Sign In·View Thread·Permalink

Re: Trouble using labels

Jordan Van Schyndel

3:26 22 Jul '08

Pier, Thank you so much for your quick response. I looked at it again with un-tired eyes this morning and realized that that was exactly the problem... my script path was incorrect. I was just about to post the answer but you beat me to it! Thanks again for the great script. Keep up the great work.
Sign In·View Thread·Permalink

Re: Trouble using labels

Pier...

3:56 22 Jul '08

Wooo!!! Thanks!!!
Sign In·View Thread·Permalink

This is possible in Windows Forms .net ?

joaoalbertofn

4:25 10 Oct '07

Hi. I love this effect. Really impressive. Somebody knows an implementation of this in windows forms (.net framework) ??
Sign In·View Thread·Permalink	1.00/5 (1 vote)

New Link Target in version 2.0.0.6

Mynetguy

8:40 20 Jun '07

Hello there, I could not find a sample on how to implement the new optional targets you were referring to. Could you post a sample or just a snippett? Thanks and great job!
Sign In·View Thread·Permalink

Re: New Link Target in version 2.0.0.6

Pier...

11:13 20 Jun '07

Try This. http://eudock.jules.it/eudock2.0/index_frames.html[^] You can also specify an unknown Frame; In this case another browse window is opened... Regards...
Sign In·View Thread·Permalink

in asp.net how i generate clik event for enery image in the dock

ram krishna pattnayak

4:24 6 Jun '07

it is so cute
i use u,r dock in my asp.net application,but i face problem when i want to generate a function for every click in the image button in the dock,when i use link to another page it work ,but when i call a function for the same page,it not work,and the dock disappear and give java script error.i use this code:

dock_5.addIcon(new Array({euImage:{image:"iconsEuDock/logup1.png"}}),
{mouseClick : function(x,y){alert("This is an Alert Window"););

this.mouseClick = function(x,y){
if (this.isAbsoluteInside(x,y)){
if (this.link)
{
if (this.target)
top.frames[this.target].location.href=this.link;
else
document.location.href=this.link;
}
else if (this.mouseInsideClick)
this.mouseInsideClick(x,y);
}
};

Ram Krishna Pattnayak
Software Developer(SDS)
Sun-Dew Solutions Pvt.Ltd
www.sundewsolutions.com
kolkata