asked on

How to set minWidth dynamically, based on navigator.appName (jQuery Resizable)

I have a layout issue that is specific to IE. I need to set the minWidth attribute for jQuery's resizable function to '231' for IE, and to '210' for the rest of the browsers.

I thought this script (below) would do the the trick, but I was sorely mistaken.

var browserName=navigator.appName;

if (browserName=="Microsoft Internet Explorer") {
	var thisMinWidth = 231;
} else {
	var thisMinWidth = 210;
}
	
$( "#libraryResizer" ).resizable({
	maxHeight: 700,
	maxWidth: 420,
	minHeight: 200,
	minwidth: thisMinWidth,
	resize: function() {
		$( "#templateLibraries" ).accordion( "resize" );
	}
});

Open in new window

So.... I tried this (below). It failed miserably as well.

var browserName=navigator.appName;
$( "#libraryResizer" ).resizable({
	maxHeight: 700,
	maxWidth: 420,
	minHeight: 200,
	if (browserName=="Microsoft Internet Explorer") {
		minwidth: 231,
	} else {
		minwidth: 210,
	}
	resize: function() {
		$( "#templateLibraries" ).accordion( "resize" );
	}
});

Open in new window

At this point, I am out of ideas. I'm open to suggestions. :) Thank you all, in advance, for your help.

Designbyonyx

if($.browser.msie && parseInt($.browser.version) <= 7) {
  // Stuff for IE7 and earlier
}

Open in new window

imantas

The first code seems to be ok and should work. Are you sure that mistake is in the part where you set thisMinWidth dynamically? Dd you try alerting the value you get from the code?

var thisMinWidth = String(navigator.appName).match(/internet explorer/i) ? 231 : 210;
alert(thisMinWidth);
$( "#libraryResizer" ).resizable({
        maxHeight: 700,
        maxWidth: 420,
        minHeight: 200,
        minwidth: thisMinWidth,
        resize: function() {
                $( "#templateLibraries" ).accordion( "resize" );
        }
});

Open in new window

Try this code and let me know what does it alert in IE.

Designbyonyx

Sorry, meant to show you in your code:

$( "#libraryResizer" ).resizable({
maxHeight: 700,
maxWidth: 420,
minHeight: 200,
minwidth: ($.browser.msie && parseInt($.browser.version) <= 7) ? 231 : 210;
resize: function() {
$( "#templateLibraries" ).accordion( "resize" );
}
});

brianmfalls

ASKER

I tried the following(designbyonx), and it did not work.

if($.browser.msie && parseInt($.browser.version) <= 8) {
	var thisMinWidth = 231;
} else {
	var thisMinWidth = 210;
}
	
$( "##libraryResizer" ).resizable({
	maxHeight: 700,
	maxWidth: 420,
	minHeight: 200,
	minwidth: thisMinWidth,
	resize: function() {
		$( "##templateLibraries" ).accordion( "resize" );
	}
});

Open in new window

I also tried the following(imantas), which also did not work.

var thisMinWidth = String(navigator.appName).match(/internet explorer/i) ? 231 : 210;
$( "##libraryResizer" ).resizable({
	maxHeight: 700,
	maxWidth: 420,
	minHeight: 200,
	minwidth: thisMinWidth,
	resize: function() {
		$( "##templateLibraries" ).accordion( "resize" );
	}
});

Open in new window

The re-sizable element can, with both scripts, collapse to nothing, where I need it to stop at the set points.

I'll try the inline version as well(designbyonx), though Dreamweaver's validation didn't like it when I added it in.

brianmfalls

ASKER

If anyone notices the double pounds, it should be noted that those are only necessary (to escape the pound, which is used to denote and output variables within ColdFusion) if the script is embedded within a ColdFusion output block.

Ok, this validates... I replaced your semi-colon with a comma. I'll know if it works in a bit. My dev server is hanging up at the moment, so I can't test it quite yet.

$( "#libraryResizer" ).resizable({
		maxHeight: 700,
		maxWidth: 420,
		minHeight: 200,
		minwidth: ($.browser.msie && parseInt($.browser.version) <= 8) ? 231 : 210,
		resize: function() {
				$( "#templateLibraries" ).accordion( "resize" );
		}
});

Open in new window

brianmfalls

ASKER

The latter solution does not work either. :( I do like the method in which the *if is done though. I'd never seen it done that way before. Pretty cool :)

I have to run for the evening... I'll check back tomorrow. Thanks for the help so far!

Designbyonyx

Sorry about leaving the semicolon in there. that was my bad.

So do this first, and make sure it works the way you want to:

$( "#libraryResizer" ).resizable({
                maxHeight: 700,
                maxWidth: 420,
                minHeight: 200,
                minwidth: 231,
                resize: function() {
                                $( "#templateLibraries" ).accordion( "resize" );
                }
});

Open in new window

Then replace the '231' with this (I wrapped the whole bit in parenthesis... see if that helps):

(($.browser.msie && parseInt($.browser.version) <= 8) ? 231 : 210)

Open in new window

ASKER CERTIFIED SOLUTION

Designbyonyx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brianmfalls

ASKER

IE is still a little buggy. If I resize the area vertically, the area snaps to a width smaller than the minimum. But it works in every other way. Thank you sooooooo much! I'm guessing the buggy bit is all css. :) Thank God for '\9'!

Designbyonyx

If you have a test page, I can help you troubleshoot. I'd be interested to see what's going on.

And IE9 won't have market share for another 2-3 years... and even right now it's already 2 years behind other browsers. Even IE8 is doing poorly, and IE7 will be a part of our lives until IE11 :(

brianmfalls

ASKER

At least we can begin to say goodbye to IE666.

brianmfalls

ASKER

I can't grant access to the app. I wouldn't mind, but I signed an agreement, and I have to honor it. :) Thanks again for the help Designbyonyx.