DHTML

Binding your setTimeout methods in JavaScript using Prototype

Posted on April 20, 2009. Filed under: DHTML, JavaScript | Tags: , , , , |

Never mind, use this instead :-)

www.prototypejs.org/api/function/delay

Two features which are indispensable in Prototype are it’s bind and bindAsEventListener functions. I’m not going to write about what they can do for you, but do know that they are indispensable to OO JavaScript for callbacks, lambda functions, closures etc… One place where I desperately wanted to use bind()ing, as well as have the ability to call methods within an instantiated Class, was with setTimeout() callbacks. Here’s the solution I came up with:


var _Class = Class.create({
    initialize: function() {
        this._someVar = 0;
    },
    function1: function() {
        this._someVar++;
        this.function3();
    },
    function2: function() {
        var _lambda = this.function1.bind(this);
        setTimeout(_lambda,10);
    },
    function3: function() {
        alert(this._someVar);
    }
});

var object = new _Class;
object.function3(); // 0
object.function2(); // 1

Basically, what you do is assign the method you want to call [without the parenthesis ()] to a variable [in this case, _lambda], and finally bind() it…


var _lambda = this.function1.bind(this);

Then, simply assign _lambda to setTimeout().

If you don’t bind() this to the method, it will assume that the this you’re referring to is window, and not your _Class instance.

As always, please comment with any constructive contributions below. I know this isn’t probably the best way to implement this, so if you know a better way, please comment!

Read Full Post | Make a Comment ( 1 so far )

IE + overflow: hidden + innerHTML == disaster

Posted on December 30, 2007. Filed under: DHTML | Tags: , , , , , |

So, once again, IE has tested my patience … and lost.

Here’s the scoop:

I have a div styled with a width, height and an overflow set to hidden [so it qualifies for IE’s oh-so-crucial “hasLayout” attribute]. In essence this div will be populated with content dynamically with JS using the inner HTML property via an ajax call. I have some custom scrollbars I built to scroll the div [hence hiding the overflow content — therefore hiding and chrome scrollbars] … Simple enough, right? I’ve seen this done about a dozen times….

This works flawlessly in Firefox [as expected] … In IE, however, the inner content of the div would spill out into the layout as if it were on a different z-index. I tried manually setting the height and overflow CSS properties every time the script would populate the div, I even went as far as adding the inner content piece by piece [in this case the content is an unsorted list [ul] with one or many [li] children] … that didn’t work.

Then I remembered that IE was written by retards and tried something that really makes no sense: I changed the position to relative. Now, this property pertains to the element’s position within the DOM, not how the overflow functions within the element.

So, position == outside, overflow == inside…..

Me – 1
IE – 0

Read Full Post | Make a Comment ( 9 so far )

Liked it here?
Why not try sites on the blogroll...