euDock 2.0.06 JScript Emulation of Dock style MAC OS X bar

11-Jul-06 2:21

Label object is present in euDock 2.0, it is explained in the tutoral.
(You can see label object work on my site http://eudock.jules.it[^])
I hope you asked me that.

If there are other problems i'm here.

Thanks...

******************************************************************************** ******************************************************************************** ******"There is a brown airship without propeller and rudder inside me..."****** ****************************************************************(Helium)******** ********************************************************************************

Re: Request for label

Peter.Chan11-Jul-06 5:59

Peter.Chan

11-Jul-06 5:59

Mille excuses...
Didn't read up to that far yet.
I must say again, it's really beautiful !

Re: Request for label

Pier...11-Jul-06 6:26

open in new window ( or tab)

11-Jul-06 6:26

Thanks a lot!!! Cool | :cool:

anga16-Jun-06 3:21

anga

16-Jun-06 3:21

Hi,
can you modify your code, so that we can give a parameter indicating that we want to open the link in the same or new IE window ( new firefox tab)?

TIA

Re: open in new window ( or tab) [modified]

Pier...16-Jun-06 4:57

Re: open in new window ( or tab) ANOTHER EXAMPLE [modified]

16-Jun-06 4:57

My script is more standard, so, you can customize it a lot...
(It can be used [for example] like a thumbnail image viewer [if you have fantasy])

If you want to open new windows you can use following script...

<SCRIPT>
function openNewWindow(){
window.open('http://www.google.com','mywindow','');
}
</SCRIPT>

<SCRIPT>
addEuImg("iconsEuDock/euDock-red.gif" , "js='openNewWindow();'");

BLA BLA BLA ...
Etc Etc etc...
Bibidi Bobidi Bu!!!
</SCRIPT>

eudock can associate every event with a javascript code.
(The documentation can explain it better)

Thanks...

!!!Più Socialismo Meno Cemento!!!

-- modified at 11:10 Friday 16th June, 2006

Pier...16-Jun-06 5:04

Changed to support multiple docks [modified]

16-Jun-06 5:04

<SCRIPT>
function openNewWindowUrl(url){
window.open(url,'mywindow','');
}
</SCRIPT>

<SCRIPT>
icon = addEuImg("iconsEuDock/euDock-red.png" , "");
icon.onMouseClick = "openNewWindowUrl('http://eudock.jules.it')";
.. . .

(Little BUG)
(Codeproject substitute the STRING o_n_M_o_u_s_e_C_l_i_c_k [without '_' chars] with 'removed')
(sorry)

-- modified at 11:11 Friday 16th June, 2006

dherbe6-Jun-06 2:06

dherbe

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

Pier...6-Jun-06 21:55

6-Jun-06 21:55

Wow!!!
GREAT!!!
You are Crazy!!!

Now I try to read your code.
I will add it as soon as possible.

Thanks...:->

Pier...6-Jun-06 22:15

6-Jun-06 22:15

hi...
Your code don't work properly.
there are some errors in your post.
(some instructions are trunked)

can you send the sources to me?

my mail is:
piercingslugx@inwind.it

Thanks!!!

dherbe7-Jun-06 0:26

dherbe

7-Jun-06 0:26

Sure I've sent you an email containing a zip file with the sources.

best regards
Tiago

dherbe7-Jun-06 0:28

dherbe

7-Jun-06 0:28

Hum..
I've just found out that for some reason
IE is not behaving as expected, like when using Mozilla firefox

I apologize for that.
In the meantime I will try to fix this!

regards

Pier...7-Jun-06 23:35

Re: Changed to support multiple docks

7-Jun-06 23:35

I've not received your mail.
If you can resend it to me...

Thanks!!!

Varij10-Jun-06 2:43

Varij

10-Jun-06 2:43

This is really great.. I am a designer and a bit web enthusiast.. Can I also get the modified code zip file.. my ID is ravi_sharma1@yahoo.com

Ravi

Re: Changed to support multiple docks

Pier...10-Jun-06 4:17

10-Jun-06 4:17

OK...
As soon as possible multiple docks V. 1.08 will be released...
I hope in the next Days...
Suspicious | :suss:

-- modified at 10:18 Saturday 10th June, 2006

euDock 2.0a

Pier...27-Jun-06 22:53

Re: Changed to support multiple docks

27-Jun-06 22:53

If you want, you can try the alpha version of euDock 2.0.
Please, refer me bugs.

http://eudock.jules.it/eudock2.0a/
(This page can be slow cause to multiple and more multiple Docks)
AH... (This page has only PNG's images so, can work only with Firefox)

THANKS!!!

Pier...5-Jul-06 23:45

5-Jul-06 23:45

If You Want.
euDock 2.0 has been released.

Suspicious | :suss:

Hi...

Apple Patent ?

Nicolas MEURET29-May-06 1:19

Nicolas MEURET

29-May-06 1:19

Did I read somewhere that Apple had a patent for this dock effet ?

Pier...29-May-06 6:02

29-May-06 6:02

I don't know!!!
But there are a lot of DOCK effect application in internet like 'kxdocker' or 'ObjectDock'.
My project is totally free and open source.
If APPLE will have some kind of problem, so, i must close all.
D'Oh! | :doh:

Nicolas MEURET30-May-06 2:00

Nicolas MEURET

30-May-06 2:00

I remember Google had a problem with its 'Google X' project :

http://en.wikipedia.org/wiki/Google_X[^]

Anyway, I don't know if you will have to 'Close All' if it is a Apple patent, but people should be aware of this potential problem if they want to use your code in a commercial software/site.

Good job !!!

Pier...30-May-06 5:12

30-May-06 5:12

You can customize my script to differ enough from the mac Bar...
- setEuDockSteps(new Array(0,0));
It will become pretty image fading bar...

Sorry but the other problems are not mine...

DiIVO4-Jun-06 8:02

DiIVO

4-Jun-06 8:02

Pier doesn't copy MAC but the Aqua Theme of KDE window manager.....

In this way the patent is only a WC-paper.....

A dotto'... do you like this answer? Simple, fast and good. Wink | ;)

))

Bye

Cool, Mr. Tripletta

DiIVO28-May-06 5:39

DiIVO

28-May-06 5:39

I see your Eudock: very cool.

I'm rembering you are an Italian guy : Mr. Tripletta. Right? A young engineer with the "tripletta" passion.....

Bye.

Re: Cool, Mr. Tripletta

Pier...28-May-06 21:53

Re: Cool, Mr. Tripletta [modified]

28-May-06 21:53

Hi Figa Licker, YESSS i'm Mr. Tripletta's guy...
So... BOH...
:->Get Us Boro YOURSELF!!! Cool | :cool:

Pier...30-May-06 4:55