Has nobody else run into problems with events firing in unexpected ways or in apparently the wrong order or too quickly? This problem is proving a real frustration and i can't find any way around it. I thought the flag setting approach was a sensible one to prevent unwanted functioning of the event handlers but it doesn't work properly.
Please please please, if anyone has any ideas, let me know because this is proving a major frustration. On Aug 25, 4:12 pm, Gordon <[EMAIL PROTECTED]> wrote: > Anyone? > > On Aug 24, 3:40 pm, Gordon <[EMAIL PROTECTED]> wrote: > > > I had a look at hoverIntent, but while it does seem to make the > > problem occur less often it doesn't prevent it entirely. > > > Here's an example that illustrates the problem I'm having (using hover > > instead of hoverIntent so that the problem is more obvious) > > > <!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"; xml:lang="en" lang="en"> > > <head> > > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > > <title>Hovering test</title> > > <style type="text/css"> > > #cgtrGrid { > > position: relative; > > z-index: 1; > > width: 769px; > > height: 370px; > > margin: 0px; > > padding: 2px; > > overflow: hidden; > > border: solid 1px;} > > > #cgtrGrid li.product { > > display: block; > > position: absolute; > > background: #E8E8E8; > > padding: 0px; > > border: solid 1px #000000; > > overflow: hidden; > > font-size: 10px; > > white-space: nowrap; > > list-style: none outside; > > margin: 3px; > > > } > > > </style> > > <script type="text/javascript" src="/js/jquery/jquery.js"></script> > > <script type="text/javascript"> > > > var zoomed = false; > > var domCache = new Object (); > > var normalWidth = 146; > > var normalHeight = 66; > > > function zoom () > > { > > console.log (this); > > if (!zoomed) > > { > > zoomed = true; > > thisElem = $(this); > > var thisCol = Math.floor (domCache [this.id].left / > > normalWidth); > > thisElem.css ('zIndex', 100).animate ({ > > width : (763) * 0.6, > > height : 362, > > top : 2, > > left : (763 * 0.4) * (thisCol / 4) > > }, 'normal'); > > } > > return (false); > > > } > > > function unzoom () > > { > > var thisElem = $(this); > > thisElem.animate ({ > > width : normalWidth, > > height : normalHeight, > > top : domCache [this.id].top, > > left : domCache [this.id].left > > }, 'normal', function () > > { > > zoomed = false; > > thisElem.css ('zIndex', 0); > > }); > > return (false); > > > } > > > $(document).ready (function () > > { > > $('.product').each (function () > > { > > var thisElem = $(this); > > domCache [this.id] = new Object ({ > > top : parseInt (thisElem.css ('top')), > > left : parseInt (thisElem.css ('left')) > > }); > > }); > > $('.product').hover (zoom, unzoom);}); > > > </script> > > </head> > > <body> > > <ol id="cgtrGrid"> > > <li class="product" id="list_HPN0115" style="top: 2px; left: 2px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_TOSAT352" style="top: 2px; left: 156px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_LENNB064" style="top: 2px; left: 310px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_ACNB8064" style="top: 2px; left: 464px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_ACNB0573" style="top: 2px; left: 618px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_ACNB8060" style="top: 76px; left: 2px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_ACNB0572" style="top: 76px; left: > > 156px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_SONB0205" style="top: 76px; left: > > 310px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_HPN0103" style="top: 76px; left: 464px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_TOSAT355" style="top: 76px; left: > > 618px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_SONB0182" style="top: 150px; left: 2px; > > width: 146px; height: 66px; ">This is a test</li> > > <li class="product" id="list_SONB0202" style="top: 150px; left: > > 156px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_ACNB8055" style="top: 150px; left: > > 310px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_SONB0187" style="top: 150px; left: > > 464px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_HPN0102" style="top: 150px; left: > > 618px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_SONB0210" style="top: 224px; left: 2px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_SONB0204" style="top: 224px; left: > > 156px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_SONB0188" style="top: 224px; left: > > 310px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_HPN0072" style="top: 224px; left: > > 464px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_SONB0190" style="top: 224px; left: > > 618px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_HPNB0437" style="top: 298px; left: 2px; > > width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_TOSAT347" style="top: 298px; left: > > 156px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_A0219396" style="top: 298px; left: > > 310px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_ACNB8066" style="top: 298px; left: > > 464px; width: 146px; height: 66px;">This is a test</li> > > <li class="product" id="list_HPNB0456" style="top: 298px; left: > > 618px; width: 146px; height: 66px;">This is a test</li> > > </ol> > > </body> > > </html> > > > On Aug 20, 5:31 pm, Stephan Beal <[EMAIL PROTECTED]> wrote: > > > > On Aug 20, 6:25 pm, Gordon <[EMAIL PROTECTED]> wrote: > > > > > My first attempt simply did an animate () on the hovered item and > > > > another one when it was unhovered. this produced the desired scaling > > > > effect, but it also ran into a few problems when the mouse was moved > > > > over several items in quick succession. > > > > i think what you're looking for is the hoverIntent plugin: > > > >http://cherne.net/brian/resources/jquery.hoverIntent.html
