Elod P Csirmaz’s Blog: May 2009

## 29 May 2009

### IE6 and transparent PNG images -- a solution

If you have ever been disturbed by the fact that Internet Explorer 6 uses either a background color stored in PNG images or a default background color to render transparent and semi-transparent pixels, here is a solution:

You can edit the default background color using tweakPNG. You will have to add and/or edit the bKGD "chunk" in the file, setting it to a color similar to the background on your webpage.

## 20 May 2009

### onload and complete of images in IE, Firefox and Safari

Firing the onload() event seems to be inconsistent across browsers. I've tried to explore how browsers behave in this respect, as well as how the .complete property changes. Here are my findings:

                ONLOAD FIRES      COMPLETE                first cached new  first cached newFirefox 3       Y     Y      Y    F     T      TFirefox 2       Y     Y      Y    F     T      TIE 8            Y     Y      Y    F     T      TIE 6            Y     Y      Y    T     T      TOpera 9.52      Y     Y      Y    T     T      TSafari 3.2.3    Y     N      Y    F     T      F

where 'first' means the case when first assigning a source to an image via JavaScript, 'cached' means when assigning the same source once again, and 'new' means when assigning a different source to the image. Values in the 'complete' section show the value of the .complete property as checked immediately after assigning the new source, and thus might be unreliable in case the connection is too fast.

Konqueror probably behaves the same way as Safari. The basic problem of registering the completion of image loads is with these two browsers; however, as the table shows, .complete can be used to distinguish between already cached images and images that are to be loaded.

## 14 May 2009

### Geeting the relative coordinates of a click

If you want to get the coordinates of a click event relative to the object it happened to, the following event handler works fine on all borwsers provided that the object counts as a layer (offset container). To achieve this, use position:relative or absolute on the object.
funtion(e){      var mx=0;      var my=0;      if(window.event){        mx=window.event.offsetX;        my=window.event.offsetY;      }else{        mx=e.layerX;        my=e.layerY;      }}

To get the global coordinates, see http://www.quirksmode.org/js/events_properties.html#position

### Editor for Developers (Windows)

I was searching for a quick and nice editor to write JavaScript, PHP and XHTML code which could do autoindent, parenthesis pairing and some syntax highlighting. PsPad turned out to be a good solution; it's fully customizable, has tabs for each file opened, and it's free. http://www.pspad.com/.

### Syntax Highlighting

This blog will use alexgorbatchev's Syntax Highlighter 2.0 to show snippets of codes in a more readable form. On first sight, it seems to be a nice and easy-to-use software, but only time will show how easy it is to integrate into Blogger.
http://alexgorbatchev.com/wiki/SyntaxHighlighter

### JavaScript Event Object Reference

This seems to be a great reference for the JavaScript event object, emphasizing differences between IE and other browsers.
http://www.javascriptkit.com/jsref/event.shtml

While quriksmode.org describes compatibility issues in detail:
http://www.quirksmode.org/js/events_properties.html