how to use js min max css width for IE script?

[johnyboy]

hi,

i'm trying to use the javascript that's talked about on this page: http://www.doxdesk.com/software/js/minmax.html and the actual javascript file is here: http://www.doxdesk.com/file/software/js/minmax.js

in my page i have <script type="text/javascript" src="includes/minmax.js"></script> following on after <title>..</title> in the head, and i have a min and max width set in css which works fine on most browsers but not IE hense why i want to use this script. with it all in place it doesn't seem to work in IE (any version) -- according to the browser screen shots i get from using www.browsershots.org (i don't have a PC so don't have IE).

here's the page my attempt to use it is on: http://www.hdbatik.co.uk/ectemp/b/coolpeople.html . i've made the width very narrow just to make it obvious if it's working or not. this is the style (which is linked to by "@import url(includes/default-ghi.css);") which states the min, max width:

#outer
{
	width:85%;
	min-width:20em;
	max-width:30em;
/* 	min-width:49em; */
/* 	max-width:80em; */
	margin:40px auto 0 auto;
	text-align:left;
}

any ideas why the javascript isn't working? i know nothing about js so i could have easily made a very silly mistake. all the files the page is linking to, including the js file, are working fine though -- so it's not a not linking to files problem.

tia

[johnyboy]

is it something to do with what's near the start of of the js file:

/*@cc_on
@if (@_win32 && @_jscript_version>4)

and right at the end

@end @*/

looks like that needs interpretting by maybe the server? and maybe mine isn't?

[johnyboy]

ah, it seems to be working on ie7, but not ie6, ie5.5, nor ie5.01.

so the question has changed to why isn't it working for ie6, ie5.5, and ie5.01?

thanks.

[MikeFoster]

Hi johnyboy,

IE7 supports min-width/max-width etc.

The "/*@cc_on" is a conditional compilation directive - only supported by IE. It is a good way to make sure that only IE executes that code. However, instead of making all browsers download it, I would do something like this:

<!--[if lt IE 7]>
<script type="text/javascript" src="includes/minmax.js"></script>
<![endif]-->

That's an interesting script. I put together a simple test page and it appears to be working properly.

[johnyboy]

hi,

IE7 supports min-width/max-width etc.

well there's a thing. i really thought it didn't.

The "/*@cc_on" is a conditional compilation directive - only supported by IE. It is a good way to make sure that only IE executes that code.

i see.

However, instead of making all browsers download it, I would do something like this:

<!--[if lt IE 7]>
<script type="text/javascript" src="includes/minmax.js"></script>
<![endif]-->

does "if lt IE 7" only present the <script... line to ie5, ie5.5, or ie6 and no other browsers? also, i've never found out about <!--[if ...]> kind of things -- is that something that a server interprets? does the server need something doing to it to make it work or is it most likely that it's already going to work? i'm using an apache server.

That's an interesting script. I put together a simple test page and it appears to be working properly.

hmm. could you, or anyone else, confirm that my version (of using the min max width js) is or isn't working in ie5, ie5.5, or ie6 please? this page http://www.hdbatik.co.uk/ectemp/b/coolpeople.html will look like this if it's working:




and this if it's not:




thanks.

[MikeFoster]

does "if lt IE 7" only present the <script... line to ie5, ie5.5, or ie6 and no other browsers?

Yes, you are right.

about <!--[if ...]> kind of things -- is that something that a server interprets?

No. All browsers (except IE5+) will simply see it as a comment.

On your coolpeople page it is not working for me in IE6 on Win2K.

[johnyboy]

ok thanks for the info. right, i'll give the "if lt IE 7" thing a go. thanks.

here's something odd: that <script.. bit on my page i'm linking to, is making the whole page in the browser window appear too high, making part of it bleed off (as you can just see in those to thumbnail screen shots above). without the <script... bit it doesn't go off the top edge like that. :/

> On your coolpeople page it is not working for me in IE6 on Win2K.

right, thanks for confirming that. obviously something i'm doing wrong then. will keep looking for what.

is it because the style that contains the min max for my page is in an @imported file? does that make a difference? on your version Mike, the style is in the same file as the html itself... i wonder if that's it.

thanks.

[MikeFoster]

The minmax script does alot - but I didn't look deep enough to see exactly everything it does.

I doubt that it has anything to do with where the styles are declared.

My test page is very simple - only text, and I put the 'min/max' properties right on those DIVs that hold the text. I think there is a clue there but I'm not sure what.

[MikeFoster]

For your situation the following code may work just as well. It is very simple and doesn't make all the checks that the other code does. Also, it will only work with pixel sizes.

<!--[if lt IE 7]>
<script type="text/javascript">
window.attachEvent('onload', function() { ieMinMax('test3', 400, 600); });
function ieMinMax(id, min, max)
{
  var e = document.getElementById(id);
  if (e) {
    setInterval(
      function() {
        var w = document.documentElement.clientWidth;
        if (w < min) {
          e.style.width = min + 'px';
        }
        else if (w > max) {
          e.style.width = max + 'px';
        }
        else {
          e.style.width = 'auto';
        }
        //window.status = w + ' / ' + e.offsetWidth;/////////////
      }, 500 // run twice per second
    );
  }
}
</script>
<![endif]-->

I threw this together quickly so, if you use it, please test it well.

Instead of using "document.documentElement.clientWidth" you might want to use something like xClientWidth

[johnyboy]

> I doubt that it has anything to do with where the styles are declared.

aha, this http://www.hdbatik.co.uk/ectemp/b/p5.html which just has

#outer
{
	min-width:20em;
	max-width:30em;
}

repeated in the <style... tags in the page's head seems to work (i think -- i'm tired and going fuzzy so am going to look at it properly tomorrow)

thanks.

[johnyboy]

ah, i posted my last message before i saw your recent post. i'm really past thinking straight, will look at your suggestion tomorrow.

thanks

[MikeFoster]

Yes, the p5 page works for me on IE6. You may be on to something

[johnyboy]

yup it does seem to work. amazingly. i'm going to write to the guy who's behind the minmax script and suggest he points out that the min max css needs to be contained in the base html file. funny how vague intuition based on next to zero actual knowledge does work sometimes.

the only thing is there is that annoying upwards shift of the whole page leaving it partly bleeding off the top of the window's edge. i suppose i could include a bit of css between the <!--[if lt IE 7]><![endif]--> (is it ok to have two <style type="text/css">...</style> blocks in a strict xhtml head?) that shifts the page down for ie5-6 which would compensate for that (the upwards shift doesn't occur with other browsers, only ie5-6, and only started occuring since i put this javascript in).

separetely, what are <!--[if lt IE 7]><![endif]--> type of things called? i'd like to read about them but don't know what to search for.

[MikeFoster]

that annoying upwards shift of the whole page

Yes you can have any number of STYLE elements, but for a test just don't include the minmax script, and leave the STYLE elements as they are.

For reference: Conditional Comments, Conditional Compilation.

[johnyboy]

> but for a test just don't include the minmax script, and leave the STYLE elements as they are.

i know already that without the <script... bits none of the browsers have that unwanted upwards shift. ie5, 5.5 and 6 get the upwards shift once the script is introduced. so none-ie5-5.5-6 browsers shouldn't get the script so the issue doesn't effect non ie5, 5.5 and 6 browsers. and ie5, 5.5 and 6 are all upward shift effected in the same way so a compensatory bit of css that gets served to just ie5, 5.5 and 6 (and seeing as there's going to be a mechanism in place to already just serve stuff up to those browsers: <!--[if lt IE 7]>...<![endif]--> then that'll be just fine i think). so a compensatory css downwards shift for ie5, 5.5 and 6 should sort it.

thanks

[funktifyknow]

why not just use this and no even bother with javascript? i know it work in IE6 not sure about 5.5 and 5.01 but definately in 6. If you don't have a lot of users that will be using 5.X it might be the best bet.

/* for all browsers that understand min-width */
.width {width:100%; min-width: 600px;}

/* the bodge for IE6 browsers */
* html .minwidth {border-left:600px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-600px; position:relative; float:left; z-index:2;}

Just define an outer div with the class .minwidth and your inner, i.e. content, div with .container it should work great.

[johnyboy]

oops sorry, i missed this reply.

i didn't know about that method is the reason i wasn't doing it. will try it -- thanks very much for pointing that out.