Not sure if what i am trying to do is going to work, but i want to insert inside a li two div that will run some script for some links that are inside them. A bit confusing, i know, i cant explain it in a better way.
Take a look at my code:
Inside the body of HTML
<ul>
<li> TEST </li>
<li> TEST 2
<ul>
<li>
<div id="dock2" class="dock">
<div class="dock-container2" style="left: 760px; width: 400px;">
<ul>
<li><a class="dock-item2" href="#" style="width: 40px; left: 0px;"><span style="display: none;">Home</span><img alt="home" src="Inc/Images/dock/home.png"/></a> </li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 40px;"><span style="display: none;">Contact</span><img alt="contact" src="Inc/Images/dock/email.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 80px;"><span style="display: none;">Portfolio</span><img alt="portfolio" src="Inc/Images/dock/portfolio.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 120px;"><span style="display: none;">Music</span><img alt="music" src="Inc/Images/dock/music.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 160px;"><span style="display: none;">Video</span><img alt="video" src="Inc/Images/dock/video.png"/></a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li> TEST 3 </li>
</ul>
The script that is running inside the div, also in the body of HTML
<script type="text/javascript">
$(document).ready(function(){
$('#dock2').Fisheye({
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
And finally the CSS
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
So what i am actually trying to do, is put inside a list a dock that acts like OS X, moving the mouse over the icons making them to zoom, though with the above code the zoom doesn't work.
If i move the part of the dock outside the list and put it somewhere in the body, everything works as it should, but inside the list no animation.
I am not sure at all if this is possible, having an animation running inside a li, any help is really appreciated.
P.S I also have an another CSS that is about the li style, but i thing its irrelevant to the question so i didn't include it.
Edit: Added it on jsfiddle. Link: http://jsfiddle.net/UTw84/3/
The dock i am trying to make is this one: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
Note: on jsfiddle it doesn't show the icons, probably because there is no path for them.
Edit 2: The problem was/is with CSS. i made some changes and its working better now. http://jsfiddle.net/UTw84/7/