Grab A Life

Welp another challenge another day. My good pal Scott (also  at Imperium.ca) gets the credit for this one. We found while using a dotnetnuke back end it was far easier and far less limited to create our custom applications separately and include them in iframes and simply inherit the permissions from the dotnetnuke namespace in .NET. So while this worked great we had a huge draw back, the iframes were static height and although there was an “auto” setting in dotnetnuke, it did not appear to be functional in any of the browsers we tested.

Enter the dynamic iframe height.

We scoured much code for working examples but were hard pressed to find any that were cross browser compatible. We found some code at dynamicdrive.com while it did work resizing the iframes it was still missing a few things. One problem is we were not writing the “<iframe>” tag manually so we could not follow part two of the instructions, also part 3 instructs to place the resize call in an <a href> tag. Again we needed the script to automatically resize any and all iframes on the page once the child page was loaded. Scott tinkered until… in firefox IE7 and safari browsers we could add iframes and when the page fully loaded it would automatically adjust the iframe height by including one javascript file in the parent page and one javascript file in the child page.

I hope this helps someone else as much as it has helped us.

There are 2 js files that we will use the first js file goes in the parent page head block and loads the script for the parent page.

<!– BEGIN CODE –>

<script type=”text/javascript”>

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

resizeCaller();
}

</script>

<!– END CODE –>

The second code is for the page that will be loaded into an iframe

<!– BEGIN CODE –>

<script type=”text/javascript”>

function addOnloadEvent(fnc){
if ( typeof window.addEventListener != “undefined” )
window.addEventListener( “load”, fnc, false );
else if ( typeof window.attachEvent != “undefined” ) {
window.attachEvent( “onload”, fnc );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
}
else
window.onload = fnc;
}
}

addOnloadEvent(parent.stretchAllIframes);
</script>

<!– END CODE–>

So normally when we develop a website template we make it liquid layout to fit in most browsers however in some cases we want the minimum width to be set with an optional overflow image. Kind of hard to picture… at any rate we wanted the browser to scroll horizontally but be centered on the page in lower resolutions without having to mess with the template.

I did a lot of searching and even found some people saying it was not possible. Well I tell you it is. Here is a script that will work for you. Just copy to your own autoscroll.js file and include it, or you can copy paste this into a script block.

function setScroll()
{
var docWidth;
var docMinWidth = 1182;  //min width in pixels any browser size smaller then this will cause the scrollbar to appear and center

docWidth = getDocWidth();

if( typeof( window.pageYOffset ) == ‘number’ ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
if (docWidth < docMinWidth ) { window.scroll((docMinWidth - docWidth) / 2, scrOfY);}
} else if( document.body && ( document.body.scrollLeft != ‘undefined’ || document.body.scrollTop != ‘undefined’ ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
if (docWidth < docMinWidth ) { window.scroll((docMinWidth - docWidth) / 2, scrOfY);}
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
if (docWidth < docMinWidth ) { window.scroll((docMinWidth - docWidth) / 2, scrOfY);}
}

}

function getDocWidth()
{
if (document.body.scrollWidth)
return document.body.scrollWidth;
var w = document.documentElement.offsetWidth;
if (window.scrollMaxX)
w += window.scrollMaxX;
return w;
}

function addOnloadEvent(fnc){
if ( typeof window.addEventListener != “undefined” )
window.addEventListener( “load”, fnc, false );
else if ( typeof window.attachEvent != “undefined” ) {
window.attachEvent( “onload”, fnc );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[fnc]();
};
}
else
window.onload = fnc;
}
}

addOnloadEvent(setScroll);