How to fix Overlapping of select box in IE6

In IE, the select box appear on top of other elements even if you set zIndex property to higher value. I found this solution in controls.js of scriptaculous framework. I just follow their code and make it simple for me to use it.

To solve this problem, you need to create an iframe, append it below your div container, clone the position between these two, and set zIndex of that iframe to 1 and zIndex of your div container to 2. This will solve the problem, but it is not still good. IE seems to a little bit stuck about a few seconds when creating this type of iframe. Therefore, from my opinion, you should place an iframe tag on html is better. Then, you just call fixIE() function. But make sure that iframe and your div container have the same immediate parent node.

function fixIE(element, element_iefix) {
    Position.clone(element, element_iefix, {setTop:(!element.style.height)});
    element_iefix.style.zIndex = 1;
    element.style.zIndex = 2;
    Element.show(element_iefix);
}

//req: element must be position absolute.
function fixIEOverlapping(element) {
    if($(element.id + '_iefix')) {
        fixIE(element, $(element.id + '_iefix'));
    }

    if((navigator.appVersion.indexOf('MSIE')>0) 
        && (navigator.userAgent.indexOf('Opera')<0) 
        && (Element.getStyle(element, 'position') == 'absolute')
        && !$(element.id + '_iefix')) {
        new Insertion.After(element.id, 
        '<iframe id="' + element.id + '_iefix" ' +
        'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
        'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');

        setTimeout(function() {
            fixIE(element, $(element.id + '_iefix'));
        }, 50);
    }
}

In order to use it, just call fixIEOverlapping($("myDiv"));

Some tricks when using Prototype on IE

I have faced several problems when I am working using Prototype on IE. My friends and I also have found solutions already. But these problems don't exist on FF. These problems occur when using DOM method "document.createElement()" with prototype.

1. You cannot use variable that returns from "document.createElement()" with some methods like: setStyle, getDimensions(),....
To solve it, using this trick: var div = $(document.createElement("div"));

2. In order to set position of that variable, you need to append this to the browser first like document.getElementsByTagName("body").item(0).appendChild(div);

3. In order to access it and use it without problems, you need to use this trick too, $(div.id).hide(), ..... Use this after you append to the browser already.

Detecting the javascript file/library has been loaded yet?

For example, you can detect whether the google maps script has been loaded already at run time. Remember, one of the most interesting aspect of browser-based JavaScript is that all globally scoped variables are actually just properties of the window object.
This means any object that has been loaded successfully can be detected using square brace notation of the global window object.

if(window['GMap2']) {
   var map = new GMap2('map_div');
}
else {
   //see the previous post to load the google maps script after the page has been loaded.
}

You can apply this to any external javascript objects.

Blocking IE toolbar when mouse hovers image

Normally, when you place an image on IE, you will see a toolbar that allow the user to save, print, send image. You can disable this behavior by setting galleryimg = "no" on the img tag.

   <img galleryimg="no" src="/images/search.png"/>