SitePoint Sponsor |
|
User Tag List
Results 1 to 17 of 17
-
Apr 7, 2007, 05:32 #1
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
how to use js min max css width for IE script?
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:
Code:#outer { width:85%; min-width:20em; max-width:30em; /* min-width:49em; */ /* max-width:80em; */ margin:40px auto 0 auto; text-align:left; }
tia
-
Apr 7, 2007, 05:35 #2
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
is it something to do with what's near the start of of the js file:
Code:/*@cc_on @if (@_win32 && @_jscript_version>4)
Code:@end @*/
-
Apr 7, 2007, 05:43 #3
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Apr 7, 2007, 10:27 #4
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code:<!--[if lt IE 7]> <script type="text/javascript" src="includes/minmax.js"></script> <![endif]-->
Cross-Browser.com, Home of the X Library
-
Apr 7, 2007, 11:56 #5
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
hi,
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:
Code:<!--[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.
and this if it's not:
thanks.
-
Apr 7, 2007, 12:53 #6
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
does "if lt IE 7" only present the <script... line to ie5, ie5.5, or ie6 and no other browsers?
about <!--[if ...]> kind of things -- is that something that a server interprets?
On your coolpeople page it is not working for me in IE6 on Win2K.Cross-Browser.com, Home of the X Library
-
Apr 7, 2007, 13:03 #7
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Apr 7, 2007, 13:53 #8
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Cross-Browser.com, Home of the X Library
-
Apr 7, 2007, 14:20 #9
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Code:<!--[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]-->
Instead of using "document.documentElement.clientWidth" you might want to use something like xClientWidthLast edited by MikeFoster; Apr 7, 2007 at 14:39. Reason: modified code
Cross-Browser.com, Home of the X Library
-
Apr 7, 2007, 15:19 #10
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
> 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 hasCode:#outer { min-width:20em; max-width:30em; }
thanks.
-
Apr 7, 2007, 15:21 #11
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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
-
Apr 7, 2007, 18:39 #12
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes, the p5 page works for me on IE6. You may be on to something
Cross-Browser.com, Home of the X Library
-
Apr 8, 2007, 05:12 #13
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Apr 8, 2007, 18:00 #14
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
that annoying upwards shift of the whole page
For reference: Conditional Comments, Conditional Compilation.Cross-Browser.com, Home of the X Library
-
Apr 9, 2007, 02:59 #15
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
> 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
-
Apr 10, 2007, 13:44 #16
- Join Date
- Apr 2007
- Location
- New London, CT
- Posts
- 172
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Code:/* 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;}
Last edited by funktifyknow; Apr 10, 2007 at 13:46. Reason: clarification
-
Apr 20, 2007, 10:50 #17
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks