Javascript bookmark to aid with page layout

A coworker sent me this link.  You just bookmark it, and then click the bookmark when you want to examine the layout of your page elements.


And it will add a little floating window in the upper left corner to show you everything you mouse over:


Upgrading to ASP.NET AJAX, xhtmlConformance, and JavaScript Errors

I recently migrated one of the web applications I work on frequently to make use of the newly released ASP.NET AJAX toolkit.

In order to make this work, a bunch of changes were needed in the web.config.  So many in fact that I decided to merge my web.config file into theirs, rather than vice versa.

After all was done and working, we started getting a few javascript errors in stuff unrelated to any ajax controls.

After some investigation I relized that the naming convention for controls had changed.

Controls that used to be named ASDF:ZXCV were now named ASDF_ZXCV.

So in some instances we had javascript looking for elements where the element name was hard coded as “ASDF:ZXCV”.  Of course the correct way to get the element name is to use the ClientId property of the control, but that was not used 100% of the time on our site. 

The problem is that when I upgraded the application from .Net 1.1 to a .Net 2.0 web application project, the upgrade tool included an item in the web.config file that was intended to ease the transition.

<xhtmlConformance mode="Legacy"/>

In ASP.NET 2.0, by default all rendered content is well formed XHTML.  This was different from ASP.NET 1.1.  By setting the xhtmlConformance mode to Legacy, it would not force the output to be XHTML compliant.

Another effect that this has, is the naming of controls.  When Legacy is turned on, control hierarchies are separated by a colon “:”.  In standard mode, they are separated by a dollar sign “$” in the name property, and an underscore “_” in the ID property.

This can be seen if you use reflector on the control class, you can see this:

internal char IdSeparatorFromConfig
        if (!this.EnableLegacyRendering)
            return '$';
        return ':';

In 99% of the places where we reference generated code, we relied on the ClientId property, so we had no problems.  But in that 1% of places where we took the shortcut of hard coding in the element, we got JS errors.


ObjectSwap does not work with YouTube videos

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.

Dynamically Resizing an IFrame to Fill The Browser

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' ) {
                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"){
                } catch(e){} //--- if it errors, don't let it crash our script

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

<iframe src="x.htm" style="width:100%;"
  id="WgipIFrame" name="WgipIFrame"