Click here to Skip to main content
14,270,872 members

euDock 2.0.06 JScript Emulation of Dock style MAC OS X bar

Rate this:
4.89 (38 votes)
Please Sign up or sign in to vote.
4.89 (38 votes)
19 Jun 2007LGPL3
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:

<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

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)

Share

About the Author

Pier...
Web Developer
Italy Italy
No Biography provided

Comments and Discussions

 
GeneralRequest for label Pin
Peter.Chan10-Jul-06 22:54
memberPeter.Chan10-Jul-06 22:54 
GeneralRe: Request for label Pin
Pier...11-Jul-06 2:21
memberPier...11-Jul-06 2:21 
GeneralRe: Request for label Pin
Peter.Chan11-Jul-06 5:59
memberPeter.Chan11-Jul-06 5:59 
GeneralRe: Request for label Pin
Pier...11-Jul-06 6:26
memberPier...11-Jul-06 6:26 
Generalopen in new window ( or tab) Pin
anga16-Jun-06 3:21
memberanga16-Jun-06 3:21 
GeneralRe: open in new window ( or tab) [modified] Pin
Pier...16-Jun-06 4:57
memberPier...16-Jun-06 4:57 
GeneralRe: open in new window ( or tab) ANOTHER EXAMPLE [modified] Pin
Pier...16-Jun-06 5:04
memberPier...16-Jun-06 5:04 
GeneralChanged to support multiple docks [modified] Pin
dherbe6-Jun-06 2:06
memberdherbe6-Jun-06 2:06 
This euDock is really cool, but I really needed multiple dock instances.
Basically what I have changed was creating a class for the Dock and have it control all images in that instance. Many functions that were isolated are now part of the Dock object, I also made some minor changes to some function's names.

Here is a bit of javascript of using this class:
<br />
var dock1 = new euBarDef("images/dockBg-l.png","images/dockBg-c-o.gif","images/dockBg-r.png",1,0);<br />
<br />
dock1.addEuImg("iconsEuDock/euDock-red.png" , "link='http://spazioinwind.iol.it/piercingx'");<br />
dock1.addEuImg("iconsEuDock/E.png"          , "link='http://spazioinwind.iol.it/piercingx/anim'");<br />
dock1.addEuImg("iconsEuDock/c.png"          , "link='http://EuDock.jules.it'");<br />
dock1.addEuImg("iconsEuDock/euDock-red.png" , "link='http://spazioinwind.iol.it/piercingx/anim'");<br />
dock1.Render();<br />
<br />
var dock2 = new euBarDef("images/dockBg-l.png","images/dockBg-c-o.gif","images/dockBg-r.png",1,0);<br />
<br />
dock2.addEuImg("iconsEuDock/u.png"          , "link='http://EuDock.jules.it'");<br />
dock2.addEuImg("iconsEuDock/D.png"          , "link='http://spazioinwind.iol.it/piercingx'");<br />
dock2.addEuImg("iconsEuDock/k.png"          , "link='http://spazioinwind.iol.it/piercingx'");<br />
dock2.addEuImg("iconsEuDock/euDock-red.png" , "link='http://spazioinwind.iol.it/piercingx/anim'");<br />
dock2.setAlign('Top');<br />
dock2.Render();<br />
<br />
window.onresize = euDock_OnResize;<br />
window.onscroll = euDock_OnScroll;<br />


This window.remove is actually onresize and onscroll events

Thanks for the original article.
Here is the javascrip file:

<br />
var TimEutID=null;<br />
var euDocks = new Array();<br />
<br />
var euTimeOver = 20;<br />
var euTimeBar  = 20;<br />
<br />
var bkEupOnScroll = window.onscroll;<br />
var bkEupOnResize = window.onresize;<br />
<br />
function euDock_OnResize(event){ for(var p in euDocks){ euDocks[p].OnResize(event); } }<br />
function euDock_OnScroll(event){ for(var p in euDocks){ euDocks[p].OnScroll(event); } }<br />
<br />
function euBarDef(leftOrUpperImageUrl,centerImageUrl,rightOrBottomImageUrl,offsEutImages,offsEutBar){<br />
    this.Images = new Array();<br />
    //member variables<br />
    var TimEutIDScroll=null;<br />
    var dockAlign="bottom";<br />
    var euScrOfX=0; var euScrOfY=2000; var euFrameWidth=0; var euFrameHeight=0;<br />
    //Docking members<br />
    var euBoolHookPos = false; var euHookPosX = 0; var euHookPosY = 0; var euIdObjHook = null; var euIdObjHookPos = null;<br />
<br />
    //properties<br />
    this.LeftOrUpperImage=null;<br />
    this.CenterImage=null<br />
    this.RightOrBottomImage=null;<br />
    this.ID = 'Dock_' + TotalDocks();<br />
<br />
    if(typeof(offsEutBar)!='undefined') this.euBarOffsEut = offsEutBar; else this.euBarOffsEut=0;<br />
    if(typeof(offsEutImages)!='undefined') this.euImagesOffsEut = offsEutImages; else this.euBarOffsEut=0;<br />
    <br />
    this.Initialize = function(){<br />
        if(typeof(euDocks[this.ID])=='undefined'){<br />
            var div =   "<img src='"+leftOrUpperImageUrl+"' id='iLT" + this.ID +"' border='0' "+<br />
                        "style=\"position: absolute; top: -500px; left:-500px; z-index:11;\" >"+<br />
                        "<img src='"+centerImageUrl+"' id='iC" + this.ID +"' border='0' "+<br />
                        "style=\"position: absolute; top: -500px; left:-500px; z-index:10;\" >"+<br />
                        "<img src='"+rightOrBottomImageUrl+"' id='iRB" + this.ID +"' border='0' "+<br />
                        "style=\"position: absolute; top: -500px; left:-500px; z-index:11;\" >";<br />
            document.write(div);<br />
        }else{<br />
            this.LeftOrUpperImage.src = leftOrUpperImageUrl;<br />
            this.CenterImage.src  = centerImageUrl;<br />
            this.RightOrBottomImage.src = rightOrBottomImageUrl;<br />
        }<br />
        this.LeftOrUpperImage = document.getElementById("iLT" + this.ID);<br />
        this.CenterImage = document.getElementById("iC" + this.ID);<br />
        this.RightOrBottomImage = document.getElementById("iRB" + this.ID);<br />
        this.redefineParameters();<br />
        euDocks[this.ID] = this;<br />
    }<br />
<br />
    this.dockSteps = new Array(0.3,0.4,0.5,0.6,0.7,0.8,0.9,1);<br />
    this.setDockSteps = function(array){ this.dockSteps = array; };<br />
    this.getDockSteps = function(){ return this.dockSteps; };<br />
<br />
    this.setAlign = function(align){ dockAlign=align.toLowerCase(); };<br />
    this.getAlign = function(){ return dockAlign; };<br />
<br />
    this.redefineParameters = function(){<br />
        if(TimEutIDScroll!=null) clearTimeout(TimEutIDScroll);<br />
        TimEutIDScroll = window.setTimeout('euDocks["' + this.ID + '"].euAdjScroll(5);',20);<br />
        return true;<br />
    };<br />
        <br />
    this.OnResize = function(event){ if(bkEupOnResize)bkEupOnResize(event); this.redefineParameters(); };<br />
    this.OnScroll = function(event,id){ if(bkEupOnScroll)bkEupOnScroll(event); this.redefineParameters(); };<br />
<br />
    this.euIdObjTop = function(euObj){<br />
        var ret = euObj.offsetTop;<br />
        while ((euObj = euObj.offsetParent)!=null) ret += euObj.offsetTop;<br />
        return ret;<br />
    };<br />
<br />
    this.euIdObjLeft = function(euObj){<br />
        var ret = euObj.offsetLeft;<br />
        while ((euObj = euObj.offsetParent)!=null) ret += euObj.offsetLeft;<br />
        return ret;<br />
    };<br />
<br />
    this.Render = function(){<br />
        var dimTot = 0;<br />
        var pix = 0;<br />
        var centerX = 0;<br />
        var centerY = 0;<br />
<br />
	    if (euBoolHookPos){ centerX = euHookPosX; centerY = euHookPosX;<br />
	    }else if (euIdObjHook!=null){<br />
            objTop  = this.euIdObjTop(euIdObjHook);<br />
            objleft = this.euIdObjLeft(euIdObjHook);<br />
            if (euIdObjHookPos.indexOf('bottom')!=-1){ centerX = objleft + (euIdObjHook.offsetWidth/2); centerY = objTop + euIdObjHook.offsetHeight;<br />
            }else if (euIdObjHookPos.indexOf('top')!=-1){ centerX = objleft + (euIdObjHook.offsetWidth/2); centerY = objTop; <br />
            }else if (euIdObjHookPos.indexOf('left')!=-1){ centerX = objleft; centerY = objTop + (euIdObjHook.offsetHeight/2);<br />
            }else if (euIdObjHookPos.indexOf('right')!=-1){ centerX = objleft + euIdObjHook.offsetWidth; centerY = objTop + (euIdObjHook.offsetHeight/2);<br />
            }<br />
        }else{<br />
            if(dockAlign.indexOf('bottom')!=-1){ centerX = euScrOfX+(euFrameWidth/2); centerY = euScrOfY+euFrameHeight;<br />
            }else if(dockAlign.indexOf('top')!=-1){ centerX = euScrOfX+(euFrameWidth/2); centerY = euScrOfY;<br />
            }else if(dockAlign.indexOf('left')!=-1){ centerX = euScrOfX; centerY = euScrOfY+(euFrameHeight/2);<br />
            }else if(dockAlign.indexOf('right')!=-1){ centerX = euScrOfX+euFrameWidth; centerY = euScrOfY+(euFrameHeight/2);<br />
            }<br />
        }<br />
<br />
        // Total width<br />
        if (dockAlign.indexOf('bottom')!=-1||dockAlign.indexOf('top')!=-1){ for (var i = 0 ; i < this.Images.length ; i++) dimTot += this.Images[i].getWidth(); pix = centerX-(dimTot/2); }<br />
        if (dockAlign.indexOf('left')!=-1||dockAlign.indexOf('right')!=-1){ for (var i = 0 ; i < this.Images.length ; i++) dimTot += this.Images[i].getHeight(); pix = centerY-(dimTot/2); }<br />
<br />
        //posiziono le immagini<br />
        var posX = 0;<br />
        var posY = 0;<br />
        for (var i = 0 ; i < this.Images.length ; i++){<br />
            if(dockAlign.indexOf('bottom')!=-1){<br />
                posX = pix;<br />
                posY = centerY-this.Images[i].getHeight()-this.euBarOffsEut-this.euImagesOffsEut;<br />
                pix += this.Images[i].getWidth();<br />
            }else if(dockAlign.indexOf('top')!=-1){<br />
                posX = pix;<br />
                posY = centerY+this.euBarOffsEut+this.euImagesOffsEut;<br />
                pix += this.Images[i].getWidth();<br />
            }else if(dockAlign.indexOf('left')!=-1){<br />
                posX = centerX+this.euBarOffsEut+this.euImagesOffsEut;<br />
                posY = pix;<br />
                pix += this.Images[i].getHeight();<br />
            }else if(dockAlign.indexOf('right')!=-1){<br />
                posX = centerX-this.Images[i].getWidth()-this.euBarOffsEut-this.euImagesOffsEut;<br />
                posY = pix;<br />
                pix += this.Images[i].getHeight();<br />
            }<br />
            this.Images[i].setPos(posX,posY);<br />
        }<br />
        pix-=dimTot;<br />
<br />
        if(euDocks[this.ID]){<br />
            if(dockAlign.indexOf('bottom')!=-1){<br />
<br />
                this.LeftOrUpperImage.style.top = (centerY-this.LeftOrUpperImage.height-this.euBarOffsEut)+"px";<br />
                this.LeftOrUpperImage.style.left = (pix-this.LeftOrUpperImage.width)+"px";<br />
<br />
                this.CenterImage.style.top = (centerY-this.CenterImage.height-this.euBarOffsEut)+"px";<br />
                this.CenterImage.style.left = (pix)+"px";<br />
                this.CenterImage.style.width = dimTot+"px";<br />
                this.CenterImage.style.height = this.LeftOrUpperImage.height+"px";<br />
<br />
                this.RightOrBottomImage.style.top = (centerY-this.RightOrBottomImage.height-this.euBarOffsEut)+"px";<br />
                this.RightOrBottomImage.style.left = (pix+dimTot)+"px";<br />
<br />
            }else if(dockAlign.indexOf('top')!=-1){<br />
<br />
                this.LeftOrUpperImage.style.top = (centerY+this.euBarOffsEut)+"px";<br />
                this.LeftOrUpperImage.style.left = (pix-this.LeftOrUpperImage.width)+"px";<br />
<br />
                this.CenterImage.style.top = (centerY+this.euBarOffsEut)+"px";<br />
                this.CenterImage.style.left = (pix)+"px";<br />
                this.CenterImage.style.width = dimTot+"px";<br />
                this.CenterImage.style.height = this.LeftOrUpperImage.height+"px";<br />
<br />
                this.RightOrBottomImage.style.top = (centerY+this.euBarOffsEut)+"px";<br />
                this.RightOrBottomImage.style.left = (pix+dimTot)+"px";<br />
<br />
            }else if(dockAlign.indexOf('left')!=-1){<br />
<br />
                this.LeftOrUpperImage.style.top = (pix-this.LeftOrUpperImage.height)+"px";<br />
                this.LeftOrUpperImage.style.left = (centerX+this.euBarOffsEut)+"px";<br />
<br />
                this.CenterImage.style.top = (pix)+"px";<br />
                this.CenterImage.style.left = (centerX+this.euBarOffsEut)+"px";<br />
                this.CenterImage.style.width = this.LeftOrUpperImage.width+"px";<br />
                this.CenterImage.style.height = dimTot+"px";<br />
<br />
                this.RightOrBottomImage.style.top = (pix+dimTot)+"px";<br />
                this.RightOrBottomImage.style.left = (centerX+this.euBarOffsEut)+"px";<br />
<br />
            }else if(dockAlign.indexOf('right')!=-1){<br />
<br />
                this.LeftOrUpperImage.style.top = (pix-this.LeftOrUpperImage.height)+"px";<br />
                this.LeftOrUpperImage.style.left = (centerX-this.CenterImage.width-this.euBarOffsEut)+"px";<br />
<br />
                this.CenterImage.style.top = (pix)+"px";<br />
                this.CenterImage.style.left = (centerX-this.CenterImage.width-this.euBarOffsEut)+"px";<br />
                this.CenterImage.style.width = this.LeftOrUpperImage.width+"px";<br />
                this.CenterImage.style.height = dimTot+"px";<br />
<br />
                this.RightOrBottomImage.style.top = (pix+dimTot)+"px";<br />
                this.RightOrBottomImage.style.left = (centerX-this.CenterImage.width-this.euBarOffsEut)+"px";<br />
            }<br />
<br />
        }<br />
    };<br />
    <br />
    this.euAdjScroll = function(retry){<br />
        var XBkup = euScrOfX; var YBkup = euScrOfY;<br />
        b = false;<br />
        diffX = 0;<br />
        diffY = 0;<br />
<br />
        euDimensioni();<br />
        offsEut();<br />
<br />
        b |= (XBkup != euScrOfX);<br />
        if (XBkup != euScrOfX)<br />
            if ((Math.abs(diffX=((euScrOfX-XBkup)/2)))>0.5) euScrOfX=Math.round(XBkup+diffX);<br />
        b |= (YBkup != euScrOfY);<br />
        if (YBkup != euScrOfY)<br />
            if ((Math.abs(diffY=((euScrOfY-YBkup)/2)))>0.5) euScrOfY=Math.round(YBkup+diffY);<br />
<br />
        this.Render();<br />
<br />
        if(this.TimEutIDScroll!=null) clearTimeout(this.TimEutIDScroll);<br />
        if (!b) retry--;<br />
        if (retry>0) TimEutIDScroll=window.setTimeout('euDocks["'+this.ID+ '"].euAdjScroll('+retry+');',euTimeBar);<br />
    };<br />
<br />
    this.addEuImg = function(src,parameters){<br />
        return this.addEuImgArray(new Array(src),parameters);<br />
    };<br />
<br />
    this.addEuImgArray = function(array,parameters){<br />
        var id = "euID-"+this.Images.length;<br />
        var attr= "";<br />
        var ret=null;<br />
        if ((ret=rEuturnMatch(parameters,"link"))!=null) attr="window.location.href='"+ret+"';";<br />
        if ((ret=rEuturnMatch(parameters,"js"))!=null) attr=ret;<br />
<br />
        var immObj = new immaginEu(this,array,id,attr);<br />
<br />
        if ((ret=rEuturnMatch(parameters,"maxwidth"))!=null) immObj.setWidth(ret);<br />
        if ((ret=rEuturnMatch(parameters,"maxheight"))!=null) immObj.setHeight(ret);<br />
        if ((ret=rEuturnMatch(parameters,"minwidth"))!=null) immObj.setWidth(ret/this.dockSteps[0]);<br />
        if ((ret=rEuturnMatch(parameters,"minheight"))!=null) immObj.setHeight(ret/this.dockSteps[0]);<br />
        if ((ret=rEuturnMatch(parameters,"fadingsteps"))!=null) immObj.setFadingSteps(ret);<br />
        if ((ret=rEuturnMatch(parameters,"fadingtype"))!=null) immObj.setFadingType(ret);<br />
        if ((ret=rEuturnMatch(parameters,"onmouseover"))!=null) immObj.setOnMouseOver(ret);<br />
        if ((ret=rEuturnMatch(parameters,"onmouseout"))!=null) immObj.setOnMouseOut(ret);<br />
        if ((ret=rEuturnMatch(parameters,"onmouseclick"))!=null) immObj.setOnMouseClick(ret);<br />
        if ((ret=rEuturnMatch(parameters,"onchangeimage"))!=null) immObj.setOnChangeImage(ret);<br />
        if ((ret=rEuturnMatch(parameters,"onchangesize"))!=null) immObj.setOnChangeSize(ret);<br />
<br />
        this.Images.push(immObj);<br />
        this.redefineParameters();<br />
        return immObj;<br />
    };<br />
<br />
    /* euDimensioni() standard code fo retrieve width and Height of Screen */<br />
    var euDimensioni = function(){ if( typeof( window.innerWidth ) == 'number' ) { euFrameWidth = window.innerWidth-16; euFrameHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { euFrameWidth = document.documentElement.clientWidth-16; euFrameHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { euFrameWidth = document.body.clientWidth; euFrameHeight = document.body.clientHeight; } };<br />
    var euGetScreenWidth = function(){ euDimensioni(); return euFrameWidth; };<br />
    var euGetScreenHeight = function(){ euDimensioni(); return euFrameHeight; };<br />
    var offsEut = function() { euScrOfY = 0; euScrOfX = 0; if( typeof( window.pageYoffsEut ) == 'number' ) { euScrOfY = window.pageYoffsEut; euScrOfX = window.pageXoffsEut; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { euScrOfY = document.body.scrollTop; euScrOfX = document.body.scrollLeft; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { euScrOfY = document.documentElement.scrollTop; euScrOfX = document.documentElement.scrollLeft; } };<br />
    var euGetScrollX = function(){ offsEut(); return euScrOfX; };<br />
    var euGetScrollY = function(){ offsEut(); return euScrOfY; };<br />
    <br />
    this.DockAtPosition = function(posX,posY){<br />
 	    this.UnDock();<br />
	    euBoolHookPos = true;<br />
	    euHookPosX = posX;<br />
	    euHookPosY = posY;<br />
    };<br />
<br />
    this.Dock = function(idObj,position){<br />
 	    this.UnDock();	<br />
        euIdObjHook    = document.getElementById(idObj);<br />
        euIdObjHookPos = position.toLowerCase();<br />
        redefineParameters();<br />
    };<br />
<br />
    this.UnDock = function (){<br />
        euIdObjHook    = null;<br />
        euIdObjHookPos = null;<br />
	    euBoolHookPos = false;<br />
        redefineParameters();<br />
    };<br />
    <br />
    this.Initialize();<br />
};<br />
<br />
function preloadImages(a) {<br />
  var d=document;<br />
  if(d.images){<br />
      if(!d.p) d.p=new Array();<br />
        var i,j=d.p.length;<br />
        for(i=0; i<a.length; i++){<br />
                d.p[j]=new Image;<br />
                d.p[j++].src=a[i];<br />
            }<br />
  }<br />
};<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
function immaginEu(dock,euSrcArray,id,attributes){<br />
    this.ParentDock = dock;<br />
    this.id=id;<br />
    this.idImmaginiArray = this.ParentDock.Images.length;<br />
<br />
    image = "\n<img src='"+euSrcArray[0]+"' id='"+id+"' border='0' "+<br />
            "style=\"visibility:hidden;cursor:pointer;position: absolute; left:-500px; z-index:15;\"  " +<br />
            "onMouseOver=\"imgEuver('"+this.ParentDock.ID+"',"+this.idImmaginiArray+");\"  " +<br />
            "onMouseOut=\"imgEut('"+this.ParentDock.ID+"',"+this.idImmaginiArray+");\"  " +<br />
            "onLoad=\"imgShEuw('"+this.ParentDock.ID+"',"+this.idImmaginiArray+");\"  "+<br />
            "onClick=\"imgClEulick('"+this.ParentDock.ID+"',"+this.idImmaginiArray+");"+(attributes)+"\" >\n";<br />
    document.write(image);<br />
<br />
    image = "<img src='"+euSrcArray[0]+"' id='Fading"+id+"' border='0' "+<br />
            "style=\"visibility:hidden;cursor:pointer;position: absolute; left:-500px; z-index:14;\" >\n";<br />
    document.write(image);<br />
<br />
    this.num = 0;<br />
    this.img = document.getElementById(id);<br />
    this.imgFading = document.getElementById("Fading"+id);<br />
    this.euSrcArray = euSrcArray;<br />
    this.kost = (1/((2*(this.euSrcArray.length))-2));<br />
<br />
    this.width  = 0;<br />
    this.height = 0;<br />
<br />
    this.fadingState = 0;<br />
    this.fadingType='opaque';<br />
<br />
    this.selected = false;<br />
    this.loaded = false;<br />
    this.endProcess = true;<br />
<br />
    // OnMouseOver Image Event<br />
    this.onMouseOver = "";<br />
    this.setOnMouseOver = function(ret){<br />
        this.onMouseOver = ret;<br />
    };<br />
    this.evalOnMouseOver = function(){<br />
        window.setTimeout(this.onMouseOver,1);<br />
    };<br />
<br />
    // OnMouseOut Image Event<br />
    this.onMouseOut = "";<br />
    this.setOnMouseOut = function(ret){<br />
        this.onMouseOut = ret;<br />
    };<br />
    this.evalOnMouseOut = function(){<br />
        window.setTimeout(this.onMouseOut,1);<br />
    };<br />
<br />
    // OnMouseClick Image Event<br />
    this.onMouseClick = "";<br />
    this.setOnMouseClick = function(ret){<br />
        this.onMouseClick = ret;<br />
    };<br />
    this.evalOnMouseClick = function(){<br />
        window.setTimeout(this.onMouseClick,1);<br />
    };<br />
<br />
    // OnChangeImage Image Event<br />
    this.onChangeImage = "";<br />
    this.setOnChangeImage = function(ret){<br />
        this.onChangeImage = ret;<br />
    };<br />
    this.evalOnChangeImage = function(){<br />
        window.setTimeout(this.onChangeImage,1);<br />
    };<br />
<br />
    // OnChangeSize Size Event<br />
    this.onChangeSize = "";<br />
    this.setOnChangeSize = function(ret){<br />
        this.onChangeSize = ret;<br />
    };<br />
    this.evalOnChangeSize = function(){<br />
        window.setTimeout(this.onChangeSize,1);<br />
    };<br />
<br />
    this.setPos = function(x,y){<br />
        this.img.style.left = x+"px";<br />
        this.img.style.top  = y+"px";<br />
        this.imgFading.style.left = x+"px";<br />
        this.imgFading.style.top  = y+"px";<br />
    };<br />
<br />
    this.getPosX = function(){<br />
        return this.img.left;<br />
    };<br />
<br />
    this.getPosY = function(){<br />
        return this.img.top;<br />
    };<br />
<br />
    this.setFadingSteps = function(steps){<br />
        this.kost=(1/steps);<br />
    };<br />
<br />
<br />
    this.setImage = function(newImage){<br />
        this.fadingState=0;<br />
        this.img.src=newImage;<br />
        this.imgFading.src=newImage;<br />
        //this.imageState = -1;<br />
        //this.fadingByState();<br />
        this.setImageArray(new Array(newImage));<br />
    };<br />
<br />
    this.setImageArray = function(newArray){<br />
        this.euSrcArray = newArray;<br />
        this.kost = (1/((2*(this.euSrcArray.length))-2));<br />
        this.imageState = -1;<br />
        this.fadingByState;<br />
        preloadImages(this.euSrcArray);<br />
    };<br />
<br />
    preloadImages(this.euSrcArray);<br />
<br />
    this.setFadingType = function(type){<br />
        this.fadingType=type.toLowerCase();<br />
    };<br />
<br />
    this.getImageArray = function(){<br />
        return this.euSrcArray;<br />
    };<br />
<br />
    this.getImage = function(){<br />
        return this.euSrcArray[Math.floor(this.fadingState*(this.euSrcArray.length-1))];<br />
    };<br />
    this.getFadingImage = function(){<br />
        return this.euSrcArray[Math.ceil(this.fadingState*(this.euSrcArray.length-1))];<br />
    };<br />
<br />
    this.setWidth = function(w){<br />
        this.width=w;<br />
    };<br />
<br />
    this.setHeight = function(h){<br />
        this.height=h;<br />
    };<br />
<br />
    this.getWidth = function(){<br />
        return Math.round(this.width*this.ParentDock.dockSteps[this.num]);<br />
        //return this.img.width;<br />
    };<br />
<br />
    this.getHeight = function(){<br />
        return Math.round(this.height*this.ParentDock.dockSteps[this.num]);<br />
        //return this.img.height;<br />
    };<br />
<br />
    this.getMaxWidth = function(){<br />
        return this.width;<br />
    };<br />
<br />
    this.getMaxHeight = function(){<br />
        return this.height;<br />
    };<br />
<br />
    this.idArray = function(){<br />
        return Math.floor((this.num*(this.euSrcArray.length-1))/(this.ParentDock.dockSteps.length-1));<br />
    };<br />
<br />
    this.fraction = function(){<br />
        if (this.euSrcArray.length==1)<br />
            return 1;<br />
        ret = (this.num*(this.euSrcArray.length-1))/(this.ParentDock.dockSteps.length-1);<br />
            return (ret-Math.floor(ret));<br />
    };<br />
        <br />
    this.isNotMax = function(){<br />
        return this.num<this.ParentDock.dockSteps.length-1;<br />
    };<br />
<br />
    this.isNotMin = function(){<br />
        return this.num>0;<br />
    };<br />
<br />
    this.isMax = function(){<br />
        return this.num==this.ParentDock.dockSteps.length-1;<br />
    };<br />
<br />
    this.isMin = function(){<br />
        return this.num==0;<br />
    };<br />
<br />
    this.setFadingState = function(fad){<br />
        if (this.euSrcArray.length>1){<br />
            if (this.fadingState != fad){<br />
                if (Math.abs(fad-this.fadingState)>this.kost){<br />
                    if (fad>this.fadingState)<br />
                        this.fadingState += this.kost;<br />
                    else<br />
                        this.fadingState -= this.kost;<br />
                    if (this.fadingState>1)<br />
                        this.fadingState=1;<br />
                    if (this.fadingState<0)<br />
                        this.fadingState=0;<br />
                }else<br />
                    this.fadingState = fad;<br />
                this.fadingByState();<br />
                return true;<br />
            }<br />
        }<br />
        return false;<br />
    };<br />
<br />
    this.imageState = 0;<br />
    this.fadingByState = function(){<br />
        stato = (this.fadingState*(this.euSrcArray.length-1));<br />
        b = ((Math.floor(stato) != Math.floor(this.imageState)) ||<br />
             (Math.ceil( stato) != Math.ceil( this.imageState)));<br />
            //document.getElementById('test').innerHTML+='<br>stato = '+stato+' - '+Math.floor(stato)+'<br>imageState='+this.imageState+' - '+Math.floor(this.imageState);<br />
        this.imageState=stato;<br />
        if (Math.round(stato)!=stato || (stato-Math.floor(stato))>0.05){<br />
            opImgFg = (stato-Math.floor(stato));<br />
            opImgBg = (Math.ceil(stato)-stato);<br />
        }else{opImgFg=1;opImgBg=0;}<br />
<br />
        if (opImgBg>0.99)<br />
            opImgBg=1;<br />
        if (opImgBg<0.01)<br />
            opImgBg=0;<br />
        if (opImgFg>0.99)<br />
            opImgFg=1;<br />
        if (opImgFg<0.01)<br />
            opImgFg=0;<br />
<br />
        if (this.fadingType.indexOf('fixed')!=-1){<br />
            /*<br />
             * Case "fixed"<br />
             */<br />
            opImg    = opImgFg;<br />
            opFading = 1;<br />
            if (b){<br />
                this.img.src=this.euSrcArray[Math.ceil(stato)];<br />
            }<br />
        }else if (this.fadingType.indexOf('opaque')!=-1){<br />
            /*<br />
             * Case "opaque"<br />
             */<br />
            if (this.selected){<br />
                opImg    = 1-opImgFg;<br />
                opFading = 1;<br />
                if (b){<br />
                    this.img.src=this.euSrcArray[Math.floor(stato)];<br />
                    this.imgFading.src=this.euSrcArray[Math.ceil(stato)];<br />
                }<br />
            }else{<br />
                opImg    = opImgFg;<br />
                opFading = 1;<br />
                if (b){<br />
                    this.img.src=this.euSrcArray[Math.ceil(stato)];<br />
                    this.imgFading.src=this.euSrcArray[Math.floor(stato)];<br />
                }<br />
            }<br />
        }else{<br />
            /*<br />
             * Case "transparent"<br />
             */<br />
            if ((Math.floor(stato)%2)==1){<br />
                opImg    = opImgFg;<br />
                opFading = opImgBg;<br />
                if (b){<br />
                    this.img.src=this.euSrcArray[Math.ceil(stato)];<br />
                    this.imgFading.src=this.euSrcArray[Math.floor(stato)];<br />
                }<br />
            }else{<br />
                opImg    = opImgBg;<br />
                opFading = opImgFg;<br />
                if (b){<br />
                    this.img.src=this.euSrcArray[Math.floor(stato)];<br />
                    this.imgFading.src=this.euSrcArray[Math.ceil(stato)];<br />
                }<br />
            }<br />
        }<br />
<br />
        this.img.style.opacity = (opImg);<br />
        this.img.style.filter = 'alpha(opacity='+(100*(opImg))+')';<br />
        this.imgFading.style.opacity = (opFading);<br />
        this.imgFading.style.filter = 'alpha(opacity='+(100*(opFading))+')';<br />
        if (b) this.evalOnChangeImage();<br />
    };<br />
<br />
    this.selectedImg = function(){<br />
        if(!this.selected)<br />
            this.imageState = -1;<br />
        this.selected=true;<br />
    };<br />
<br />
    this.resetImg = function(){<br />
        if(this.selected)<br />
            this.imageState = -1;<br />
        this.selected=false;<br />
    };<br />
<br />
    this.chgImg = function(n){<br />
        ret = this.num!=n;<br />
        this.num = n;<br />
        if (this.loaded){<br />
            this.img.style.width  = this.width*this.ParentDock.dockSteps[n];<br />
            this.img.style.height = this.height*this.ParentDock.dockSteps[n];<br />
            this.imgFading.style.width  = this.width*this.ParentDock.dockSteps[n];<br />
            this.imgFading.style.height = this.height*this.ParentDock.dockSteps[n];<br />
            if (this.selected)<br />
                return this.setFadingState(n/(this.ParentDock.dockSteps.length-1)) || ret;<br />
            else<br />
                return this.setFadingState(0) || ret;<br />
        }<br />
        return false;<br />
   };<br />
<br />
    this.chgImg(0);<br />
    this.avvicina = function(n){<br />
        bool = this.num!=n;<br />
        if(this.num<n)<br />
            n=this.num+1;<br />
        else if(this.num>n)<br />
            n=this.num-1;<br />
        if (bool)this.evalOnChangeSize();<br />
        return this.chgImg(n);<br />
    };<br />
<br />
     this.reloadDim = function(){<br />
        if (!this.loaded){<br />
            if (this.width==0) this.width  = this.img.width;<br />
            if (this.height==0) this.height = this.img.height;<br />
            this.img.style.visibility= "visible";<br />
            this.imgFading.style.visibility= "visible";<br />
            this.loaded = true;<br />
            this.chgImg(this.num);<br />
            this.ParentDock.redefineParameters();<br />
        }<br />
    };<br />
};<br />
<br />
<br />
function rEuturnMatch(txt,par){<br />
    if ((id=txt.toLowerCase().indexOf(par+"=",0))==-1)<br />
        return null;<br />
    id+=par.length+2;<br />
    return txt.substring(id,txt.indexOf(txt.charAt(id-1),id));<br />
};<br />
<br />
<br />
function imgShEuw(dockId,imageId){<br />
    var euImmagini = euDocks[dockId].Images;<br />
    euImmagini[imageId].reloadDim();<br />
};<br />
<br />
function ingrandEuisci(dockId,imageId){<br />
    if (TimEutID!=null) clearTimeout(TimEutID);<br />
    TimEutID=window.setTimeout("ingrandEuisci('"+ dockId +"',"+imageId+");",euTimeOver);<br />
    var euImmagini = euDocks[dockId].Images;<br />
    b = false;<br />
    for (var i = 0 ; i < euImmagini.length ; i++){<br />
        if (i==imageId){<br />
            euImmagini[i].selectedImg();<br />
            b=euImmagini[i].avvicina(euImmagini[i].ParentDock.dockSteps.length-1)||b;<br />
        }else if (i==imageId-1 || i==imageId+1){<br />
            euImmagini[i].resetImg();<br />
            b=euImmagini[i].avvicina(Math.floor(euImmagini[i].ParentDock.dockSteps.length/2))||b;<br />
        }else if (i==imageId-2 || i==imageId+2){<br />
            euImmagini[i].resetImg();<br />
            b=euImmagini[i].avvicina(Math.floor(euImmagini[i].ParentDock.dockSteps.length/4))||b;<br />
        }else{<br />
            euImmagini[i].resetImg();<br />
            b=euImmagini[i].avvicina(0)||b;<br />
        }<br />
    }<br />
    euDocks[dockId].Render();<br />
    if (!b) clearTimeout(TimEutID);<br />
};<br />
<br />
function ridEuci(dockId,imageId){<br />
    if (TimEutID!=null) clearTimeout(TimEutID);<br />
    TimEutID=window.setTimeout("ridEuci('" + dockId + "',"+imageId+");",euTimeOver);<br />
    var b = false;<br />
    var euImmagini=euDocks[dockId].Images;<br />
    for(var i = 0 ; i < euImmagini.length ; i++){<br />
        euImmagini[i].resetImg();<br />
        b |= euImmagini[i].avvicina(0);<br />
    }<br />
    euDocks[dockId].Render();<br />
    if(!b)clearTimeout(TimEutID);<br />
};<br />
<br />
function imgEuver(dockId,imageId){<br />
    euImmagini = euDocks[dockId].Images;<br />
    euImmagini[imageId].evalOnMouseOver();<br />
    if (TimEutID!=null) clearTimeout(TimEutID);<br />
    TimEutID=window.setTimeout("ingrandEuisci('"+ dockId +"',"+imageId+");",euTimeOver);<br />
};<br />
<br />
function imgEut(dockId,imageId){<br />
    var euImmagini = euDocks[dockId].Images;<br />
    euImmagini[imageId].evalOnMouseOut();<br />
    if (TimEutID!=null) clearTimeout(TimEutID);<br />
    TimEutID=window.setTimeout("ridEuci('" + dockId + "',"+imageId+");",euTimeOver);<br />
};<br />
<br />
function imgClEulick(dockId,imageId){<br />
    var euImmagini = euDocks[dockId].Images;<br />
    euImmagini[imageId].evalOnMouseClick();<br />
    euImmagini[imageId].avvicina(0);<br />
    euImmagini[imageId].avvicina(0);<br />
    euDocks[dockId].Render();<br />
    imgEuver(dockId,imageId);<br />
};<br />
<br />
//helper methods<br />
function TotalDocks(){ var i=0; for(var p in euDocks){ i++; } return i; }<br />
<br />


Tiago D'Herbe
sharpNet Web Application Framework
http://www.ergogeste.com

-- modified at 8:46 Tuesday 6th June, 2006
GeneralRe: Changed to support multiple docks [modified] Pin
Pier...6-Jun-06 21:55
memberPier...6-Jun-06 21:55 
GeneralRe: Changed to support multiple docks [modified] Pin
Pier...6-Jun-06 22:15
memberPier...6-Jun-06 22:15 
GeneralRe: Changed to support multiple docks [modified] Pin
dherbe7-Jun-06 0:26
memberdherbe7-Jun-06 0:26 
GeneralRe: Changed to support multiple docks [modified] Pin
dherbe7-Jun-06 0:28
memberdherbe7-Jun-06 0:28 
GeneralRe: Changed to support multiple docks [modified] Pin
Pier...7-Jun-06 23:35
memberPier...7-Jun-06 23:35 
QuestionRe: Changed to support multiple docks Pin
Varij10-Jun-06 2:43
memberVarij10-Jun-06 2:43 
AnswerRe: Changed to support multiple docks Pin
Pier...10-Jun-06 4:17
memberPier...10-Jun-06 4:17 
AnswereuDock 2.0a Pin
Pier...27-Jun-06 22:53
memberPier...27-Jun-06 22:53 
GeneralRe: Changed to support multiple docks Pin
Pier...5-Jul-06 23:45
memberPier...5-Jul-06 23:45 
QuestionApple Patent ? Pin
Nicolas MEURET29-May-06 1:19
memberNicolas MEURET29-May-06 1:19 
AnswerRe: Apple Patent ? Pin
Pier...29-May-06 6:02
memberPier...29-May-06 6:02 
GeneralRe: Apple Patent ? Pin
Nicolas MEURET30-May-06 2:00
memberNicolas MEURET30-May-06 2:00 
GeneralRe: Apple Patent ? Pin
Pier...30-May-06 5:12
memberPier...30-May-06 5:12 
GeneralRe: Apple Patent ? Pin
DiIVO4-Jun-06 8:02
memberDiIVO4-Jun-06 8:02 
GeneralCool, Mr. Tripletta Pin
DiIVO28-May-06 5:39
memberDiIVO28-May-06 5:39 
GeneralRe: Cool, Mr. Tripletta Pin
Pier...28-May-06 21:53
memberPier...28-May-06 21:53 
GeneralRe: Cool, Mr. Tripletta [modified] Pin
Pier...30-May-06 4:55
memberPier...30-May-06 4:55 

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.

Article
Posted 13 Mar 2006

Stats

131.1K views
1.1K downloads
60 bookmarked