Cameron McKay » firefox

How to (kinda) fix Firefox’s showModalDialog

cdmckay — Tue, 07 Jul 2009 18:48:38 +0000

As someone who has had to write a lot of IE-only code (against my will, I swear!), I was pleased to hear that Firefox 3.0 added support for the IE JavaScript function window.showModalDialog. Being in the middle of re-writing an IE-only web application, I thought this would simplify rewriting the modal dialogs to be compatible with both browsers.

Unfortunately, I don’t think the folks at Mozilla put their best effort into this one.

First of all, the Firefox implementation only supports a subset of the IE options. Here’s a table showing what each browsers implementation supports according to their documentation:

Documented Support
Option	Internet Explorer	Firefox
dialogWidth	Yes	Yes
dialogHeight	Yes	Yes
dialogLeft	Yes	Yes
dialogTop	Yes	Yes
center	Yes	Yes
dialogHide	Yes	No
edge	Yes	No
resizable	Yes	Yes
scroll	Yes	Yes
status	Yes	No
unadorned	Yes	No

Doesn’t seem too bad, right? We still have center, resizable and scroll right? Right? Wrong.

Documentation != Implementation

It seems the guys who wrote the Firefox documentation weren’t the same guys who wrote the code. Including center, resizable or scroll in your arguments string has no effect whatsoever. In fact, center is supposed to be on by default, but I can tell you right now that the modal dialog sure as hell isn’t centered.

Here’s an updated support matrix:

Actual Support
Option	Internet Explorer	Firefox
dialogWidth	Yes	Yes
dialogHeight	Yes	Yes
dialogLeft	Yes	Yes
dialogTop	Yes	Yes
center	Yes	No
dialogHide	Yes	No
edge	Yes	No
resizable	Yes	No
scroll	Yes	No
status	Yes	No
unadorned	Yes	No

Fortunately, they did get one part right: the dialog is modal. Woooo!

Can we fix it?

Well, we can, kinda. We can’t fix resizable, because that’s a property of the window, and we can’t fix scroll for the same reason. We can, however, emulate the center option by using dialogLeft and dialogTop. Here’s some quick-and-dirty code I wrote to do that.

var oldShowModalDialog = window.showModalDialog;
window.showModalDialog = function(url, args, options)
{           
  // Convert the options string into an object.
  var pairs = options.replace(/\s+/g, "").split(";");
  var option = {};
  $.each(pairs, function()
  {
    var pair = this.split(":");
    if (pair.length != 2) return true;
 
    option[pair[0]] = pair[1];
  });
 
  // Get the width and height of the document.
  var width = $(document).width();
  var height = $(document).height();
 
  // Get the width and height of the dialog.
  var dialogWidth = option.dialogWidth.replace("px", ""); 
  var dialogHeight = option.dialogHeight.replace("px", "");
 
  // Calculate where the dialog needs to be to be
  // centered.
  var dialogLeft = (width - dialogWidth) / 2;
  var dialogTop = (height - dialogHeight) / 2;
 
  // Add those settings to the options string.
  options += "dialogLeft: " + dialogLeft + "; ";
  options += "dialogTop: " + dialogTop + "; ";
 
  // Call the original function.
  return oldShowModalDialog(url, args, options);
};

Although this code uses jQuery, you could easily rewrite it to use vanilla JavaScript.

Will it be fixed soon?

Firefox has had showModalDialog since 3.0. So naturally, you’d have assumed they’d have fixed this bug in 3.5, right? Nope! The bug still exists in 3.5. Thus, I wouldn’t hold my breath on this one being fixed anytime soon.

Introducing JSS

cdmckay — Fri, 01 May 2009 04:43:34 +0000

Ever wanted to make an image rollover, but you don’t know JavaScript? In this tutorial, we show you how JSS, a CSS-like language, makes this a breeze.

Consider these two images:

Imagine we wanted to make them “rollover”, i.e. the zebra should be shown when nothing is happening, and the shark should be showed when the mouse is “rolled over” (i.e. on top of) the zebra. Like this:

Before we start writing some JSS, let’s write some HTML for a page just showing the rollover at rest (i.e. just show a plain old static image):

<html>
  <head>
    <title>JSS Rollover</title>
  </head>
  <body>
    <img src="image_off.png" />
  </body>
</html>

If we copied this code into an HTML file and ran it on our browser, we would see a static image of a zebra. Not that exciting, right? Now let’s see how we can use JSS to make this zebra “rollover” to the shark when the mouse is on it. Here’s the JSS stylesheet:

$.jss.declare({
 
  "img[src-over]":
  {
    hover: "set-attr src {src-over} | set-attr src {src-out}"
  }
 
});

Let’s step through this syntax, because there’s a lot going on here, even though it’s a single line. First, let’s annotate the JSS source so we can refer to it easier:

$.jss.declare({ // 1. Boilerplate that starts any JSS stylesheet.
 
  // 2. Rule
  "img[src-over]": // 3. CSS Selector
  {
    // 4. JSS Declaration
    hover: "set-attr src {src-over} | set-attr src {src-out}"
  }
 
});

As you might have noticed, a JSS stylesheet looks very similar to a CSS stylesheet. Let’s walk through the anatomy of a JSS stylesheet.

At the top of any JSS stylesheet there is some boilerplate code (1). This is necessary because a JSS stylesheet is actually a JavaScript program. However, beyond the fact that this boilerplate needs to be in every JSS stylesheet, you don’t really need to know what it does.

A JSS stylesheet is made up of an unlimited number of rules (2). This is the same as in a CSS stylesheet. Inside a JSS rule, there are two components, a selector (3) and an unlimited number of declarations (inside a declaration block) (4). This is where we start to see some of the advantages of JSS over using plain CSS.

JSS selectors are powered by jQuery. As such, JSS supports any CSS3-compliant selector. In addition, JSS also allows you to use any of the jQuery CSS selector extensions as well.

For example, in CSS, this stylesheet should stripe all the tables on the page as alternating gray and white:

table tr:nth-child(odd)
{ background-color: #eee; }
 
table tr:nth-child(even)
{ background-color: #fff; }

However, if you tried to use that CSS stylesheet in the two most popular browsers available (IE7 and Firefox 3) you would discover that it didn’t work. On the other hand, if you use the following JSS stylesheet…

$.jss.declare({
 
  "table tr:nth-child(odd)":
  { background_color: "#eee" }
 
  "table tr:nth-child(even)":
  { background_color: "#fff" }
 
});

…you would discover that it worked in all major browsers. By using a JavaScript selector engine, JSS offers better cross-browser styling than regular CSS.

(Aside: Before all you web developers out there go crazy, I would like to note that I realize there are several drawbacks to using JavaScript to style your page. Stay tuned to the end of this article for a discussion of them).

Now let’s return to our task of making a rollover. How does the JSS stylesheet make it possible? Let’s take a look at that JSS stylesheet again:

$.jss.declare({ // 1. Boilerplate that starts any JSS stylesheet.
 
  // 2. Rule
  "img[src-over]": // 3. CSS Selector
  {
    // 4. JSS Declaration
    hover: "set-attr src {src-over} | set-attr src {src-out}"
  }
 
});

Let’s look closer at the rule. More specifically, take a look at the CSS selector. For anyone familiar CSS, it reads “select all img tags that have the attribute src-over”. Why would we want to do that? Well, as it happens, we need some way to describe which image to use when the user mouses over our image. In order to do that, we’re going to use something called a custom attribute.

Custom attributes are user-defined attributes on HTML tags. For example, the img tag has an attribute called src. That’s a proper attribute that is defined in a W3C recommendation. What we’re going to do is add two new attributes, src-over and src-out, that are not part of any W3C standard. We just made them up because they’re convenient for our purposes.

Now that we’ve decided that we’re adding these two attributes, we need to add them to our HTML file:

<html>
  <head>
    <title>JSS Rollover</title>
  </head>
  <body>
    <img src="image_off.png"
        src-out="image_off.png" src-over="image_on.png" />
  </body>
</html>

With that done, let’s take a look at the last part of the JSS stylesheet: the declaration. A JSS declaration has a property (hover) and a value (“set-attr src {src-over} | set-attr src {src-out}”). This is just like a CSS declaration, like “font-family: Arial, sans-serif”. In that case, “font-family” is the property and “Arial, sans-serif” is the value.

In the case of the rollover JSS stylesheet, the hover property must have a value with the following structure:

hover: "jss-expression | jss-expression"

The first JSS expression on the left is run when the mouse is over the image area, and the right JSS expression is run when the mouse leaves the image area.

Let’s look at what happens in the JSS rollover stylesheet when the mouse is brought over the image area:

set-attr src {src-over}

This JSS expression reads: “set the src attribute (of the selected element) to the contents of the src-over attribute (of the selected element)”. This is because “set-attr” is a JSS command. The “set-attr” command takes two arguments: the attribute to change, and the value to change it to. That leaves one more question. What’s the deal with the curly braces?

In JSS, curly braces are basically a “get-attr” command. They fetch the value of an attribute. In the context they are being used here, they fetch the value of the “src-over” attribute (which happens to be the name of the shark image “image_on.gif”).

With that information in hand, it can be deduced that the right hand side…

set-attr src {src-out}

…switches the src attribute back to src-out image URL when the mouse leaves the image area.

Thus, if we put it all together, and include the appropriate JavaScript files, we have the following. In the “index.html” file we have:

<html>
  <head>
    <title>JSS Rollover</title>
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='jquery.jss.js'></script>
    <script type='text/javascript' src='styles.jss.js'></script>
  </head>
  <body>
    <img src="image_off.png"
        src-off="image_off.png" src-over="image_on.png" />
  </body>
</html>

And in the “styles.jss.js” file we have this:

$.jss.declare({
 
  "img[src-over]":
  {
    hover: "set-attr src {src-over} | set-attr src {src-out}"
  }
 
});

These files together create a page that has a rollover that changes from zebra to shark when the mouse is hovered over it. Better yet, this JSS stylesheet can be used with any web page to enable rollover images. All the user has to do is set the “src-over” and “src-out” custom attributes.

Notes on JSS Availability & Performance

JSS applies its stylesheets using JavaScript. This has several implications to web designers using it. First of all, in order for a site to take advantage of JSS, JavaScript must be enabled. Fortunately, something like 95% of all web surfers have JavaScript enabled, so that’s not too big of deal. Secondly, JSS is a lot slower than CSS. For most websites, this difference will probably be imperceptible deal, but it’s still something to be aware of.

My recommendations would be this: if you can do it in CSS, and it works properly across all browsers, then use CSS. There’s no reason not to. However, if you need to use JSS features like event properties (like hover) or cross-browser selectors, then use JSS.