Skip to content

Effect.Highlight

March 1, 2007

I was recently trying to get the scriptaculous highlight effect working but it wasn’t playing nice. For some reason it only works from event handlers. After a lot of debugging I narrowed the issue down the to prototype map function not working correctly in conjunction with the bind() call. Since it appears to work when called from an event handler I really can’t explain what the reason for this is. The workaround is simple enough. Just don’t use bind(). Below is a monkey patch which works around the issue.

Just include this somewhere after you include the scriptaculous library.

// Monkey patch scriptaculous effects.
Effect.Highlight.prototype.setup = function() {
    // Prevent executing on elements not in the layout flow
    if(this.element.getStyle('display')=='none') { this.cancel(); return; }
    // Disable background image during the effect
    this.oldStyle = {};
    if (!this.options.keepBackgroundImage) {
        this.oldStyle.backgroundImage = this.element.getStyle('background-image');
        this.element.setStyle({backgroundImage: 'none'});
    }
    if(!this.options.endcolor)
        this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
    if(!this.options.restorecolor)
        this.options.restorecolor = this.element.getStyle('background-color');
    // init color calculations

    // self thing fixes the problem with map misbehaving in conjunction with the bind call.  don't
    // understand why this was the case.  Almost seems like a javascript bug.
    var self = this;
    this._base  = $R(0,2).map(function(i){ return parseInt(self.options.startcolor.slice(i*2+1,i*2+3),16) });
    this._delta = $R(0,2).map(function(i){ return parseInt(self.options.endcolor.slice(i*2+1,i*2+3),16)-self._base[i] });
}

Effect.Highlight.prototype.update = function(position) {
    // self thing fixes the problem with inject misbehaving in conjunction with the bind call.  don't
    // understand why this was the case.  Almost seems like a javascript bug.
    var self = this;
    this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
        return m+(Math.round(self._base[i]+(self._delta[i]*position)).toColorPart()); }) });
}
Advertisements

From → Javascript

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: