Just how stupid are IE users?

While I was very frustrated in fixing all the IE6 bugs for our website, this article came to me and bright up my day "Just how stupid are IE users"..http://news.cnet.com/8301-17852_3-20085679-71/just-how-stupid-are-ie-users/?fb_ref=fblike&fb_source=home_multiline.. very funny! I personally have no problems with IE or IE users and I don't think there's any correlation between a user's IQ and his/her browser. But IE 6 does give me a lot of headaches in application development and it's a pain in the butt to fix all its errors and bugs. So if you are still using IE6, please please upgrade it to IE 7 or higher. Or just use firefox or chrome or safari..

However, as an application developer, sometimes it's not my choice to make our website IE6 compatible. In this blog I will put down some of the IE 6 bugs that I encountered in my developer life. Hopefully you will find it useful and save you some efforts and time while you scratching your head for a IE6 bug.

1. When placing an absolute div within a relative positioned div, in IE6 and IE7 that div disappeared. The content within the div and the div just would not show. The fix is to wrap the absolute div with another empty <div> </div>.

2. Place an absolute div over a select tag in IE6. This happens a lot to pop up menu.. drop down menu.. popup tooltips. etc.. the fix is to add an empty iframe on top of the select tag and then put your popup div on top of the iframe. Here is some good articles:
http://esdi.excelsystems.com/wsexmp/divdrp.pgm?wsnum=00110
http://www.sitepoint.com/forums/css-53/div-menu-showing-under-select-element-ie6-iframe-solution-570683.html
http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx
someone even created a Jquery plugin for this fix.. Bravo to that.. here is the link to the plugin:
http://plugins.jquery.com/project/bgiframe

3. z-index fix.. I have  a list tag <ul><li>kk</li> </ul> and no matter how high the z-index is in the <li> tag, the content will not show as you expected on top of all other contents. This only happened to IE6/7.. the fix is to raise the z-index of the <ul> instead of <li>.. this way it will layer the content correctly.

4. zoom: 1 fix a lot of display errors in IE6/7. When I have some CSS that just won't work in IE, I see if adding a ZOOM property of 1 (one) will help. More about this issue:
http://www.positioniseverything.net/articles/haslayout.html
http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm

Will update this blog if I find and fix more bugs in the future~

Javascript Tricks

Use anonymous function in setInterval, setTimeOut if we want to pass parameter to it..
for example,


function SlideShow($obj, opts) {    
        //Set the opacity of all images to 0
        $obj.find('li').css({ opacity: 0.0, marginLeft: opts.photoWidth});      

        //Get the first image and display it (set it to full opacity)                  
        $obj.find('li:first').css({ opacity: 1.0, marginLeft: 0 });                      
       
        //Call the gallery function to run the slideshow  
        //put a new variable COFtimer into the $obj object, this is because each slideshow should have its own timer
        $obj.COFtimer = setInterval(function(){gallery($obj, opts);}, opts.interval);

        //pause the slideshow on mouse over
        $obj.hover(
                function () {
                    clearInterval($obj.COFtimer);
                },
                function () {
                    $obj.COFtimer = setInterval(function(){gallery($obj, opts);}, opts.interval);
                }
            );
    }


This is a function from one of my own Jquery plugins which I recently implemented for slideshow of pictures. In the future I will write another blog about this plugin.
In the highlighted code,  $obj and opts are two parameter passed to gallery function.
Also note that in this case, I utilized javascript enclosure feature to pass these two parameters to function gallery().
Another javascript feature I utilized and really loved is I dynamically added a new variable "COFtimer" into $obj. This way each slideshow object ($obj) will have its own timer object and won't interfere each other's timer.

DIY Map & IE error after refresh

Recently I have been working on our department public website and need an interactive US state map for different social indicators in 50 states. I found a great and free mapping control called DIY map online. Here is the website: http://www.backspace.com/
It's written in flash and really lightweight. It can be controlled by javascript functions on the HTML page.


I tested the following US albers map on IE but found a little bug:
http://backspace.com/mapapp/us_albers/index.html
The map loaded correctly for the first time, but when I refreshed (F5) the page, the map is gone. I tested it on IE6 and IE7 and found the same bug. But the same page worked fine and had no problems in firefox and chrome.

I also found that this page has no refresh problem in IE:
http://backspace.com/mapapp/us/with_javascript/sample_with_javascript.html

I noticed that the one that has error used swfobject for the us_albers map and I believed
this caused the problem in IE. Here is the original code:

<script type="text/javascript" src="swfobject.js"></script> 
    <script type="text/javascript"> 
        //swfobject.registerObject("DIYMap", "10.0.0");
        var flashvars = {
          data_file: "senate.xml",
          use_js: "on"
        };
        var params = {
          allowscriptaccess: "always"
        };
        swfobject.embedSWF("us_albers.swf", "map", "600", "400", "9.0.0", "expressInstall.swf", flashvars, params);
</script> 


<div id="map"> 
   <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> 
</div> 

So I changed the swfObject calling function to "Static publishing" as described from this page: http://learnswfobject.com/the-basics/
It seemed that "Static publishing" fixed the problem. 




<div id="mapDiv">
            <object id="map"

             classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

             width="580px"

             height="410px">

            <param name="movie" value="<%=GetFlashLink() %>" />

          <!--[if !IE]>-->

          <object type="application/x-shockwave-flash"

                  data="<%=GetFlashLink() %>" 

                  width="580px" 

                  height="410px">

          <!--<![endif]-->

            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

          <!--[if !IE]>-->

          </object>

          <!--<![endif]--> 

        </object>

        </div>

<script type=text/javascript>

        function RegisterFlash() {

            swfobject.registerObject("map", "9");

        }

        //this is to fix the IE7 asp.net error

        window.map = window.document['map'];

        RegisterFlash();    

</script>


Another solution would be appending a javascript timestamp to the embed string. This way IE6 and 7 think the data file is a new one and will try to reload every time. Here is a sample codes from this link (http://blogs.popart.com/2007/11/flash-externalinterface-in-asp-net-applications/)



 var localplayer= ‘player.swf?guid=’ + Math.random()*99999999;
 var so = new SWFObject(localplaer, “player”, …);


Happy programming~

Flash object inside ASP.NET form error in IE 7

Several months ago I posted a blog about how to access a flash object by javascript. I found a very interesting error when I put a flash object inside a form in asp.net and called this flash by javascript. The error from IE would be "object not found or not defined" and it just didn't allow me to control the flash by javascript.
I found that this error only occurs in IE 7 with flash player version 9. The same page works perfectly fine in other browsers including firefox and chrome. I also found that this error would not occur if we test it in flash player version 10 with IE 7 and IE 6.
After spending almost a whole day to debug this error, I found that if I put the flash object outside of the <form> </form> tag in asp.net, the error is gone. Here is my flash embed tag:


  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
 id="usmap" width=580 height=410> 
              <param name=movie value="flash.swf"> 
              <param name=quality value=high> 
              <param name=play value=false> 
              <param name=bgcolor value=#FFFFFF> 
              <embed play=false swliveconnect="true" name="usmap" src="flash.swf" quality=high bgcolor=#FFFFFF  
 width=580 height=410 type="application/x-shockwave-flash"  
 pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed > 
</object > 


My javascript for calling the flash object:
<script type="text/javascript">

function getFlashMovieObject(movieName) {
          if (window.document[movieName]) {
              return window.document[movieName];
          }
          if (navigator.appName.indexOf("Microsoft Internet") == -1) {
              if (document.embeds && document.embeds[movieName])
                  return document.embeds[movieName];
          }
          else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
          {
              return document.getElementById(movieName);              
          }
      }



 function somefunction() {
          var flashObj = getFlashMovieObject("usmap");
          if (flashObj) {
              flashObj.someFunctionFromFlash();
          }
      }

</script>


As I said, the only solution I found is to put this flash embed object outside of the asp.net form tag. However, this is an ugly solution and not very realistic as ASP.NET page put all the controls inside form tag. After some hard work of googling, I finally found the reason:

The problem really comes down to the fact that every ASP.NET page is wrapped in a <form> tag and there is a bug in Internet Explorer that hides the containing flash object (the player) in the DOM. To solve this problem, you can simple elevate the player object to a window level element, as shown in Figure 3 below.

window.player = document.getElementById(‘player’);

Ref: http://blogs.popart.com/2007/11/flash-externalinterface-in-asp-net-applications/

This is a really great and simple solution. All I need to do is to add this line into my javascript:
window.usmap = document.getElementById('usmap');
or
window.usmap = window.document['usmap'];


Hope you find this one useful too.


Happy programming!