Nobody got any ideas why this is happening? It seems pretty obvious an Opera bug of some kind rather than any particular problem with jQuery itself, but it is nonetheless very annoying. Has anyone else encountered a problem like this or know how to work around it?
On Aug 7, 6:10 pm, Gordon <[EMAIL PROTECTED]> wrote: > 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
