Home/ Questions/Q 6638171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:24:13+00:00

<!DOCTYPE html> <html> <head> <link rel=stylesheet type=text/css href=styles/common.css> <script src=http://code.jquery.com/jquery-latest.min.js></script> <script type=’text/javascript’> $(function() {

  • 0
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/common.css">

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type='text/javascript'>
$(function() { 
     $.getJSON('http://api.jo.je/justgiving/jsonp.php?d=expedition-aconcagua&callback=?', {},  function (data) {           
            $('#title').html(data.title);          
            $('#target').html(data.donations_target);           
            $('#raised').html(data.donations_total);          
            $('#percent').html(data.percentage_complete);    
            $('#charity').html(data.charity);    
            $('#charity_details').html(data.charity_details);    
            $('#charity_logo').html(data.charity_logo);
            var donations = "";
            $.each(data.donations, function(index, value) {                         
                    if (index < 3)
                    {
                            donations  = donations + "<strong>" + value.person + "</strong>" + value.amount + "<br />" + value.message + "<br />";
                    }
            });             
            $('#donations').html(donations);

            var cssjson = {
                ".percentage_bar_complete":{
                "width":"data.percentage_complete"
                }
            }

            var styleStr = "";
            for(var i in cssjson){ styleStr += i + " {\n"
            for(var j in cssjson[i]){
            styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n"     
            }
            styleStr += "}\n"  
            }
       })  
});  

    </script>

</head>
<body>
    <h2><span id='title'></span></h2>
    <h3><span id='charity'></span></h2>
    <div><img src="<span id='charity_logo'></span>" /><span id='charity_logo'></span></div>
    <h3>Target <span id='target'></span>, <span id='raised'></span> raised</h3>

    <h4>Percentage Complete - <span id='percent'></span>%</h4>
    <div class="percentage_bar">
        <div class="baseline">
            <p>0%</p>
        </div>
        <div class="total">
            <p>100%</p>
        </div>
        <br clear="all" />
        <div class="percentage_bar_bg">
            <div class="percentage_bar_complete">
            </div>
        </div>
    </div>

    <h3>Most recent donations</h3>

    <div id='donations'></div>

I am having difficulty getting the CSS part of the JSON to work. The intention is to have two div layers one top of the other, the bottom with a width of 100% to indicate the empty bar and the other with a percent width drawn from the JustGiving JSON feed “percentage_complete”.

However the CSSJSON code I have added does not seem to working. Any help would be greatly appreciated.

The page as it is can be viewed here http://www.adam-poole.co.uk/test/jg.html

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    var cssjson = {
  ".percentage_bar_complete":{
     "width":"data.percentage_complete"
  }
}

    you are setting the width property to the value of (string) "data.percentage_complete" instead of the value of the variable data.percentage_complete. remove the double quotation marks around the variable name.

    • 0