Hi,

> ...I am still confused on the behavior of
> the test javascript code.

Your first call, `_test.show('outer', 0);`, is processed like this:

1. Log the call via console.log
2. Since itt == 0, go into the first if block
3. Do a `bind` that's completely ignored because it's never called or
stored anywhere
4. Do a call to `test#show`, which is
   4.a. Logged via console.log
   4.b. itt != 0 so first if block skipped
   4.c. itt == 1 so enter second block
   4.d. Do a `bind` that's completely ignored because it's never
called or stored anywhere
5. Do a call to `test#hide`, which just logs it

> The wait to show event is coded like this:
>
> this.show.bind(this).delay(2);

There, your bound function for `test#show` *is* used -- you're setting
up a delayed call to it.

> A method hide on the same object occurs on document mouseover.  One
> thing it does is to set
>
> this.active = false;
>
> This document mouseover could occur in the 2 second delay.  I am
> expecting that setting this.active = false will cancel expanding the
> banner.

It should, from what you've described.

You've talked about mouseover and mouseout. For something like this,
I'd use mouseenter and mouseleave instead. Prototype 1.6.1 and up
emulate these on browsers that don't provide them (which is many of
them; they were originally in IE only). mouseenter and mouseleave
don't bubble, which in some situations is very useful. Here's an
example using those events and an "active" flag with a delayed
function call as you've described:
http://jsbin.com/asefu4

Using an active flag like that has an issue: If the user mouses over
the banner, mouses out, and then returns within the two seconds, the
banner will expand almost immediately (as a result of the original two-
second delay).

Here's an example that uses the handle returned by Function#delay
instead:
http://jsbin.com/asefu4/2

HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

On Sep 20, 2:12 am, kstubs <kst...@gmail.com> wrote:
> Does it mean:  if I am using a member variable (ie., this.active =
> false;) who's value is true when I'm over the banner and if true then
> show the banner after specific wait time but if I cancel the variable
> because of another event, like mouseover the document, the method
> bound to the show() event is a copy, so this.active is true??
>
> The wait to show event is coded like this:
>
> this.show.bind(this).delay(2);
>
> The show event has something like this:
>
> if(this.active)
>   this.banner.addClassName('expanded');
>
> A method hide on the same object occurs on document mouseover.  One
> thing it does is to set
>
> this.active = false;
>
> This document mouseover could occur in the 2 second delay.  I am
> expecting that setting this.active = false will cancel expanding the
> banner.
>
> Does this clear things up?
>
> Karl..
>
> On Sep 19, 4:33 pm, kstubs <kst...@gmail.com> wrote:
>
>
>
> > My Challenge:
>
> > I have a banner on my website,www.meetscoresonline.com When you
> > rollover the banner, the action to expand the banner will pause,
> > expecting the user to remain on the banner to ensure he wishes the
> > banner to expand.  The banner should remain expanded until I leave the
> > banner.
>
> > Not sure why I am having so much trouble with this, but things like
> > mouseout event is firing when I rollover objects contained by the
> > banner at which time I should NOT collapse the banner.  The banner
> > should only collapse when the user mouses away from the banner.
>
> > In my efforts to code this, I wrote up the test javascript and was
> > trying to understand the behavior of binding the objects.  Your
> > explanation helps, but honestly I am still confused on the behavior of
> > the test javascript code.
>
> > Karl..
>
> > On Sep 19, 2:48 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
>
> > > Hi,
>
> > > I can't quite make out what you're trying to do, but I can tell you
> > > why what you're doing isn't working: Function#bind[1] *returns* a new
> > > bound function, it doesn't change the original function at all. Since
> > > you're not assigning the return value to anything, it's not being
> > > used.
>
> > > You typically use #bind when you're passing a reference to a function
> > > that needs to be called with a specific context (`this` value) into
> > > something that doesn't provide any way for you to tell it what that
> > > context should be (like an event handler). What #bind does is create a
> > > new function that doesn't care what `this` value it's called with. The
> > > new function, when called, turns around and calls the original
> > > function with the `this` value you told it to use (as well as any
> > > curried arguments and then the actual arguments it was called with).
>
> > > Here's a classic event handler example:
>
> > >     $('someElement').observe('click', myObj.myMethod.bind(myobj));
>
> > > The above uses #bind to create a function that, when called, will turn
> > > around and call `myMethod` in the context of `myObj`. `myMethod` is
> > > not changed in any way. The return value of #bind is passed in as the
> > > handler. To make it a bit more explicit:
>
> > >     var handler = myObj.myMethod.bind(myobj);
> > >     $('someElement').observe('click', handler);
>
> > > [1]http://api.prototypejs.org/language/function/prototype/bind/
>
> > > HTH,
> > > --
> > > T.J. Crowder
> > > Independent Software Engineer
> > > tj / crowder software / com
> > > www / crowder software / com
>
> > > On Sep 18, 7:36 pm, kstubs <kst...@gmail.com> wrote:
>
> > > > In my test class, I call show() method externally and then internally
> > > > but the internal calls are not working when binding "this".  The
> > > > expected console results for the following implementation:
>
> > > >     _test = new test();
> > > >     _test.show('outer', 0);
> > > >     _test.hide('outer');
>
> > > > EXPECTED CONSOLE LOG:
> > > > show: outer
> > > > show: inner
> > > > show: inner no bind
> > > > hide: inner
> > > > hide: outer
>
> > > > ACTUAL CONSOLE LOG:
> > > > show: outer
> > > > show: inner no bind
> > > > hide: outer
>
> > > > Here is my test class.  Is there something wrong with the binding
> > > > method?
>
> > > > var test = Class.create({
> > > >     show: function(caller, itt)
> > > >     {
> > > >         console.log('show: ' + caller);
>
> > > >         if(itt == 0)
> > > >         {
> > > >             this.show.bind(this, 'inner', 1);
> > > >             this.show('inner no bind', 1);
> > > >         }
>
> > > >         if(itt == 1)
> > > >             this.hide.bind(this, 'inner', itt);
> > > >     },
> > > >     hide: function(caller)
> > > >     {
> > > >         console.log('hide: ' + caller);
>
> > > >     }
>
> > > > });

-- 
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to