Max Width

A recent forum post about max-width in IE mentions my javascript utility library as a solution for min-width and surely someone can figure out a max-width solution as well.

Actually, I did.

If you look at the source of that javascript file you’ll see a function called set_width_limits which you can use to set both min and max width values with one function call!

set_width_limits( obj_name , min_width , max_width, ieOnly, noIE7 )

obj_name: This is the ID of the HTML element you want to apply width constraints to.
min_width: The minimum width, in pixels, that obj_name can be.
max_width: The maximum width, in pixels, that obj_name can be.
ieOnly: TRUE/FALSE; only apply this constraint to IE. Apply these constraints only in IE? Default is TRUE. The reason for this is most modern browsers understand the CSS min-width and max-width attributes. IE is really the only target for this sort of functionality. Therefore why bother putting the extra bit of overhead in having javascript control the widths of elements you can more effectively (and cleanly!) control with CSS.
noIE7: TRUE/FALSE; do not apply this code to IE7 (and later). The reason for this being that IE7 finally starts to understand CSS min/max width rules.

Skidoo Redux has the following line of javascript in its HEAD:

if ( ( typeof( set_min_width ) ).toLowerCase() != 'undefined' ) { set_min_width( 'page-container' , 600 ); }

To make use of this “new” function you could do something like this in place of the above line of code:

if ( ( typeof( set_width_limits ) ).toLowerCase() != 'undefined' ) { set_width_limits( 'page-container' , 600, 1024 ); }

And now the layout won’t expand beyond 1024 pixels in older versions of IE! You can see this in action here.

Or just look at the Bridgewater State College web site, where this function has been in use since May of this year.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s