Click here to Skip to main content
15,867,330 members
Articles / Web Development / HTML

euDock 2.0.06 JScript Emulation of Dock style MAC OS X bar

Rate me:
Please Sign up or sign in to vote.
4.89/5 (38 votes)
19 Jun 2007LGPL31 min read 150.5K   1.1K   60   75
An Open Source (customizable) JavaScript Emulation of Dock style MAC OS X bar

Live Demo

[on-Line Examples] euDock

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:

HTML
<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:

JavaScript
<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

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)


Written By
Web Developer
Italy Italy
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionnot working in Joomla 3. javascrip issue ? Pin
Member 1233036415-Mar-16 4:10
Member 1233036415-Mar-16 4:10 
GeneralSubmenus Pin
PajeroExceed26-Jan-10 9:42
PajeroExceed26-Jan-10 9:42 
GeneralRe: Submenus Pin
Pier...27-Jan-10 2:45
Pier...27-Jan-10 2:45 
GeneralRe: Submenus Pin
PajeroExceed27-Jan-10 3:55
PajeroExceed27-Jan-10 3:55 
GeneralRe: Submenus Pin
Pier...27-Jan-10 8:18
Pier...27-Jan-10 8:18 
GeneralRe: Submenus Pin
PajeroExceed27-Jan-10 9:57
PajeroExceed27-Jan-10 9:57 
GeneralCompatibility with IE 8 Pin
Member 99163529-Sep-09 0:34
Member 99163529-Sep-09 0:34 
GeneralRe: Compatibility with IE 8 Pin
Pier...1-Oct-09 2:28
Pier...1-Oct-09 2:28 
GeneralRe: Compatibility with IE 8 Pin
Member 9916357-Oct-09 4:45
Member 9916357-Oct-09 4:45 
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
GeneralRe: Compatibility with IE 8 Pin
Pier...7-Oct-09 22:48
Pier...7-Oct-09 22:48 
GeneralRe: Compatibility with IE 8 Pin
Member 9916358-Oct-09 1:26
Member 9916358-Oct-09 1:26 
GeneralRe: Compatibility with IE 8 Pin
Riepi22-Feb-10 3:08
Riepi22-Feb-10 3:08 
GeneralRe: Compatibility with IE 8 Pin
Pier...24-Feb-10 23:41
Pier...24-Feb-10 23:41 
GeneralRe: Compatibility with IE 8 Pin
Riepi26-Feb-10 1:09
Riepi26-Feb-10 1:09 
GeneralChanging menu without postback Pin
Member 99163531-Oct-08 2:54
Member 99163531-Oct-08 2:54 
GeneralRe: Changing menu without postback Pin
Member 99163531-Oct-08 5:40
Member 99163531-Oct-08 5:40 
GeneralRe: Changing menu without postback Pin
Pier...2-Nov-08 22:34
Pier...2-Nov-08 22:34 
QuestionTrouble using labels Pin
Jordan Van Schyndel21-Jul-08 10:41
Jordan Van Schyndel21-Jul-08 10:41 
AnswerRe: Trouble using labels Pin
Pier...22-Jul-08 2:13
Pier...22-Jul-08 2:13 
GeneralRe: Trouble using labels Pin
Jordan Van Schyndel22-Jul-08 3:26
Jordan Van Schyndel22-Jul-08 3:26 
GeneralRe: Trouble using labels Pin
Pier...22-Jul-08 3:56
Pier...22-Jul-08 3:56 
QuestionThis is possible in Windows Forms .net ? Pin
joaoalbertofn10-Oct-07 4:25
joaoalbertofn10-Oct-07 4:25 
GeneralNew Link Target in version 2.0.0.6 Pin
Inspector IT20-Jun-07 8:40
Inspector IT20-Jun-07 8:40 
GeneralRe: New Link Target in version 2.0.0.6 Pin
Pier...20-Jun-07 11:13
Pier...20-Jun-07 11:13 
Generalin asp.net how i generate clik event for enery image in the dock Pin
ram krishna pattnayak6-Jun-07 4:24
ram krishna pattnayak6-Jun-07 4:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.