Back to happy. All is working. Thanks again TJ, and I love when things work as expected! I have been pulling my hair out all weekend!
Karl.. On Sep 19, 11:25 pm, kstubs <[email protected]> wrote: > Oh my gosh! OK, I never considered that bind() returns a function. > Wow... that changes everything. Thanks for the links, and the concise > response T.J. Looking at these items now, and obviously my standalone > code post is moot. > > Karl.. > > On Sep 19, 9:52 pm, "T.J. Crowder" <[email protected]> wrote: > > > > > 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 <[email protected]> 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 <[email protected]> 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" <[email protected]> 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 <[email protected]> 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 [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
