I want to have a horizontal scrolling list of products so that a user can compare them side by side. I produced something that works, but discovered an extremely disconcerting problem that occured in Opera 9.x. Here is a simplified test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Grid Demo</title> <!--[if ie]><script type="text/javascript" src="/js/firebug/ firebug.js"></script><![endif]--> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript" src="/js/jquery/interface/ interface.js"></script> <script type="text/javascript"> $(document).ready (function () { var scrollStrip = $('#compScrollStrip'); $('#scrollLeft').click (function () { scrollStrip.animate ({left: parseInt (scrollStrip.css ('left'), 10) - 401}, 'slow'); }); $('#scrollRight').click (function () { scrollStrip.animate ({left: parseInt (scrollStrip.css ('left'), 10) + 401}, 'slow'); }); }); </script> <style type="text/css"> <!-- /* General */ body { font: 12px Arial, Helvetica, sans-serif; margin: 0px; padding: 10px; background: #F9F9F9; } h3 { font-size: 1em; } /* Dialog boxes */ .dialog { position: absolute; z-index: 1005; top: 50%; left: 50%; background-color: #FFFFFF; border-bottom: solid 1px #9CB5CE; border-left: solid 1px #9CB5CE; border-right: solid 1px #9CB5CE; opacity: 0.95; filter: alpha (opacity=95); } .dialog h3 { color: #FFFFFF; text-align: left; background-color: #9CB5CE; margin: 0 0 1px 0; padding: 1px 1px 1px 5px; } /* Comparitor dialog */ #comparitor { width: 90%; height: 400px; top: 50%; left: 50%; margin-top: -200px; margin-left: -45%; } .scrollBut, #compContent { height: 94%; margin: 2px; } .scrollBut { width: 4%; border: solid 1px black; } #compContent { width: 90%; position: absolute; left: 50%; margin-left: -45%; border: solid 1px black; } #scrollLeft { float: left; } #scrollRight { float: right; } #compContent .product, #compContent .productKey { background: #CCCCCC; margin: 0; } #compContent .productKey { width: 25%; height: 100%; z-index: 20; background: #0099CC; } #compScroller { width: 75%; height: 100%; position: absolute; top: 0; left: 25%; overflow: hidden; white-space: nowrap; margin: 0; padding: 0; z-index: 10; } #compScrollStrip { position: absolute; list-style: none; height: 100%; width: 4010px; top: 0; border: none 0px; margin: 0; padding: 0; background:#00CC99; } #compScroller .product, #compScrollStrip .product { float: left; height: 90%; width: 400px; border-left: solid 1px black; margin: 0; padding: 0; } --> </style> </head> <body> <div class="dialog" id="comparitor"> <h3>Compare Prducts</h3> <button class="scrollBut" id="scrollLeft"></button> <div id="compContent"> <div class="productKey">Chart key</div> <div id="compScroller"> <ol id="compScrollStrip" style="left: 0px;"> <li class="product">Item 1</li> <li class="product">Item 2</li> <li class="product">Item 3</li> <li class="product">Item 4</li> <li class="product">Item 5</li> <li class="product">Item 6</li> <li class="product">Item 7</li> <li class="product">Item 8</li> <li class="product">Item 9</li> <li class="product">Item 10</li> </ol> </div> </div> <button class="scrollBut" id="scrollRight"></button> </div> </body> </html> When performing the scroll in Opera 9, the top part of each li remains where it is! The rest of the element scrolls though, as you can tell by their borders moving across the display. The bug doesn't seem to appear in opera 8.x
