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
