Conditional js within css

[Violet_82]

Hi I am trying to give some sense to this expression

#container, #footer {
    width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
    }

found on here http://www.cameronmoll.com/archives/000892.html
but I can't quite get it. Is it saying if the width of the page is less than 745 then resize it to 740 or if it is more than 1202 then resize it to 1200? But what about that auto at the end of it? I guess it's not the same as a normal if statement, any idea please?
thanks

[pritaeas]

It is using the ternary operator twice.

Single ternary operator:

boolean expression 
    ? value when true 
    : value when false

Nested (as above):

boolean expression 
    ? value when true 
    : boolean expression 2 
        ? value when true 
        : value when false

So when the width is between 742 and 1202 it's using auto (take what's there).

[gon1387]

Its a ternary operator, derived from C,
what is says is this:

document.body.clientWidth < 740? //if the client width is less than 740px
    "740px" : // make it 740px
    document.body.clientWidth > 1202? // if not, check if it's greater than 1202
        "1200px" : // if it is, make it 1200px
        "auto" // if it's not, then make it auto

This one is it's if.. else statement counterpart

if(document.body.clientWidth < 740){ //if the client width is less than 740px
    return "740px";// make it 740px
} elseif(document.body.clientWidth > 1202){ // if not, check if it's greater than 1202
    return "1200px"; // if it is, make it 1200px
} else {
    return "auto" // if it's not, then just make it auto
}

If that's what you're looking for,
What the snippet is doing is, it's making itself responsive onload only. It's not responsive, when the window's size's dynamically resized. If you want it to be responsive using JS, you can listen to onresize event of the body. Add a handler on that event. But I'd sugest using css @media min or max width instead. It's much more easier to implement. here's a sample:

@media (max-width:740px){
    body {width:740px;}
}
@media (min-width:1200px){
    body {width:1200px;}
}
@media (min-width:741px) and (max-width:1199px){
    body {width:auto;}
}

[Violet_82]

fantastic, thanks for that, much clearer now!!