Archive for the ‘Mozilla’ Category

Cross Browser Guide Part 3 – Event Handling in Different Browsers

May 10th, 2008 by Sidar Ok

For the first two articles of the series: Part 1 and Part 2 .

The worst part of making an application work in multiple browsers is the different interpretation of JavaScript by every browser (you know what I mean). One of the most obvious ones is the event handling architecture difference amongst Internet Explorer and the browsers those follow W3C standards for DOM event handling.

This is a very important topic because everything starts with events. No events, no scripting. If at one point of your script your event handling fails, it is very likely that the rest of it will not be executed. So we need to understand the event models of –at least – the major browsers. We can group them by three major categories:

1 – Traditional Model

In the old browsers we were able to attach only through inline scripting such as:

<input type=”button” id=”myButton” value=”Press” onclick=”alert(’hello world!’)” />

But this is not easily maintainable and recommended now. So the Netscape notation is a common way to hook your events up:

element.onclick = doSomething;

As you can see there is a certain drawback that we can not add more than one listeners to an event as we can do in today’s modern languages. This model is supported by most of the browsers, so don’t worry, you don’t need to write any extra codes for here.

2 – W3C Model

In 2000, W3C has published a DOM Level 2 Events Specification to address the problems about the traditional model.

In this model, assignments to a specific event are done by add and remove events for a specific element. For example, to add you say:

myButton.addEventListener(‘click’, doSomething, false);

Where to remove you need to write:

myButton.removeEventListener(‘click’, doSomething, false);

As you can see you can add or remove multiple listeners to an event in this model. For e.g the following manages to fire both doSomething1 and doSomething2 when myButton is clicked:

myButton.addEventListener(‘click’, doSomething1, false);
myButton.addEventListener(‘click’, doSomething2, false);

W3C also supports anonymous functions that are very similar to anonymous functions in C#.NET 2.0.

The last Boolean parameter states whether the event handling will be done in bubbling phase or not (in handling phase).

3 – Microsoft Event Bubbling Model

This event model is similar to W3C’s one, but it is not the same. The name of the method to attach the event is different, and as in the below:

myButton.attachEvent(‘onclick’, doSomething);

and to remove the handler you use:

myButton.detachEvent(‘onclick’, doSomething);

As you see, there is not third parameter specifying capture or bubble, as the events isn MS programming environment always bubble, not captured.

As a result of this it is impossible to know exactly what element raised that event without doing anything ( I advice to look at MS Ajax Source code to see how they handled this situation)

That’s why while working in IE 7.0, we need to be careful about window.event behavior. This is there to store the latest event happened in the window event stack, but is not supported by the other browsers. For e.g, you want to cancel the default behavior in a specific circumstance, and to do this the way in IE 7.0 is:

window.event.returnValue = true;

But this will not work in FireFox. You then need to check an extra event handler, that is automatically injected in by Firefox and our event handler transforms as following:

function doSomething()
  if (!e) // if the parameter is provided by the browser
    e = window.event;

  if (e.preventDefault)  // firefox style
    e.returnValue = false;

Also if you return false from the listener, the default action will be prevented (such as the post back of a button or a redirection of a link. This is very useful especially in client side validation of forms.

We will continue to talk about the JavaScript problems across the browsers in the following posts, stay cool!

kick it on

Share it on: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • Facebook
  • Mixx
  • Google
  • Blogosphere News
  • e-mail
  • YahooMyWeb
  • DotNetKicks
  • DZone

Sidar is Crossing the Browser – Guide for Cross Browser Development Series – 1

April 24th, 2008 by Sidar Ok

Ok, this is not one of the other posts devoted to blame Microsoft on not obeying the standards. I leave that area to the “debate experts” and wash my hands off. I am now looking from the poor (and pure) developer’s perspective: whether we like it or not, we have to live with it. We want our applications work in a variety of environments, regardless of the browser used. (That was the whole point of HTTP did we miss it?)

So we need to identify the areas of differences between browsers and try to fix the issues to support other browsers too.

Hence I am starting “Sidar Crossing the Browser” series in this blog. Hoping that it will be the place to pile up this PITA .

What bits of web site development have the risk of being incompatible with a type of browser?

Almost every. Html tags, cookies, script files, stylesheets – and of course add-ons and executables.

Get Equipped To Start

We know what to do so let’s proceed to how to do.

a) “Good to know”s

Since everybody can write a browser, it is almost impossible to support all browsers or all html rendering engines. So the best strategy would be just to make the majority happy. This depends on your application needs,e.g if you are developing an application for the whole internet you’ll need to take care of Internet explorer (7.0 and 6.0 mainly), Mozilla, Opera and Safari browsers. But if your clients are going to be using Linux, to be supported, then you of course don’t need to spend time on IE compatibility.

b) The Tools

Of course after modifying your code you’ll want to see that if it is working or not, and if it is not working trouble shoot it. To do this, you should be fine to install as many browsers as you can onto your operating system. But as you’ll figure, testing with Different Major Versions of a browser becomes an issue.

As you know IE 7.0 is not forcing itself to be installed on IE 6.0. But it is normally not possible to run these 2 version of IE in parallel. So here comes a brilliant tool : MultipleIE . When you run the application, a screen similar to the following is the thing you actually need :


Picture 1 : Multiple IE Running App Window


OK, we have to confess that we don’t consider about browser compatibility until we bump into it – of course this is wrong but is the usual case. With the new world with AJAX and the promotion of script files, css based designs etc “view source” is not your best friend any more. In IE, even the line number you get the error is usually wrong !

Having worked much with CSS, one of the pains is nested – css and trying to find which css definition the nasty looking control is picking up. (Spending hours on trying to find the right class and at the end seeing that it is embedded in the page is not very tempting !)

So here are the tools I use for debugging :


Of course Fiddler rocks! Fiddler is basically an HTTP debugger from Microsoft, letting you to analyze and debug Http Requests and Http Response. This was very useful for me especially when developing AJAX applications, that the html is coming and being rendered on the fly.

The coolest thing is you can generate your own requests with the headers you want, and see the response.

Here is a snapshot of Fiddler main screen :


Picture 2 : Fiddler

For Internet Explorer

- Internet Explorer Web Developer Toolbar : This is the one of the best tools for web page development. It’s support for viewing the style of a selected element (you can select an element by click, so even if it is visible buy some ajax condition, you’ll be able to see the mark up) and CSS Style tracer is two of the most that I enjoy. Below you see a picture of the helper window that resides at the bottom of the page. See the DOM browser on the very left. I selected a menu item (partner & customer solutions) and seeing its properties in the window :

- clip_image006

Picture 3. Internet Explorer Developer Toolbar

One of the many cool things about this tool is that you can dynamically add properties via green button (these can even be a DOM event and call a js method).

Nikhil Kothari’s Web Application Helper

Asp.NET Architect at Microsoft, Nikhil Kothari has written an excellent tool that comes with a bunch of cool features, such as the ability to execute new scripts within the current context, debugging on the fly generated javascript and building & managing request & response objects in specific scenarios.

For Firefox

I can already hear the fans shouting FireBug name,that’s the group of which I also am a proud member. It is the best ever to provide excellent debugging and javascript management environment for FireFox. On top of the ability to inspect & edit html and javascript, you can monitor the bandwidth coming to the browser and forth.

Another cool feature is it enables javascript logging so you can see what’s happening without interfering the process.

Below is how firebug looks like after enabled in a firefox browser:


Picture 4: Firebug

Another excellent add on for Firefox that I have to mention here is “User Agent Switcher” by Chris Pederick. As name states, it lets you to test how your application behaves with different user agents.

For Safari

Next version of Safari is supposed to include a release version of Web Inspector. It has lots of great futures such as inspecting an element and viewing the page metrics.


Picture 5 : Safari Web Inspector

For Opera

Opera has a web developer tool which offers a large variety of functionalities; it is an integration of a bunch of add-ons.


Picture 6 : Web Development Helper for Opera

So now, we are pretty much ready to start to rock and roll. The following posts will be shorter and each one will be about a different browser compatibility issue. Don’t hesitate to let me know if you need to ask or request anything.

kick it on

Share it on: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • Facebook
  • Mixx
  • Google
  • Blogosphere News
  • e-mail
  • YahooMyWeb
  • DotNetKicks
  • DZone