CODEWITHSUNDEEP
javascriptjquerycss
flipflop99
flipflop99

Reputation: 613

Passing a reference in CSS?

I'm trying to pass a reference (right term?) in the following css snippet where under the progressbar div, I'm trying to hook the % up with the dollar amounts in the subsequent status div, whereby 800/1000 is 80%. Is there a way to do this? Thanks!

<div id="progressbar">
    <div id="progress" style="width: 80%;"> </div>
</div>
<div id="status">
    <span class="heading">MONEY RAISED</span>
    $ 800
    <span class="heading">MONEY ASKED</span>
    $ 1,000 
</div>

Upvotes: 0

Views: 164

Answers (2)

rucsi
rucsi

Reputation: 516

You could use CSS expressions.

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. The problem with expressions is that they are evaluated more frequently than most people expect.

http://gadgetopia.com/post/2774
http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx
http://blog.dynatrace.com/2010/02/16/the-real-performance-overhead-of-css-expressions/

I wouldn't think about doing that in CSS, as it's pretty easy using jquery/javascript.

If you could change your DOM, a little, it would help a lot. Like this:

<div id="progressbar">
    <div id="progress"> </div>
</div>
<div id="status">
    <span class="heading">MONEY RAISED</span>
    $ <span id="raised">800</span>
    <span class="heading">MONEY ASKED</span>
    $ <span id="asked">1000</span>
</div>

Than use jquery:

var raised = parseInt($('#raised').text().replace(',','')),
    asked = parseInt($('#asked').text().replace(',',''));
$('#progress').css('width', (raised / asked)*100 +"%");

or javascript:

var raised = parseInt(document.getElementById('raised').innerHTML.replace(',','')),
    asked = parseInt(document.getElementById('asked').innerHTML.replace(',',''));
document.getElementById('progress').style.width = (raised / asked)*100 +"%";

Upvotes: 2

Pekka
Pekka

Reputation: 449823

Is there a way to do this?

Nope, not in pure CSS. You will have to specify either a class, or a style attribute containing the desired pixel width, or use JavaScript to parse out the dollar values, and set the width accordingly.

Upvotes: 1

Related Questions