javascript - Trying to use two <div> inside a <li>, which are supposed to run a script. [Not sure if it's possible] -
not sure if trying going work, want insert inside li 2 div run script links inside them. bit confusing, know, cant explain in better way.
take @ code:
inside 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 running inside div, in 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 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 trying do, put inside list dock acts os x, moving mouse on icons making them zoom, though above code zoom doesn't work.
if move part of dock outside list , put somewhere in body, works should, inside list no animation.
i not sure @ if possible, having animation running inside li, appreciated.
p.s have css li style, thing irrelevant question didn't include it.
edit: added on jsfiddle. link: http://jsfiddle.net/utw84/3/
the dock trying make one: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
note: on jsfiddle doesn't show icons, because there no path them.
edit 2: problem was/is css. made changes , working better now. http://jsfiddle.net/utw84/7/
is want ?
i added css selector :
#main-list ul li > ul { display: none; position: absolute; text-align: center; }
the last css selector overriding :hover selector.
edit :
i see.
it works here when want put "left" property main-dock, breaks everything.