Electron Logo Home

Home


Downloads

Downloads


Forums

Forums


Themes

Themes


Docs

Documents


License

License


About

About Us


PHP, MySQL and JavaScripts
    JavaScript
Menus
    PHP

 JS Dock
HR
 Dock.zip (22.57 KB)

HR

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




Tell a friend
Powered By AEF 1.0.7 © 2008 Electron Inc.