Si have made a scrolling div for the jquery fisheye. It works great, except it loses the cursor location as you scroll horizontally to the right. I read that the cursor location is calculated from the left most image in the list.
More reading shows me that JQuery has a great set of tools... dimension.js. I lloked into it further and tried to implement the scolling offset to be added back into the cursor location when using a scrolling element such as I did with a DIV. Code is shown below: Here is the HTML File: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <title>CSS Mac Dock</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/fisheye.js"></script> <script type="text/javascript" src="js/iutil.js"></script> <script type="text/javascript" src="js/jquery.dimensions.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() { $('input.run').bind('click', function(event) { var code = $(this).parent().find('code.mix').text(); var result = eval(code); if (result.jquery) $(this).parent().find('code.result').html('jQuery object'); else if (result.top) { var newResult = '{ '; for (var prop in result) newResult += prop + ': ' + result[prop] + ', '; result = newResult.substr(0, newResult.length - 2) + ' }'; $(this).parent().find('code.result').html(result); } else $(this).parent().find('code.result').html(result); }); }); </script> </head> <body> <div class="fishplaceouter" id="fishplaceouter"> <div class="fishplaceinner" id="fishplaceinner"> <div class="dock" id="dock"> <div class="dock-container" id="dock-container"> <a class="dock-item" href="#"><img src="images/home.png" alt="home" / ><span>Home</span></a> <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" / ><span>RSS</span></a> <a class="dock-item" href="#"><img src="images/home.png" alt="home" / ><span>Home</span></a> <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" / ><span>RSS</span></a> <a class="dock-item" href="#"><img src="images/home.png" alt="home" / ><span>Home</span></a> <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" / ><span>RSS</span></a> <a class="dock-item" href="#"><img src="images/home.png" alt="home" / ><span>Home</span></a> <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" / ><span>RSS</span></a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready( function() { var offset = {}; $('#dock').offset({scroll: true}, offset); $('#dock').Fisheye( { maxWidth: 50, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 40, proximity: 90, halign : 'center' } ); $("#fishplaceouter").outerWidth(); $("#fishplaceouter").innerWidth(); }); </script> <pre><code class="mix">$('#fishplaceouter').offset();</code></pre> <input type="button" value="Run" class="run"> <code class="result"></code> </body> </html> And the CSS: body { } img { border: none; } .fishplaceouter { z-index:200; overflow: auto; width: 500px; height: 200px; position: relative; border: thin solid green; top: 15px; margin-left: auto; margin-right: auto; } .fishplaceinner { z-index:150; width: 1500px; border: thin solid blue; } .dock { position: relative; height: 50px; text-align: center; } .dock-container { position: absolute; height: 50px; border: thin solid brown; } .dock-container a.dock-item { position: absolute; top: 0; } 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 { position: relative; margin: 5px 10px 0px; width: 100%; } .dock-item span { display: none; padding-left: 20px; } Can somebody please help me and tell me what I am doing wrong? Thanks! Darin
