Align Tutorial euDock 2.0 : Dock « Ajax Layer






<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 &lt;HEAD&gt;&lt;/HEAD&gt; HTML tag:

<pre>

&lt;HEAD&gt;

   &lt;script language="JavaScript1.3" src="js/euDock.2.0.js"&gt;&lt;/script&gt;

   &lt;script language="JavaScript1.3" src="js/euDock.Image.js"&gt;&lt;/script&gt;

&lt;/HEAD&gt;

<pre>

&lt;script&gt;

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

&lt;/script&gt;

</pre>

</td></tr>

<tr><td style="border:1px solid #8899bb;">

<b>Align an HTML object:</b>

<pre>

&lt;script&gt;

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

&lt;/script&gt;

</pre>

</td></tr>

<tr><td style="border:1px solid #8899bb;">

<b>Align to a fixed position:</b>

<pre>

&lt;script&gt;

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

&lt;/script&gt;

</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>&lt;a href='http://eudock.jules.it'&gt;

&lt;img src='http://eudock.jules.it/littlEuDock.jpg' border=0&gt;&lt;/a&gt;</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>
Align Tutorial euDock 2.0 : Dock « Ajax Layer « JavaScript DHTML
