Tag: conditional
Nabin Nepal (Starx) conditional css
March 7, 2012

Conditional CSS in CSS not working

Question by Dave

DaveDave

so I have this css code:

.onetoone{
    position: relative;
    margin: 10px auto 5px;
    padding: 20px;
    width: 878px;
    [if ! IE] height: 1241px;
    [if IE] height: 241px;
    border: 1px solid #AAAAAA;
    behavior: url(PIE.htc);
}

However I don’t see any different height on .onetoone in IE and Firefox, both are still have the same 214px height. It should has a 1232px height in firefox and 241px height in IE 8, right?

What did I miss?

Thanks for all your answers.

Answer by Starx

StarxStarx

Have you read the usage file?

According the website, you have to write the css and compile it using its online tool and then you have include c-css.php to get it working.

@import "/media/css/c-css.php";

According to example from this website, this should fix the problem.

.onetoone{
    position: relative;
    margin: 10px auto 5px;
    padding: 20px;
    width: 878px;
    border: 1px solid #AAAAAA;
    behavior: url(PIE.htc);
}
[if !IE] .onetoone {
    height: 1241px;
}

[if IE] .onetoone {
    height: 241px;
}

After you compile it becomes a huge file like this one here and you include like the way I said above.

However, I would go with the good old fashioned way I knew. And it was to include different css with the conditional CSS comments

<!--[if IE]>
   <style>
      .onetoone {
        height: 241px;
       }
   </style>
<![endif]-->

<!--[if !IE]>
   <style>
      .onetoone {
        height: 1241px;
       }
   </style>
<![endif]-->

Should work either way.

Update

Instead of loading different style like the one in my example load different file in the end after loading all the main css files in this way.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="fixforie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="fixforie6.css" />
<![endif]-->
Nabin Nepal (Starx) conditional jquery
November 30, 2010

Newbie stuck on a jQuery question…conditional statement

Question by flinx777

flinx777flinx777

So I’m a complete newbie and stuck on a conditional statement. Here’s my code:

<script type="text/javascript">
$(document).ready(function(){
 if($('span.fc_cart_item_price_total') == 0) {
  $(span.fc_info).addClass('foo');
 };
});
</script>

So I’m attempting to see if span with a class of “fc_cart_item_price_total” has a value of “0”, to then add a class of “foo” to the span with a class of “.fc_info”. This code above is not working. Here’s the HTML:

<span class="fc_info">Info 1</span><br />
<span class="fc_cart_item_price_total">$0.00</span><br />
<span class="fc_info">Info 2</span>

Here’s the other challenge I have. I’m trying to select the span with the value of “fc_info” before the span with the class of “fc_cart_item_price_total” but have no idea of how to just select this one span.

Answer by einaros

einaroseinaros

For each cart item whose price is $0.00, this will add the “foo” class to the preceding (and only the preceding) fc_info.

$(function() {
    $(".fc_cart_item_price_total:contains($0.00)").each(function(i, n) {
        (n=$(n)).prevAll(".fc_info:first").addClass("foo");
    });
});

Answer by Starx

StarxStarx

To make the above code working

<script type="text/javascript">
$(document).ready(function(){
 if($('span.fc_cart_item_price_total').html() == 0) {
  $(span.fc_info:first).addClass('foo');
 };
});
</script>

And to select the first class fc_info

Use $(".fc_info:first") as your selector

...

Please fill the form - I will response as fast as I can!