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/

http://jsfiddle.net/utw84/4/

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.

http://jsfiddle.net/utw84/5/

it works here when want put "left" property main-dock, breaks everything.


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -