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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.