|
JS Dock
|
Dock.zip (22.57 KB)

|
Description: JS Dock is a unique and light JavaScript. It was developed for AEF - a forum software. This script is very light - just around 3 KB. It is also very easy to implement and user friendly.
Browsers: FF1+, IE5+, Opr7+, Chrome, Safari . Might even work in older Browsers!
Demo: Just hover on the icons below!
Usage:
1) Download the Dock.zip file which contains dock.js required for the Dock Menu. Upload it to your web directory.
2) Put the following code in your webpage :
Code <script language="javascript" src="dock.js" type="text/javascript"></script>
<style>
/* AEF Dock - These Style Classes are important */
.dock{
list-style:none;
position:relative;
margin:0px auto;
}
.dock li, .dock a {
display:inline;
}
.dock img{
display:block;
border:none;
width:0px;
height:0px;
position:absolute;
top:auto;
left:auto;
}
</style>
<center>
<ul id="dock" class="dock">
<li><a href="http://www.anelectron.com" title="AEF Home"><img src="images/home.gif" alt="AEF Home"></a></li>
<li><a href="http://www.anelectron.com" title="Admin Panel"><img src="images/admincp.gif" alt="Admin"></a></li>
<li><a href="http://www.anelectron.com" title="Profile Settings"><img src="images/profilesettings.gif" alt="Profile Settings"></a></li>
<li><a href="http://www.anelectron.com" title="Forum Settings"><img src="images/settings.gif" alt="Forum Settings"></a></li>
<li><a href="http://www.anelectron.com" title="Inbox"><img src="images/inbox.gif" alt="Inbox"></a></li>
<li><a href="http://www.anelectron.com" title="Compose"><img src="images/compose.gif" alt="Compose"></a></li>
<li><a href="http://www.anelectron.com" title="Search"><img src="images/search.gif" alt="Search"></a></li>
</ul>
</center>
<script type="text/javascript">
aefdock = new dock();
window.onload = function (){
aefdock.init();
};
</script>
3) Voila! The dock is all set. You can make multiple Docks in the same page. Just call it in another variable e.g. in the above code it is called in aefdock . You can call it in another variable as well. See the following code:
Code <script type="text/javascript">
newdock = new dock('dockid');
</script>
In this way you can make many docks! However initialize all Docks on window.onload Event only.
Changing the Dock Settings:
All dock settings can be edited and different docks can have different settings.
Following are the parameters (assuming aefdock as the dock Variable):
1) aefdock.speed - Defaults 10
2) aefdock.pace - Defaults 10
3) aefdock.min - Defaults 40, It is the starting size of the Image
4) aefdock.max - Defaults 80, It is the end size of the Image i.e. the size of the image when the Mouse Hovers over the Image/icon
I hope you guys like the Dock!
If you want any support / want to comment on this script, then please post it in the following topic:
http://www.anelectron.com/board/index.php?tid=3522
|
|