Rails spinoffs - Apr 2008 - prototype - IE viewport bug - Elements out of viewport scope don't respond correctly to mouseover events

Hi

I have a problem with my website.
I have a gallery of image thumbnails. Each one is a div, floated to
the left.
When u roll over the div, the className of the div changes to another
one. This classname change the thumbnail bg image and color.

All this functionality comes from prototype''s observe mouse events
listeners function.

Now i know this function works well, cause when the viewport show all
the thumbnails, rollovering the thumbnails changes there classname and
the background images and etc.
But if the viewport of IE loads with part of the thumbnails, and show
just some of them, when u scroll down, those thumbnails don''t react to
correctly to mouse events (rollover, etc...) and most of the time they
ignore the events.


Did anyone came across this kind of IE (6/7) behavior?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

A very quick and dirty test with a bunch of divs and mouseover/
mouseout handlers (below) doesn''t reveal any problem (with Prototype
1.6.0.2 using IE6).  I can scroll down some, and roll over a partially-
visible div, and it reacts just fine.

Your best bet is probably to try to create a pared-down test case.
Usually just doing that reveals the problem; but if it doesn''t, then
you can post the pared-down test case for people to try to help. :-)

Here''s the script part of my quick-and-dirty test case; the page is
just a bunch of divs with the classname "react", enough to force
vertical scrolling:
* * * *
function init()
{
    var divs;

    divs = $$(''div.react'');
    divs.invoke(''observe'', ''mouseover'',
changeColor);
    divs.invoke(''observe'', ''mouseout'',
changeBack);
}
function changeColor(evt)
{
    var el;

    el = evt.element();
    if (el && !el.hasClassName(''blue''))
    {
        el.addClassName(''blue'');
    }
}
function changeBack(evt)
{
    var el;

    el = evt.element();
    if (el)
    {
        el.removeClassName(''blue'');
    }
}
document.observe(''dom:loaded'', init);
* * * *
Hope this helps,
--
T.J. Crowder
tj / crowder software / com

On Apr 2, 12:43 pm, neoswf
<neo...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Hi
>
> I have a problem with my website.
> I have a gallery of image thumbnails. Each one is a div, floated to
> the left.
> When u roll over the div, the className of the div changes to another
> one. This classname change the thumbnail bg image and color.
>
> All this functionality comes from prototype''s observe mouse events
> listeners function.
>
> Now i know this function works well, cause when the viewport show all
> the thumbnails, rollovering the thumbnails changes there classname and
> the background images and etc.
> But if the viewport of IE loads with part of the thumbnails, and show
> just some of them, when u scroll down, those thumbnails don''t
react to
> correctly to mouse events (rollover, etc...) and most of the time they
> ignore the events.
>
> Did anyone came across this kind of IE (6/7) behavior?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---