Thomas,

 

Thanks for the reply.  I know IE 5.5 isn’t specifically supported; I just wondered if you wanted to add it to the list since there’s still a decent number of people who use it (it ranks higher than Opera and Safari combined on our websites).

 

I tested the code more thoroughly with the latest scriptaculous (rc4), and I think I’ve narrowed down the problem.  This is what happens:

1. I have a table that begins with no rows, an ajax call retrieves the data necessary to build the rows, and they are added to the TBODY.

2. Alternating rows have css classes of ‘lightrow’ and ‘darkrow’.  Since new rows can be added by clicking on [+] icons to expand the tree, each row has the css class changed as needed to alternate colors.  At this point, some browsers ignore applying the css class at the TR level, because each TD has the same class as the TR.  So, I have to loop through the child TDs and add the same class to each one to keep the colors correct.

3. An Effect.Highlight is then applied to each newly-added row.  Now, since the previous code has applied a class to each TD, the tr.style.backgroundColor = #XXXXXX does not affect the TD’s under it.  They simply keep the background color of their css class.  I thought I had fixed it so that the className on each TD was not modified prior to doing the Effect.Highlight, but for some reason that stopped working with the latest scriptaculous.  This is baffling to me since it is unrelated code.

 

So, I can easily modify my own code to add an Effect.Highlight for each TD element, but even on a 3.4GHz P4 with 2GB of RAM, it is noticeably slower to the human eye (I have a duration of 1.5s and some of the effects finish before the browser finishes rendering the table).  That’s because I’m highlighting 10-20 rows, and each row has 14 columns.

 

So, is this a common enough scenario that you would like to modify scriptaculous to handle it, or am I on my own to overload the Effect.Highlight functions in my own library?  Or is there some other way to deal with this that I’m not considering?  I think all of the changes I made are safe enough to consider adding them.  I would imagine if someone wanted to highlight a TR, they actually intend to highlight something on screen (i.e. the TD elements beneath it).

 

Here’s what I changed in Effect.Highlight to make it work for me (changes in bold):

 

  update: function(position) {

    var effect = this; var colors = $R(0,2).map( function(i){

      return Math.round(effect.colors_base[i]+(effect.colors_delta[i]*position))

    });

    this.applyColor("#" +

      colors[0].toColorPart() + colors[1].toColorPart() + colors[2].toColorPart());

  },

  finish: function() {

    this.applyColor(this.options.restorecolor);

    this.element.style.backgroundImage = this.oldBgImage;

  },

  applyColor: function(color) {

    this.element.style.backgroundColor = color;

    if (this.element.tagName == 'TR') {

      for (var i=0; i<this.element.childNodes.length; i++) {

        var td = this.element.childNodes[i];

        if (td.tagName == 'TD') {

          td.style.backgroundColor = color;

        }

      }

    }

  }

 

And in Effect.Highlight.setup(), change from:

    if (typeof this.options.restorecolor == "undefined")

      this.options.restorecolor = this.element.style.backgroundColor;

 

To:

    if (typeof this.options.restorecolor == "undefined")

      this.options.restorecolor = Element.getStyle(this.element, 'background-color');

 

 

This was tested successfully in:
Firefox 1.0.7

IE 6

IE 5.5

Opera 8.5

Safari 1.3

 

 

Thanks for listening,

Greg

 


From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Thomas Fuchs
Sent: Wednesday, November 09, 2005 3:08 AM
To: [email protected]
Subject: Re: [Rails-spinoffs] question about Effect.Highlight and IE 5.5

 

See the list of supported browsers here:

(this is the same as for Prototype)

 

If you want to support IE 5.5, just stick your own copy in an 

additional .js file you load in, and maybe share the completed

example here! :)

 

You can also try getting the unittests to run on IE 5.5

(I haven't bothered with this).

 

Cheers,

Thomas

 

Am 07.11.2005 um 19:27 schrieb Gregory Hill:



I’ve recently begun testing some of the scriptaculous functionality in IE 5.5, since my company wants me to support as many browsers as possible.  When I do an Effect.Highlight on a <tr>, it doesn’t quite work right.  I’ve figured out a few things, but I’m not sure whether you want to change them or not.  Here’s what I know:

In Effect.Highlight.setup (line 532 in the rc4 version of effects.js), it does an element.style.backgroundColor to determine the ‘restorecolor’.  This doesn’t seem to work in IE 5.5, and if you switch it to Element.getStyle(this.element, ‘background-color’) (as is done a few lines earlier when determining the ‘endcolor’), it works correctly.  Should this be changed?

 

That, however, doesn’t fix the problem.  The problem is that IE 5.5 seems to ignore setting the style.backgroundColor on TR elements.  If you apply it instead to all of its child TD elements, it will work correctly.  So, in the Effect.Highlight.update and Effect.Highligh.finish functions you would need to loop through all childNodes if the element is a TR and apply the same color to each childNode, as such:

(...) 

There was another browser that had the same issue as IE 5.5, I can’t remember if it was Opera 8 or Safari 1.3 at the moment, though.  And I haven’t tested the fix in that other browser, either.

 Anyway, as that will probably make the effect slower for everyone just to fix fringe cases, I’m not sure it’s desirable to add it.  Maybe we could do a browser test as well.  I thought I’d pass it along to see what you guys think.  Everything else I tested works in IE 5.5 just fine (and Effect.Highlight works if it isn’t a TR).

 Oh, and nothing works in IE 5.0 at all, in case anyone is wondering.  _javascript_ errors galore.  Even prototype.js doesn’t work, because IE 5 doesn’t seem to recognize the (‘value’ in opt) used to determine a SELECT box’s value.

_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Reply via email to