Mega Code Archive
Align Tutorial euDock 2 0
<![CDATA[
<html>
</head>
<title>euDock 2.0 examples</title>
<link type="image/x-icon" href="iconsEuDock/euDock.ico" rel="shortcut icon">
<script language="JavaScript1.3" src="js/euDock.2.0.js"></script>
<script language="JavaScript1.3" src="js/euDock.Image.js"></script>
</head>
<body>
<center>
<br><br><br><br>
<table id='tableAlign' cellspacing=5 style='width:300;height:200;border:1px solid #8899bb;'>
<tr><td id='cellAlign' style="border:1px solid #8899bb;"><center>This is a cell</center>
</td></tr>
</table>
<br>
<table cellpadding=3 style='border:1px solid #8899bb;'>
<tr><td style="border:1px solid #8899bb;">
<center><b>Align Tutorial euDock 2.0</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>Align Functions:</b></center>
I gues that euDock creation is not a problem (is explained in the previous tutorial).<br><br>
After the creation of an euDock object, you can align it to the screen or<br>
to an HTML object or to a fixed position (a little example is on the top left of this page)
</td></tr>
<tr><td style="border:1px solid #8899bb;"><b>Align to screen:</b>
<br>Place inside your <HEAD></HEAD> HTML tag:
<pre>
<HEAD>
<script language="JavaScript1.3" src="js/euDock.2.0.js"></script>
<script language="JavaScript1.3" src="js/euDock.Image.js"></script>
</HEAD>
<pre>
<script>
// Instance your euDock object<b>
var dock = new euDock();</b>
/*
* (euDock object).setScreenAlign(align,offset)
*
* align euDock to the screen borders
* align : (euUP,euDOWN,euLEFT,euRIGHT)
* offset : the distance between screen border and euDock
*/<b>
dock.setScreenAlign(euRIGHT,3);</b>
</script>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<b>Align an HTML object:</b>
<pre>
<script>
// Instance your euDock object<b>
var dock = new euDock();</b>
/*
* (euDock object).setObjectAlign(objectID,objectAlign,offset,euDockPosition)
*
* align euDock to an HTML object
* objectID : the id of the object to be retrieve with the javascript function
* : document.getElementById(objectID);
*
* objectAlign : (euUP,euDOWN,euLEFT,euRIGHT)
* : Align to the middle (TOP,DOWN,LEFT,RIGHT) of the object
*
* offset : The distance from HTML object
*
* euDockPosition : (euUP,euDOWN,euLEFT,euRIGHT)
* : put euDock on the (TOP,DOWN,LEFT,RIGHT)
* : of the middle edge position of the object
* : (If you don't understand see the sources)
*/<b>
dock.setObjectAlign('tableAlign',euLEFT,10,euLEFT);</b>
</script>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<b>Align to a fixed position:</b>
<pre>
<script>
// Instance your euDock object<b>
var dock = new euDock();</b>
/*
* (euDock object).setPointAlign(x,y,euDockPosition)
*
* align euDock to a fixed position
* [x,y] : obvious
* euDockPosition : (euUP,euDOWN,euLEFT,euRIGHT)
* : put euDock on the (TOP,DOWN,LEFT,RIGHT)
* : of the x,y point
*/<b>
dock.setPointAlign(150,50,euDOWN);</b>
</script>
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>REMEMBER</b><br>Don't forget to put in your page:
<table cellpadding=5>
<tr><td style='border:1px solid #8899bb;'>
<pre><b><a href='http://eudock.jules.it'>
<img src='http://eudock.jules.it/littlEuDock.jpg' border=0></a></b></pre>
</td><td>
<a href='http://eudock.jules.it'><img src='littlEuDock.jpg' border=0>
</td></tr>
</table>
!!!If you don't like (of course) a personal Macumba!!!
</center>
</td></tr>
</table>
<a href='index.html'><b>RETURN TO INDEX</b></a>
</center>
<a href='http://eudock.jules.it'>
<img src='littlEuDock.jpg' border=0></a>
</body>
</html>
<script>
euEnv.imageBasePath="js/";
var dock_1 = new euDock();
dock_1.setScreenAlign(euLEFT,0);
dock_1.setBar({top:{euImage:{image:"barImages/dockBg-u.png"}},vertical:{euImage:{image:"barImages/dockBg-c-v.gif"}},bottom:{euImage:{image:"barImages/dockBg-d.png"}}});
dock_1.setIconsOffset(2);
dock_1.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_1.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_1.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_2 = new euDock();
dock_2.setScreenAlign(euRIGHT,3);
dock_2.setBar({top:{euImage:{image:"barImages/dockBg-u.png"}},vertical:{euImage:{image:"barImages/dockBg-c-v.gif"}},bottom:{euImage:{image:"barImages/dockBg-d.png"}}});
dock_2.setIconsOffset(2);
dock_2.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_2.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_2.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_3 = new euDock();
dock_3.setScreenAlign(euUP,0);
dock_3.setBar({left:{euImage:{image:"barImages/dockBg-l.png"}},horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},right:{euImage:{image:"barImages/dockBg-r.png"}}});
dock_3.setIconsOffset(2);
dock_3.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_3.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_3.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_4 = new euDock();
dock_4.setScreenAlign(euDOWN,0);
dock_4.setBar({left:{euImage:{image:"barImages/dockBg-l.png"}},horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},right:{euImage:{image:"barImages/dockBg-r.png"}}});
dock_4.setIconsOffset(2);
dock_4.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_4.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_4.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_5 = new euDock();
dock_5.setObjectAlign('cellAlign',euDOWN,0,euUP);
dock_5.setBar({left:{euImage:{image:"barImages/dockBg-l.png"}},horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},right:{euImage:{image:"barImages/dockBg-r.png"}}});
dock_5.setIconsOffset(2);
dock_5.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_5.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_5.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_6 = new euDock();
dock_6.setObjectAlign('tableAlign',euRIGHT,0,euRIGHT);
dock_6.setBar({top:{euImage:{image:"barImages/dockBg-u.png"}},vertical:{euImage:{image:"barImages/dockBg-c-v.gif"}},bottom:{euImage:{image:"barImages/dockBg-d.png"}}});
dock_6.setIconsOffset(2);
dock_6.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_6.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_6.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_7 = new euDock();
dock_7.setObjectAlign('tableAlign',euLEFT,10,euLEFT);
dock_7.setBar({top:{euImage:{image:"barImages/dockBg-u.png"}},vertical:{euImage:{image:"barImages/dockBg-c-v.gif"}},bottom:{euImage:{image:"barImages/dockBg-d.png"}}});
dock_7.setIconsOffset(2);
dock_7.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_7.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_7.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
var dock_8 = new euDock();
dock_8.setPointAlign(150,50,euDOWN);
dock_8.setBar({left:{euImage:{image:"barImages/dockBg-l.png"}},horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},right:{euImage:{image:"barImages/dockBg-r.png"}}});
dock_8.setIconsOffset(2);
dock_8.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_8.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
dock_8.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),{link:"http://eudock.jules.it"});
</script>
eudock2.0.zip( 352 k)
]]>