nagoon97’s Weblog

you can actually do alot with javascript!

Differences between designMode and contentEditable April 20, 2008

Filed under: ajax,javascript — nagoon97 @ 2:32 pm
Tags: , , , , , , , , ,

To make a web page editable, IE provides two methods. One of them is setting document.designMode = “on”, which can only be applied to the entire document. And the other method is setting contentEditable = “true”, which can be applied to any HTML elements. The good part of the first method is that the same syntax can also be used for Firefox, which is why I prefer using the method. According to the document located at, setting document.designMode = “on” and document.body.contentEditable = “true” are supposed to have exactly the same effect.


And it did look like they do


But as I go on and do more things with the editor, I started to make some disturbing discoveries. The first weird thing I noticed was that if the document.domain property was set for the document, I don’t get to access the editing area as the browser would throw an “access denied” exception. I’m sure that this should not have anything to do with the cross-domain issues because

1. The same domain value was set for the outer document and the editing area (iframe).

2. Firefox does not complain.

3. It works fine if I used the second method and make use of the contentEditable property.


And the next thing I discovered is that those two methods react differently to the lines that the source code looks something like <p> </p>. The designMode method would take it as a blank line. But the contentEditable method would take it as a line with a “space”.


These behaviours are not documented anywhere and took me such a long time to pin point what is causing the differences. And I believe that there must be more “subtle” differences between the two, which would cause someone to spend a hell of a time. So, if any of you reading this, discover any other differences, it would be very appreciated if you would share your knowledge here. :-D


Should I go for designMode or contentEditable for my editor?

It has been such a confusing time for me. Then, I saw this article, which says that Firefox will have support for contentEditable property for the next major release. And now, my guess is that the designMode would slowly fade away as contentEditable is “supposed” to do the same thing and some more. So, yes, my decision for now is the contentEditable for IE/Safari and designMode for Firefox until the support is added.


Ajax mosaic builder April 9, 2008

Filed under: ajax,javascript — nagoon97 @ 6:03 am
Tags: , , , ,

To demonsterate what you can do with the BinFileReader that I have posted at, I’ve written a mosaic builder.

Mosaic picture of Hillary Duff built with 23 images

The function will load multiple images as a color pallet using BinFileReader and then arranged them in such an order that those images would look like one of the images in the pallet.

And you can also click on one of the small images to rearrange the images to build that image.

The demo is available at

It may take a while to load all the image files because the hosting server is quote slow, please be patient.

You can see the image loading progress on the title bar on FireFox but I found that IE won’t even update the title bar before making an ajax request.

And I’d like to mention that this was written entirely in Javascript/VBScript, no server-side techologies what-so-ever. (VBScript for IE support)

To try this on your own server, you just need to download BinFileReader.js, MosaicBuilder.js, the HTML file and the image files.

And you can use the mosaic builder in the following manner.

var demo = MosaicBuilder(Prefix_used_for_the_filenames_of_the_images, number_of_the_image_files);


var demo = new MosaicBuilder("60x45", 23);
demo.buildMosaic("60x45 (0).bmp");

Please note that since the function was written just to show what can done with BinFileReader, the code was not optimized.
If you wish to increase the speed, you may want to sort the pallet and then implement a better search algorithm when it looks for an image with the closest brightness.

And if you wish to run this script with your own set of images, please make sure all the images are
(1) 24 bits per pixel, uncompressed BMP files
(2) gray scaled
(3) small


Reading binary files using Ajax April 6, 2008

Filed under: ajax,javascript — nagoon97 @ 2:18 pm
Tags: , , ,

A growing number of web applications are making more and more use of client-side technologies because thanks to Ajax, it is now possible to write more fluid and more responsive web applications using only client-side technologies.

Now, web developers from all around the globe are releasing really interesting utilities and applications using only client-side technologies, many of which used to be within the domain of server-side technologies.

But when it comes to binary files, helping hands from server-side technologies are often necessary.

So I googled around to see what I can do about binary files with Ajax and found this Marcus Granado’s post at

What he posted there worked like a charm for FireFox and Safari but I couldn’t get it to work for IE.

But luckily, within the same page, someone had posted up a solution for IE as a comment, which is written in VBScript.

So I put them all together in this BinFileReader function, which provides cross-browser support and helper methods to easily access the binary contents.


* BinFileReader:

getFileSize() Return the file size
getFilePointer() Return the reading position
movePointerTo(iTo) Move the reading position to iTo.
movePointer(iDirection) Move the reading position in iDirection.
For all the following read functions,
– The reading position will move to the end of where the content is last read
– When iFrom is ommited, current reading position is used
readNumber(iNumBytes, iFrom) Read and return iNumBytes-byte number starting at iFrom.
readString(iNumChars, iFrom) Read and return iNumChars characters starting at iFrom.
readUnicodeString(iNumChars, iFrom) Read and return iNumChars unicoded characters starting at iFrom.


* Example:
var bmpFile = new BinFileReader(“image.bmp”);
var width = bmpFile.readNumber(4);
var height = bmpFile.readNumber(4);

* Demo:


* Related Posts



Get every new post delivered to your Inbox.

Join 33 other followers