CSS - How to do a: “ONE-TIME CSS EXPRESSION” in css? (e.g. max-height / max-width for IE)
Question
I usually solve my programming doubts before I fantasize to make a question in SO, but this is the first time I can't seem to find the answer....so...here it goes my first question to the site after hours of trying to solve this:
¿How to have a one-time css expression?
WHY one-time expression?: if we do some TEST like(be careful, cause IE6 & IE7 will show the alert again and again...):
<div style="height:expression(alert('this alert repeats itself'));">
content with infinite alert...
</div>
the expression gets evaluated till the end of time...that's why I would like to understand a way to make it happen just once, like to overwrite the style itself like the 2° article tries to explain, but I can't really get it to work....
as we can read in this article:
http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_6/
expressions repeat themselves and that could be a performance problem...
then this article:
http://vacskamati.blogspot.com/2008/10/one-time-execution-of-ie-css.html
which is great cause it's the only one I've found that tries to resolve this...but I can't seem to get it right....
WHAT I AM TRYING TO DO...is emulate the "max-width" and "max-height" in IE ...I know FF and evyerthing else can do it directly with CSS..I DO have to make it work somehow in IE6 and IE7...
I KNOW I could use JS outside, but as you will see in my code...I'm gonna try to put php values...so I need to have some control directly in the expression so it excecutes automatically just once and then I don't have to write JS functions elsewhere....I think this should be very simple...but I just can get it...anyway...my code is something liek this....:
<div id="div_id"
style="
max-height:<?php echo $height_var; ?>;
-$height:
expression(
if(document.getElementById('div_id').offsetHeight><?php echo $height_var; ?>){
document.getElementById('div_id').style.height = '400px'
}
);
overflow:scroll;
" >
content--lbalbalbalbalblablablalb
</div>
Sooo...mmm that's the basic idea...I already tryied different ways in which the above article tryies to explain, I already tryied sending the guy a mail, mmm, but while I wait for the possible answer, I expose this problem to the SO community cause it's very strange to not beign able to find an answer for something which I think might be simple...
So for now...as far as I know the EXPRESSION repeats itself..and I get the SCROLL if the original content is larger than 400px....but I know it repeats itself cause...if I send an "alert()" it appears all the time....so....again HOW CAN I ACHIEVE A ONE TIME EXPRESSION...so IE doesn't evaluates it mousemove or any action ....
Thanks in advance =) (and sorry for my weird indented code...=P )
2 answers
solution1
0
I don't exactly know what do you want, but I hope this will help:
Emulate max-width:
* html div#division
{
width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}
div#division
{
max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}
Emulate max-height
* html div#division
{
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
div#division
{
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}
Note that one time css expression is no longer supported. http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
solution2
0 2011-08-30 11:26:35
max-width and max-height DO work in IE (buggy in 6). Just make sure to:
- Add !important:
style="max-height: 200px !important" - Add DOCTYPE "-//W3C//DTD XHTML 1.0"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <div style="border: red thin dotted; max-height: 40px !important; overflow: hidden"><pre>qwerty qwerty qwerty</pre></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.