thr3ads.net - Rails spinoffs - Flickering Effect with a mouseover and mouseout events [Jun 2007]

If this information is useful, please help other people find it:
Share via:

Daniel N

2007-Jun-16 12:30 UTC

Flickering Effect with a mouseover and mouseout events

Hi,

I''ve very recently started to get my feet dirty with some pure
javascript
for one of my projects, but I''m having a lot of trouble.  I apologize
in
advance for the length..

I have a list of items

<ul class=''item_list''>

<li id=''item_container_123''>
    <div>
        <a href="http://someurl.com">The Items Title</a>
        <button class=''delete''
                id="delete_button_item_123"
               
style="position:absolute;display:none;top:0px;left:-2em;">
            <div>Delete<div>
        </button>

        <button class=''edit''
                id="edit_button_item_123"
               
style="position:absolute;display:none;top:0px;right:-2em;">
             <div>Edit</div>
        </button>
    </div>
</li>

</ul>

What I''m trying to achive is to have the delete button, and the edit
button
appear on either side of the list item when the mouse if over the list item.

I''m hoping that on the mouse over, it wouldn''t be so jarring
if I could give
it an effect to mouse over with.

To do this I have the follow javascript.

Item = Class.create();  // This is for individual list items
    Item.prototype = {

        initialize: function( containing_item ){
          // SETUP THE VARIOUS BITS AND PIECES OF THE BOOK
            this.container = containing_item;
            this.delete_button = this.container.getElementsBySelector("
button.delete").first();
            this.edit_button = this.container.getElementsBySelector( "
button.edit" ).first();
            this.title = this.container.getElementsBySelector( "a"
).first().innerHTML;
            this.id = this.container.readAttribute( "id" ).gsub(
/item_container_/, "" );
            this.url = this.container.getElementsBySelector(
"a").first().readAttribute( ''href'' );

            // Does this for mouseover of everything
            Event.observe( this.container, "mouseover",
this.onMouseOver.bindAsEventListener(this) );
            Event.observe( this.container, "mouseout",
this.onMouseOut.bindAsEventListener(this) );

            // Observe Clicks on our buttons
            Event.observe( this.delete_button, ''click'',
this.destroy.bindAsEventListener( this ));
            Event.observe( this.edit_button, ''click'',
this.edit.bindAsEventListener( this ));

            // Some display variables
            this.drawsOpen = false;
        },

        destroy: function( event ){
            if( confirm( "This will delete this item.  You can''t
have it
back") ){
                alert( "Deleteing Item:" + this.url );  // Just some
place
holder stuff
            }
        },

        edit: function( event ){
            window.location = this.url + "/edit"  // Some place hoder
stuff
        },

        onMouseOver: function( event ){
                if( !this.drawsOpen )
                this.openDraws();
        },

        onMouseOut: function( event ){
            if( this.drawsOpen ){
                this.closeDraws();
            }
        },

        openDraws: function(){
                new Effect.Appear( this.delete_button, { duration: 0.2 }  );
                this.drawsOpen = true;
        },

        closeDraws: function(){
                new Effect.Fade( this.delete_button, { duration: 0.2 } );
                this.drawsOpen = false;
        }
    }

This is set up via a call on the lists manager

    ItemListManager = Class.create();

    ItemListManager.prototype = {

        initialize: function( the_list ){
            this.list = the_list;
            this.books = new Array();
            this.privacy = this.list.getAttribute( ''id'' )

            // Observe clicks on our list items
            this.list.getElementsBySelector( "li"
).each(function(item)
{
            //$$("#" + this.list + "
li").each(function(item) {
                this.addItem( item );
            }.bind(this));
        },

        addItem: function( book_container ){
            this.books.push( new Book( book_container ) );
        }
    }

Then when the page loads I create a new ItemListManager.

The item list manager works fine.  It collects up the list items and the
mouse over events get attached to the list items fine.  But it doesn''t
work
really at all in terms of making the buttons appear and fade on mouseover
and mouseout.
It shows the buttons but they only sometimes come on when the should.  And
they flicker when I move the mouse over the various items in the list
item.

It seems that the mouse* events are fired for every sub element contained in
the list item, but the actual list item itself may or may not fire an event
at all. With all these events firing for mouseover and mouseout when the
mouse is still completely within the list item, it really doesn''t go
very
well.

Is the the wrong way to approach this?  Is there anywhere where I could go
to get some information on an appropriate way to handle this?

Thanx
Daniel

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Ken Snyder

2007-Jun-17 22:49 UTC

head link

Re: Flickering Effect with a mouseover and mouseout events

Daniel N wrote:> Hi,
>
> ...
> It seems that the mouse* events are fired for every sub element 
> contained in the list item, but the actual list item itself may or may 
> not fire an event at all. With all these events firing for mouseover 
> and mouseout when the mouse is still completely within the list item, 
> it really doesn''t go very well.
>
> Is the the wrong way to approach this?  Is there anywhere where I 
> could go to get some information on an appropriate way to handle this?
>This is a use case for mouseenter and mouseleave.  I submitted a patch 
for it; it is scheduled to be part of Prototype 1.6.  (see 
http://dev.rubyonrails.org/ticket/8354)

Without the patch, you can add the code below to the beginning of your 
mouseover and mouseout functions so that mousing over and out of child 
elements has no effect.

--Ken Snyder


onMouseOver: function(event) {
  var currentTarget = this.container;
  var relatedTarget = $(event.relatedTarget || event.fromElement);
  if (relatedTarget==currentTarget || 
relatedTarget.childOf(currentTarget)) return;
  ...
},
onMouseOut: function(event) {
  var currentTarget = this.container;
  var relatedTarget = $(event.relatedTarget || event.toElement);
  if (relatedTarget==currentTarget || 
relatedTarget.childOf(currentTarget)) return;
  ...
}

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Daniel N

2007-Jun-17 22:57 UTC

head link

Re: Flickering Effect with a mouseover and mouseout events

On 6/18/07, Ken Snyder
<kendsnyder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
> Daniel N wrote:
> > Hi,
> >
> > ...
> > It seems that the mouse* events are fired for every sub element
> > contained in the list item, but the actual list item itself may or may
> > not fire an event at all. With all these events firing for mouseover
> > and mouseout when the mouse is still completely within the list item,
> > it really doesn''t go very well.
> >
> > Is the the wrong way to approach this?  Is there anywhere where I
> > could go to get some information on an appropriate way to handle this?
> >
> This is a use case for mouseenter and mouseleave.  I submitted a patch
> for it; it is scheduled to be part of Prototype 1.6.  (see
> http://dev.rubyonrails.org/ticket/8354)
>
> Without the patch, you can add the code below to the beginning of your
> mouseover and mouseout functions so that mousing over and out of child
> elements has no effect.
>
> --Ken Snyder
>
>
> onMouseOver: function(event) {
>   var currentTarget = this.container;
>   var relatedTarget = $(event.relatedTarget || event.fromElement);
>   if (relatedTarget==currentTarget ||
> relatedTarget.childOf(currentTarget)) return;
>   ...
> },
> onMouseOut: function(event) {
>   var currentTarget = this.container;
>   var relatedTarget = $(event.relatedTarget || event.toElement);
>   if (relatedTarget==currentTarget ||
> relatedTarget.childOf(currentTarget)) return;
>   ...
> }

Sweet.  Thankyou Ken,

I''ll give this a try when I get home tonight.

Cheers
Daniel

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Daniel N

2007-Jun-18 10:16 UTC

head link

Re: Flickering Effect with a mouseover and mouseout events

On 6/18/07, Daniel N <has.sox-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
>
> On 6/18/07, Ken Snyder
<kendsnyder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >
> >
> > Daniel N wrote:
> > > Hi,
> > >
> > > ...
> > > It seems that the mouse* events are fired for every sub element
> > > contained in the list item, but the actual list item itself may
or may
> > > not fire an event at all. With all these events firing for
mouseover
> > > and mouseout when the mouse is still completely within the list
item,
> > > it really doesn''t go very well.
> > >
> > > Is the the wrong way to approach this?  Is there anywhere where I
> > > could go to get some information on an appropriate way to handle
this?
> >
> > >
> > This is a use case for mouseenter and mouseleave.  I submitted a patch
> > for it; it is scheduled to be part of Prototype 1.6.  (see
> > http://dev.rubyonrails.org/ticket/8354 )
> >
> > Without the patch, you can add the code below to the beginning of your
> > mouseover and mouseout functions so that mousing over and out of child
> > elements has no effect.
> >
> > --Ken Snyder
> >
> >
> > onMouseOver: function(event) {
> >   var currentTarget = this.container;
> >   var relatedTarget = $(event.relatedTarget || event.fromElement);
> >   if (relatedTarget==currentTarget ||
> > relatedTarget.childOf(currentTarget)) return;
> >   ...
> > },
> > onMouseOut: function(event) {
> >   var currentTarget = this.container;
> >   var relatedTarget = $(event.relatedTarget || event.toElement);
> >   if (relatedTarget==currentTarget ||
> > relatedTarget.childOf(currentTarget)) return;
> >   ...
> > }
>
>
> Sweet.  Thankyou Ken,
>
> I''ll give this a try when I get home tonight.
>
> Cheers
> Daniel
>
>
>This works great.  Thankyou.

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Ken Snyder

2007-Jun-18 12:58 UTC

head link

Re: Flickering Effect with a mouseover and mouseout events

Daniel N wrote:>
>         onMouseOver: function(event) {
>           var currentTarget = this.container;
>           var relatedTarget = $(event.relatedTarget || event.fromElement);
>           if (relatedTarget==currentTarget ||
>         relatedTarget.childOf(currentTarget)) return;
>           ...
>         },
>         onMouseOut: function(event) {
>           var currentTarget = this.container;
>           var relatedTarget = $(event.relatedTarget || event.toElement);
>           if (relatedTarget==currentTarget ||
>         relatedTarget.childOf(currentTarget)) return;
>           ...
>         }
>
>
> This works great.  Thankyou.
>PS. I discovered that childOf() only returns immediate descendants; 
using descendantOf() is more correct.

--Ken

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Jun 2007 - Flickering Effect with a mouseover and mouseout events

Flickering Effect with a mouseover and mouseout events

Re: Flickering Effect with a mouseover and mouseout events

Re: Flickering Effect with a mouseover and mouseout events

Re: Flickering Effect with a mouseover and mouseout events

Re: Flickering Effect with a mouseover and mouseout events