Youtube provides a object tag that you can include on your site to show the videos directly, w/o making the user leave your site.

However, I noticed that this object tag was not being activated with the objectswap technique which makes it so you don’t have to click on the flash object to “activate” it in IE.

To fix this you need to include the type=”application/x-shockwave-flash” in the object definition.

I am not sure why you need this, but if you leave it out, somehow IE removes the object from it’s DOM.

If you allow a page to load w/o this “type” and then try to find, using javascript, any OBJECT tags and it will tell you there are none.

UPDATE:  Still having some problems… thinking the trick above is causing some new problems.

If you ever work with an IFrame, you will notice that you can’t set height=100%.

But, many times you might want to have an IFrame act as if that property had the desired effect.  i.e. If you make your browser window taller, you want the heigh of your IFrame to grow as well.

You can acheive this using the following script:

       function resize_iframe() {
            var myWidth = 0, myHeight = 0;
            if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }

            var iNewHeight;
            iNewHeight = parseInt(myHeight)-40;
            document.getElementById("WgipIFrame").style.height = iNewHeight;
        }

        //-- see if there is already something on the onresize
        var tempOnresize = window.onresize;
        //-- create our event handler
        window.onresize = function(){
            //-- if tempFunc is a function, try to call it
            if (typeof (tempOnresize) == "function"){
                try{
                    tempOnresize();
                } catch(e){} //--- if it errors, don't let it crash our script
            }
            resize_iframe();
        }

Then you can set the IFrame’s onload=”resize_iframe();” like this:

<iframe src="x.htm" style="width:100%;"
  id="WgipIFrame" name="WgipIFrame"
  onload="resize_iframe();"></iframe>

Here is a nice script, part of a larger section on getting window size/positions and scroll data out of various browsers.  This page really has a lot of good information.

function alertSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    window.alert( 'Width = ' + myWidth );
    window.alert( 'Height = ' + myHeight );
}

When you are creating reusable javascript files, there are times when you want to tap into the window.onload event, which is fired when the window has finished loading the content.

The problem here, is that you can’t have multiple event handlers for the same event.

So if you have a page that uses 2 scripts which both use the window.onload event, then which ever is loaded last will win, and the other script will never catch the event.

Well one way you can deal with this problem is to write your window.onload (or other events for that matter) using this type of a pattern:

    //-- see if there is already something on the onload
    var tempFunc = window.onload;
    //-- create our event handler
    window.onload = function(){
        //-- if tempFunc is a function, try to call it
        if (typeof (tempFunc) == "function"){
            try{
                tempFunc();
            } catch(e){} //--- if it errors, don't let it crash our script
        }
     //-- Call your onload function here
    }

This way, you can have several function that all utilize the onload event, and none of them have to know about each other.

A while back I blogged about SubModal, a little tool for creating nice modal dialogs on websites.

One of the things I wanted to do was have the modal dialog return a value, like the showModalDialog does in IE.

To achieve this, follow these instructions.

In your “main” html page, declare a callback function and a button that will launch the modal dialog:

    function myFunction(val){
        alert("Return value is...");
        alert(val);
    }

Then create an input button to launch the modal dialog.

<input type="button" onclick="showPopWin('modalcontent.html', 400, 200, myFunction);" />

Then, in the submodalsource file, or where ever you have your JS stored, change this function to include a return value, and have it use it.

/**
 * @argument callReturnFunc - bool - determines if we call the return function specified
 * @argument returnVal - anything - return value
 */
function hidePopWin(callReturnFunc, returnVal) {
    //alert(callReturnFunc);
    gPopupIsShown = false;
    restoreTabIndexes();
    if (gPopupMask == null) {
        return;
    }
    gPopupMask.style.display = "none";
    gPopupContainer.style.display = "none";
    if (callReturnFunc == true && gReturnFunc != null) {
        // edited by CDM -- gReturnFunc(window.frames["popupFrame"].returnVal);
        gReturnFunc( returnVal );
    }
    gPopFrame.src = gLoading;
    // display all select boxes
    if (gHideSelects == true) {
        displaySelectBoxes();
    }
}

Then finally on your modal page, just some code to close the window, and pass back the return value.

<button onclick="window.parent.hidePopWin(true, 'I am the return value')">close</button>