CSS Expression with if/else

[Jim Marquardson]

Hi,

Is it possible to use expressions in CSS with if/else statements?

I am trying to dynamically resize and iframe using the following CSS:

<style>
iframe {height:express ion(if(document .readyState=='c omplete')frames ("myIframe").do cument.body.scr ollHeight+25);}
</style>

This code waits until the iframe src page to load before calculating
the height. This solves some problems that come up when it tries to
calculate the hieght on a partially loaded src. Anyway, this works
okay, but when pages take a long time to load, only a fraction of the
page is displayed until it is completely loaded. Is there any way to
put the following code in an expression?

if (document.ready State=='complet e') {
frames("winPane l").document.bo dy.scrollHeight +25);
} else {
5000;
}

Basically, the problem is that CSS interprets the characters ;, {, and
} as CSS notation, so I don't know if I can use these characters in an
expression. Is there any way to solve this?

Thanks,

Jim

[Lasse Reichstein Nielsen]

Re: CSS Expression with if/else

jim@marqorp.com (Jim Marquardson) writes:
[color=blue]
> Is it possible to use expressions in CSS with if/else statements?[/color]

This newsgroup is not about CSS, but ... no.
[color=blue]
> I am trying to dynamically resize and iframe using the following CSS:
>
> <style>[/color]

The "type" attribute is required, so use:
<style type="text/css">
[color=blue]
> iframe {height:express ion(if(document .readyState=='c omplete')frames ("myIframe").do cument.body.scr ollHeight+25);}
> </style>[/color]

That might work in IE, but not in any other browser. Using "expression " in
CSS is a proprietary IE extension (as is "document.ready State").

I don't know how "expression " works in IE (is it updated when the involved
variables change?).

Maybe you can use a conditional expression. In Javascript, as inherited
from C, it is written:
<condition> ? <expression-if-true> : <expression-if-false>

[color=blue]
> This code waits until the iframe src page to load before calculating
> the height.[/color]

Nope, it waits until *this* document has finished loading before
accessing the frames document (if I read it correctly, I'm not sure
what "readyState " means either).

[color=blue]
> if (document.ready State=='complet e') {
> frames("winPane l").document.bo dy.scrollHeight +25);
> } else {
> 5000;
> }[/color]

Try
((document.read yState=="comple te") ?
farmes["winPanel"].document.body. scrollHeight + 25 : 5000)
[color=blue]
> Basically, the problem is that CSS interprets the characters ;, {, and
> } as CSS notation, so I don't know if I can use these characters in an
> expression.[/color]

They are not part of a Javascript *expression*, but a Javascript
*statement*. The above notation is a conditional expression, just as
"if" is a conditional statement.

/L 'but don't make pages that only work in IE'
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Peter Abolins]

Re: CSS Expression with if/else

I have a similar issue, but have sort of solved it using a JavaScript
function on the onreadystatecha nge event for the iframe. The only
problem is that there are 4 readyStates, and with 10+ iframes on the
page, there is no guarantee that the onreadystatecha nge events fire
quick enough so that when I set the height of the iframe, the
readyState=='co mplete' (ie the page in the iframe has finished loading).

So, I have introduced a wait-loop (which is a kludge). However, I may
try out the css options mentioned above.

Thanks.

1+0 :-)

function adjust_frame_he ight(frame_id,c ontainer) {
var repeat = 5;

setTimeout("rep eated_adjust_fr ame_height("+fr ame_id+","+cont ainer+","+re
peat+")",250);
}

function repeated_adjust _frame_height(f rame_id,contain er,repeats) {
var next_repeat = repeats - 1
try {
var tempheight = 24;
if
(document.getEl ementById(frame _id).contentWin dow.document.re adyState=="c
omplete") {
document.getEle mentById(frame_ id).height =
(document.getEl ementById(frame _id).contentWin dow.document.ge tElementById
(container).off setHeight);
if (document.getEl ementById(frame _id).height == 0) {
document.getEle mentById(frame_ id).height =
tempheight;
}
} else {
if (next_repeats > 0) {

setTimeout("rep eated_adjust_fr ame_height("+fr ame_id+","+cont ainer+","+ne
xt_repeat+")",2 00);
} else {
if (document.getEl ementById(frame _id).height == 0) {
document.getEle mentById(frame_ id).height =
tempheight;
}
)
)
} catch(e) {
// Wait and then try again...
)
}
}






*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Jim Marquardson]

Re: CSS Expression with if/else

Thanks for the advice. I ended up using the advice Lasse gave about
using a conditional expression. So, here's the CSS code that takes
care of the iframe height problem:

iframe {height:express ion(document.ge tElementById('w inPanel2').read yState=='comple te'
? frames("winPane l2").document.b ody.scrollHeigh t+25 : 20000);}

Another option I considered using was the following:

<style>
iframe {height:express ion(getHeight() );}
</style>
<script>
function getHeight() {
if (document.getEl ementById('winP anel2').readySt ate=='complete' ) {
return frames("winPane l2").document.b ody.scrollHeigh t+25;
} else {
return 20000;
}
}
</script>

But, that takes several lines to do what I can now do in one. So, I
prefer the one line solution.

I realize that this will only work in IE, but since I'm designing the
pages for an intranet where everybody uses IE, it should work fine.

Thanks,

Jim