nonstandard property :: innerHTML (but is a de facto standard)

The innerHTML property is not part of the DOM. It isn't part of any standard. It is a proprietary addition created by Microsoft.

Normally, I wouldn't recommend using anything proprietary in JavaScript code (although the XMLHttpRequest object itself is a proprietary addition). However, the innerHTML property is exceptionally well supported, considering that it is nonstandard. It is, in effect, a de facto standard: it is supported in all the major browsers. The reason why innerHTML has been so widely adopted, without any endorsement from the W3C, is that it is very useful in certain situations.

DOM methods allow you to manipulate a document very precisely. You can create elements, attributes, and text, one node at a time. That is very powerful, but it is also quite time-consuming.

The innerHTML property uses brute force. If you read the innerHTML property of an element, you will receive a string of HTML. This is a read/write property, meaning that you can also assign a string of HTML to go inside an element.

Any HTML that was previously inside the element will be obliterated and replaced with the contents of the string.

Ajax Video Tutorials by Stefan Mischook

Again very good video tutorials to learn AJAX at Killerajax.com by Stefan Mischook. These video tutorials are again from the network of killersites.com the same as Actionscript Videos and PHP Videos and all the videos are not free. Few basic videos are free just to get the quality & measure the contents of paid videos. But even if they are paid its worth for it and will not pinch out your pockets. Just $19.99 to download all the videos. I think it is worth to spend money on Visual Learning then purchasing a book and fondling pages around not getting everything.

Video Highlights (from site):

• Build a fully functional AJAX shopping cart.
• Learn about Free AJAX tools to speed up your AJAX work.
• Learn how to connect AJAX with PHP
• Overt 3 hours of videos.

So if you are willing to learn some AJAX you must check out Killerajax.com

p.s: it is also a part of killersites.com network

Fixing PNG transperency for Internet Explorer (MSIE): A Little Hack

Recently I have started using PNG format images for my web application icons because of its lossless data compression and variety of transparency options. More on PNG can be found on Wikipedia. (http://en.wikipedia.org/wiki/png)

Problem I faced with PNG images:
Well it is good to use PNG but there is one problem for PNG images with Internet Explorer (thanks to Microsoft and Bill Gates). Internet Explorer (IE) does not render PNG's transparency properly so background is shown for transparent PNG images. It was really bad hit for my development. But i believe 'where there is will, there is a way' or you can say 'where there is a problem, there is a solution'.

Solution I found and Implemented:
While searching for solution on Internet, I found a simple and useful solution to the problem. I implemented it and it worked great as the author said so. Well it is a little javascript hack for only Internet Explorer which renders PNG images as SPAN and displays the image as it is meant. The hack uses Microsoft's AlphaImageLoader filter to display the transparency of PNG images. The little javascript code only works with IE and does not bother other browsers.

Where to get it:
I have pasted the code at bottom of this post but i will recommend to go to official site for updated version of the code. The code is placed at the website http://homepage.ntlworld.com/bobosola/. I didn't get the name of author, I feel sorry for I was not able to mention his/her name here. I didn't find it on site, if someone gets it please let me know. But the author has thanked many people on his website.

Disadvantages:
The hack is based on javascript and works only for Internet Explorer 5.5 and 6 on Windows. If javascript is OFF the images are shown as with background. (but i don't bother for that because my most web applications are based on Ajax so it is meant only for user with javascript ON). There are few more cons in hack which are explained on the site mentioned above.

The Code:
There are two ways of using the hack.

1. Put following code to head section of your web page. (just copy/paste)
   
   <!--[if lt IE 7]>
   <script
   language="JavaScript">
   function correctPNG() // correctly handle PNG
   transparency in Win IE 5.5 & 6.
   {
   var arVersion =
   navigator.appVersion.split("MSIE")
   var version =
   parseFloat(arVersion[1])
   if ((version >= 5.5)
   && (document.body.filters))
   
   {
   for(var i=0;
   i<document.images.length;
   i++)
   
   {
   var img
   =
   document.images[i]
   
   var imgName =
   img.src.toUpperCase()
   
   if (imgName.substring(imgName.length-3, imgName.length) ==
   "PNG")
   
   {
   
   var imgID = (img.id) ? "id='" + img.id + "' " :
   ""
   
   var imgClass = (img.className) ? "class='" + img.className + "' " :
   ""
   
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt
   + "'
   "
   
   var imgStyle = "display:inline-block;" + img.style.cssText
   
   if (img.align == "left") imgStyle = "float:left;" +
   imgStyle
   
   if (img.align == "right") imgStyle = "float:right;" +
   imgStyle
   
   if (img.parentElement.href) imgStyle = "cursor:hand;" +
   imgStyle
   
   var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" +
   "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
   +
   "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" +
   img.src + "\', sizingMethod='scale');\"></span>"
   
   img.outerHTML =
   strNewHTML
   
   i = i-1
   
   }
   }
   }
   }
   window.attachEvent("onload",
   correctPNG);
   </script>
   <![endif]-->
   


2. Second is save the above code in file and name it pngfix.js and copy the following code to head section of your web page.
   
   <!--[if lt IE 7]>
   
   <script defer type="text/javascript" src="pngfix.js"></script>
   
   <![endif]-->

Help for implementation:
If you need any help for implementing the code just visit the website of the author where he has explained it in a simple and effective way with demos. And secondly you can post comment here for help and I will help if I am able to.

Keep Sharing !

The window.onload problem

I found this very useful and explaining article while searching for a javascript problem i was facing during development of an online application (Ajax, PHP & MySQL based).

The article is written by Peter Michaux on his blog and explains the problem & solution related to window.onload event, the common problem faced by most of the web developers. Here is the link:
http://peter.michaux.ca/article/553

I am not able to brief it here because it's really big to be typed here.

enjoy