|
Ciao Pier!
I need to hide or delete some options in web sections, and I want to change the image of selected icon when I'm in a section. how can I do?
A easy solution is write a method to delete all icons a recreate with the element that I need and the image changed of the selected section. I try with this method, but not work:
this.deleteAllIcons = function(){
this.iconsArray.splice(0,this.iconsArray.length);
this.refreshDiv();
};
thanks!
|
|
|
|
|
|
Try this at the end of your Code:
//You can define a zooming percentage function
// In this case i use a linear zooming algorithm
// f(x)=A*(x)+B*(1-x)
// x = variable between 0 - 1
// A = End Zooming Percentage
// B = Start Zooming Percentage
//
// return value can be arbitrary
// i.e. return 1 = the icon has original size
// return 2 = the icon has double size
// return 0.5 = the icon has half size
// return y = the icon has y*(original size)
//
function zoomingFunc_for_ipodxtras_site(x){
return (2*x)+(1*(1-x));
};
dock.setAllZoomFunc( zoomingFunc_for_ipodxtras_site );
|
|
|
|
|
Pier,
Thanks so much! I have now completed the transition to euDock. You can see it in use at www.ipodxtras.com.
The code is very well done.
|
|
|
|
|
A little advice
You can increase performances with following code:
Your icons doesn't fading so, in IE you can use a blank object inside the label and force the background image to not disappear
For example i've modified last icon:
<br />
<tt><br />
dock.addIcon(new Array({euImage:{image:"images/ipoddock/ipod_1g_2g.png",<br />
PngObjIE : euImageNoFadingIE_PNG}},<br />
{euLabel:{<br />
object : {euBlank:{width:100,height:100}},<br />
txt : "<b><center>iPod 1G & 2G<center></b>",<br />
<br />
... BLA BLA BLA BLA ...<br />
<br />
anchor : euDOWN,<br />
offsetX : 0,<br />
offsetY : 5}}),<br />
{link:"... BLA BLA LINK BLA BLA ...",<br />
fadingType:euFIXED});<br />
</tt><br />
-- modified at 3:09 Thursday 21st September, 2006
|
|
|
|
|
Pier, I have a small request that can make your work even
more useful. Up to now, the icon/images are aligned say
horizontally and when the mouse hovers above them they are
zoomed but stay above the horizon.
Very good for an icon bar at the bottom of a screen.
What about zooming the images so that they are centered
vertically ? It's good for an icon bar anywhere on a
screen. Essentially its only an x offset for the images,
similar to the x offset for the **labels**. An y-offset would
be good for vertically aligned icon bars.
Maybe it's already implemented, but I don't know where to
look for (at this time). Many Thanks !
-- modified at 5:31 Wednesday 12th July, 2006
1° Currently the icon bar looks like this
=====o O O O o ====
Zoomed Images are always above the horizon
2° Requested icon bar
Zoomed images vertically centred over the bar
------o O O O o -----
Example of use: a 'small' image gallery, when there are several
bars of images.
I hope this is clear enough, I can't add a picture.
Ciao.
|
|
|
|
|
Ok... If I've understand, I will work on it.
Wait for the new release...
|
|
|
|
|
|
That's it, you did it, again !
Fantastic results ! Many Thanks
-- modified at 11:11 Wednesday 12th July, 2006
I notice that the CPU is regularly working, up to 50-60% for a Centrino 1.4GHz,
even when there is no mouse event, e.g. when the window is minimized.
This could be a problem when there are many such bars on the screen.
Is there a work around to reduce CPU consumption during inactive periods ?
|
|
|
|
|
MMMMM...
I've made many tests on it.
Without mouse events there are no threads running (in the alpha version)
But in new euDock 2.0 can be some errors.
I must test it.
If you see stress test alpha Page
http://eudock.jules.it/eudock2.0a/multiple.php[^]
On the top, There are 4 values:
If the first reach '0' there are no bar refresh (CPU will be a little free)
The last is a simple FPS meter
The other two are the mouse coords.
I must work on the Thread algorithm.
This can take some time.
-- modified at 12:56 Wednesday 12th July, 2006
|
|
|
|
|
I'm a bit busy in these days with my work.
Before next Monday i think no fix will be released.
But i've made some experiment.
The cpu usage (Without Events) increase with I-Explorer only.
With my configuration (Pavilion Turion 64), in the follow page:
http://eudock.jules.it/eudock2.0/Align.html[^]
I-E : cpu 30-35%
Firefox : cpu 0-3%
I must try with JPGs and GIFs images.
If I succeed to fix it, i'm sure that performances in IE will increase a lot.
|
|
|
|
|
Hi there!
Any news about the CPU usage with IE?
I'm using IE6 on XP-SP2+recent patches.
|
|
|
|
|
........................................................
........................|----|..........................
..................|---|.|----|.|---|....................
.............|--|.|---|.|----|.|---|.|--|...............
=======[].[].|--|.|---|.|----|.|---|.|--|.[].[]========.
........................................................
........................................................
..................___..|----|..___......................
._._._._._._._._.|---|.|----|.|---|._._._._._._.........
.¯.¯.¯.¯.¯.¯.¯.¯.|---|.|----|.|---|.¯.¯.¯.¯.¯.¯.........
..................¯¯¯..|----|..¯¯¯......................
........................................................
;P;P AH Man... ;P;P
;P;P You have a lot to learn ;P;P
P.S.
!!!WOF!!!
I've modified this article 7 times to make right ascii euArt
When you finish your site, (if you want) can you send me the URL.
My idea is to include in my site a link to all euDock pages in the world.
Another idea is to make a thumbnail viewer with eudock Like engine.
-- modified at 6:42 Wednesday 12th July, 2006
|
|
|
|
|
Chapeau! Really Cool!
Really good work! Wow!
Is it possible to add a short caption/label to remind users of what
each menu option/button is meant to do ?
If the action is complex, the icon may be insufficient !
|
|
|
|
|
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)********
********************************************************************************
|
|
|
|
|
Mille excuses...
Didn't read up to that far yet.
I must say again, it's really beautiful !
|
|
|
|
|
Thanks a lot!!!
|
|
|
|
|
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
|
|
|
|
|
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
|
|
|
|
|
<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
|
|
|
|
|
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 />
var TimEutIDScroll=null;<br />
var dockAlign="bottom";<br />
var euScrOfX=0; var euScrOfY=2000; var euFrameWidth=0; var euFrameHeight=0;<br />
var euBoolHookPos = false; var euHookPosX = 0; var euHookPosY = 0; var euIdObjHook = null; var euIdObjHookPos = null;<br />
<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 />
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 />
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 />
<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 />
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 />
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 />
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 />
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 />
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.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 />
};<br />
<br />
this.getHeight = function(){<br />
return Math.round(this.height*this.ParentDock.dockSteps[this.num]);<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 />
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 />
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 />
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 />
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 />
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
|
|
|
|
|
Wow!!!
GREAT!!!
You are Crazy!!!
Now I try to read your code.
I will add it as soon as possible.
Thanks...:->
|
|
|
|
|
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!!!
|
|
|
|
|
Sure I've sent you an email containing a zip file with the sources.
best regards
Tiago
|
|
|
|
|
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
|
|
|
|
|