2

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 )

Knu
  • 14,806
  • 5
  • 56
  • 89
Edward
  • 615
  • 1
  • 5
  • 12
  • Forgive my ignorance, but why `-$height:` instead of `height:`? – shanethehat Aug 24 '11 at 16:27
  • ah, yeah, mmm, I read in the comments of the second article, that using the -$ hack was so that only IE6 and IE7 read the expression =P, but I guess is kinda optional? – Edward Aug 24 '11 at 17:11
  • What do you expect to happen when the content takes more space than what it's parent element has? – Dor Aug 24 '11 at 17:13
  • @Dor ,mmm..I'm not totally sure I follow the exact objects you are refering to, but...the DIV is gonna load a table, the content from that table comes from a database, so, it can expand very much or very little horizontally and vertically...so with the expression I want to force a "max-height", so if the content expands a lot, it then obtains the overflow property..I don't know if I made myself clear with that, or what is it you are referring to? =P – Edward Aug 24 '11 at 17:55

2 Answers2

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 */
}

http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

Note that one time css expression is no longer supported. http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx

  • Hi, thanks for the answer, unfortunately I've already been to that site, and tried contacting the guy to ask the same question, he even explains in the comments that IE "chases itself" it you put same values, that's why you put a "-1" to the value you want, like "332 ? 333"... So thanks, but this doesn't solve the original question about how to only make the expression happen just once =P – Edward Aug 25 '11 at 14:53
0

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>

friendzis
  • 799
  • 6
  • 17
  • mmm...thanks I guess, I'll try it later cause now I'm not at that computer, but, I'll have to through two things at you hope you can answer, mmm: 1- does this work without the doctype? cause I can't use that, sorry, and I'm guessing it's not gonna go without that?..IDK 2- I think it doesn't answer the original "how to do one-time CSS expression", but if it works for the max-height then I'll vote it up =) – Edward Aug 31 '11 at 04:57
  • 1
    http://msdn.microsoft.com/en-us/library/ms530809(VS.85).aspx "This property is enabled only under the strict !DOCTYPE." I did not answer the original question, but addressed the original problem (: – friendzis Aug 31 '11 at 07:39