JavaScript: Using Event Listeners, attaching handlers on page load, and DOMContentLoaded

For anybody who has ever coded any JavaScript at all, they are no doubt familiar with events such as “onclick”, “onmouseover”, “onmousemove”, and more. In old HTML web pages, it was very common to add these attributes to <a> tags to achieve some special effects.

Later on, browsers begin to support these attributes even in other tags like <div>, and pretty much anything else.

However, as web standards develop over the years and people’s coding practices for the web begin to standardize, it is generally considered bad practice to use them. There are many reasons for this, among others:

1. You cannot attach more than 1 action this way. If you want to do a lot of things in one event, you will need to put a lot of code either in this attribute, or in the function being called from this attribute; and these may very well be unrelated actions. This makes your code less organized and harder to develop.
2. No good separation of presentation (HTML) from functionality (JavaScript). Everything is mixed together. This makes collaboration development efforts difficult; and makes the code hard for you to manage even if you were the sole developer.

Fortunately, we have an alternative solution. They are Event Listeners.

Continue reading JavaScript: Using Event Listeners, attaching handlers on page load, and DOMContentLoaded…

Save in del.icio.us StumbleUpon this

Internet Explorer issue - maximum of 32 CSS @import

To be honest, I just ran into an issue that I thought was fairly ridiculous.

Internet Explorer restricts you to a maximum of 32 @import statements in your CSS file.

For the less advanced developers, you can import another CSS file from within one of your CSS files. Consider it like a #include in C programming, or an include statement in PHP. The syntax would look like this:

@import url("mystyle.css");

When you are developing a complex web application, you are likely to have many CSS files. Admittedly, we haven’t cleaned up the CSS structure and removed any outdated CSS stylings for a while, in our project. We shouldn’t have imported so many. But it struck me as ridiculous for Internet Explorer having such limits. (Needless to say, Firefox has no such ridiculous limits.) To me, it just seems like a programming flaw (using a 5-bit number as indexing for imported files?).

Reference: http://www.juniper.net/security/auto/vulnerabilities/vuln3394.html (the topic discussed in this link is not related, but pay attention to the end of the second paragraph: “Internet Explorer imposes a maximum limit of 32 imports that an individual styleSheet object can hold, and a depth limit of three on the number of style sheets that may be included within the style sheet chain.”)

Update (3/27/08): Apparently, IE doesn’t only impose a number of files limit — but even a file size limit for each CSS file. The IE CSS file size limit seems to be ~288kb. Again, Firefox doesn’t seem to have such limits. Way to go IE, for continuing screwing web developers up.

Save in del.icio.us StumbleUpon this

CSS: z-index - so what appears on top?

CSS provides an interesting property called z-index, that determines what element appears “on top”, on a page. You can tell that this was put in the CSS standards because of absolute positioning. Imagine the 2D page having X and Y coordinates, and the Z-axis points out of the screen at you, as well as inside to the page.

Interestingly, when these CSS standards were first developed, no one imagined they could become so useful — it’s an important part of what makes web 2.0 applications like meebo possible. (chat windows overlapping others to simulate a desktop application design)

So, when developing web applications nowadays, you could very well have needs to utilize this property. Unfortunately, support for z-index is flaky in browsers. Not every browser interprets code the same way. Unfortunately for developers, Firefox and Internet Explorer, again, have different opinions on z-index.

In this article, I will discuss some potential discrepancies with z-index, and how you can get around them.

Continue reading CSS: z-index - so what appears on top?…

Save in del.icio.us StumbleUpon this