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.
LVL 1
brianmfallsAsked:
Who is Participating?
 
DesignbyonyxCommented:
AHHHHH  I see the problem:

you see minwidth -  try capitalizing the 'W' : minWidth

Here's the full working code:

$( "#libraryResizer" ).resizable({
                maxHeight: 700,
                maxWidth: 420,
                minHeight: 200,
                minWidth: (($.browser.msie && parseInt($.browser.version) <= 8) ? 231 : 210),
                resize: function() {
                                $( "#templateLibraries" ).accordion( "resize" );
                }
});
0
 
DesignbyonyxCommented:
if($.browser.msie && parseInt($.browser.version) <= 7) {
  // Stuff for IE7 and earlier
}

Open in new window

0
 
imantasCommented:
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.
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
DesignbyonyxCommented:
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" );
        }
});
0
 
brianmfallsAuthor Commented:
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.
0
 
brianmfallsAuthor Commented:
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

0
 
brianmfallsAuthor Commented:
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!
0
 
DesignbyonyxCommented:
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



0
 
brianmfallsAuthor Commented:
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'!
0
 
DesignbyonyxCommented:
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 :(
0
 
brianmfallsAuthor Commented:
At least we can begin to say goodbye to IE666.
0
 
brianmfallsAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.