<!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 facing a challenge with implementing the CSS portion of the JSON file. The objective is to have two div layers stacked on top of each other, one representing an empty bar with a width of 100%, and the other with a dynamic percentage width obtained from the JustGiving JSON feed "percentage_complete".
Unfortunately, the CSSJSON code I included does not appear to be functioning correctly. Any assistance or guidance on this matter would be highly appreciated.
To view the current state of the page, please visit