Comments on: Breaking The Rules

By: Leptos Estates

Leptos Estates — Thu, 17 May 2007 06:59:15 +0000

Property in Greece. Wide range of holiday and residential properties from the leading property developer. Excellent investment opportunities. Custom built and completed properties in Greece, Paros, Crete and Santorini.

By: Matt Keogh

Matt Keogh — Mon, 30 Apr 2007 13:09:55 +0000

I think the hover technique described by Dave Kees in the comments makes more sense.You can set the hover behaviour using conditional comments just for the IE 5 and 6. That way we keep the code clean and you only have to set it once. Obviously you have to remember to think about what happens when JS if off still.

By: Dustin Diaz

Dustin Diaz — Tue, 24 Apr 2007 06:06:33 +0000

I just want to say that I agree with everything that was said in this article. I know I haven’t been a while for ages, but it was a breath of fresh air seeing other js ninja’s breaking the rules as well. It’s just downright practical.

By: awflasher

awflasher — Mon, 23 Apr 2007 09:56:18 +0000

Hey, I find this topic by accident, sounds great. BTW, I am a web developer from China.

By: Binny V A

Binny V A — Wed, 11 Apr 2007 10:38:32 +0000

As long as you know what you are doing, I guess breaking rules are OK.

By: Graham

Graham — Tue, 10 Apr 2007 15:36:11 +0000

Not to split hairs, but if you have 50 LIs and only the most recently clicked one gets the class “selected” then you should really us an ID instead of a class. This way, in order to remove the old “selected” and apply it to a new class, you can just do something like $(‘selected’).setAttribute(“id”,”“) when the new LI is clicked, then add that ID back to the newly clicked LI.

function changeSelected(argumentElement) { $(‘selected’).setAttribute(“id”,”“); argumentElement.setAttribute(“id”,”selected”); } // fire this function when any LI is clicked and pass the clicked LI as the argument.

By: Tobie Langel

Tobie Langel — Mon, 09 Apr 2007 22:19:59 +0000

Actually, as you are setting one observer instead of 50, you should get pretty drastic performance improvements.

By: Ryan Campbell

Ryan Campbell — Mon, 09 Apr 2007 21:43:51 +0000

Yeah, Tobie, the more I look at your approach the more I like it. On the surface it appears more complex, but it is reusable and self sustaining, which is nice. The reason I initially switched to globals is because of performance. If Event.findElement has no performance drawbacks, then I think I’ll start trying this approach.

By: Paul Irish

Paul Irish — Mon, 09 Apr 2007 21:15:02 +0000

I so appreciate it when others make use of the onclick attribute, it makes analyzing someone else’s code FAR easier. I don’t see a good justification for why event attaching needs to be done more unobtrusively.

By: Tobie Langel

Tobie Langel — Mon, 09 Apr 2007 21:11:10 +0000

Actually, let me rephrase that:

var Selector = Class.create();
Selector.prototype = {
  initialize: function(list) {
    list = $(list);
    this.onClick = this.select.bindAsEventListener(this);
    list.observe('click', this.onClick);
    this.selected = list.getElementsByClassName("selected").first() || null;
  },

  select: function(event) {
    var element = $(Event.findElement(event, 'li'));
    if(!element.hasClassName("selected")) {
      if(this.selected)
        this.selected.removeClassName("selected");
      element.addClassName("selected");
      this.selected = element;
    }
  }
}

Better ?