javascript - getJSON to update progress bar -

-

trying progress bar on bootstrap show real-time progress json api, while showing % of goal achieved:

here how looks right now: http://puu.sh/jt2gu/823f6a6a0f.png

both progress bars should centered on page , progress isnt updating , i'm not sure why, please help?

  • progress bar coins sold
  • progress bar amount raised
  • % funded (should on top of picture)

css:

} .progress {     position: absolute;     top: 80%;     z-index: 2;     text-align: center;     width: 50%;  }

html:

 <div class="container">     <div class="banner-buynow">         <div class="col-md-2 col-md-offset-3 object-non-visible"         data-animation-effect="fadein">             <a class="btn btn-info" href="javascript:void(0);" onclick=             "opentac();">buy now<br>              <div class="ratebtc"></div></a>         </div>          <div class="progress">             <div class="progress-bar active progress-bar-striped active">                 <div class="percentage-label"></div>             </div>         </div>     </div>      <div class="progress">         <div class=         "progress-bar progress-bar-success progress-bar-striped active"         style="width:1%">             <div class="goal-label"></div>         </div>     </div> </div>  <div class="funded-label"></div>

js

 $.getjson("https://www2.shapeshift.io/crowdsales", function (json) {     var soldt = math.round(json.sold);     var left = json.remaining;     var total = math.round(soldt+left);     var ratebtc = json.ratet;     var percent = math.round(soldt/total*100);     var backers = json.orders;     var raisedtotal = math.round(json.raised) + ' btc';     var goal = math.round(raisedtotal/730);     var percentsold = math.round(percent) + '%';     var backers = json.orders + ' backers';     var funded = math.round(json.raised/730*100);     $('.progress-bar').css('width', percentsold);     $('.percentage-label').html(soldt + "  coins sold ");     $('.ratebtc').html(ratebtc );       $('.backers').html(raisedtotal + " " + backers );     $('.progress-bar-success').css('width', goal);     $('.goal-label').html(raisedtotal + " towards goal of 730 btc");     $('.funded-label').html(funded + " % funded"); });

jsfiddle: https://jsfiddle.net/qy1ko5xf/

you can add div class funded-label inside container if want @ bottom of container. give absolute position.

here's updated html

<div class="container">     <div class="banner-buynow">         <div class="col-md-2 col-md-offset-3 object-non-visible"         data-animation-effect="fadein">             <a class="btn btn-info" href="javascript:void(0);" onclick=             "opentac();">buy now<br>              <div class="ratebtc"></div></a>         </div>             <br/>         <div class="progress">             <div class="progress-bar active progress-bar-striped active">                 <div class="percentage-label"></div>             </div>         </div>     </div>      <div class="progress">         <div class=         "progress-bar progress-bar-success progress-bar-striped active"         style="width:1%">             <div class="goal-label"></div>         </div>     </div> <div class="funded-label"></div>         </div>

the css funded-label div should this

.funded-label{     color: white;      font-weight: bold;     position: absolute;     bottom: 0px;     background-color: #003a74;     width: 100%;     text-align: left;     padding: 5px; }

and here' updated js

$(function(){      $.getjson("https://www2.shapeshift.io/crowdsales", function (json) {          console.log(json);         var soldt = math.round(json.sold);         var left = json.remaining;         var total = math.round(soldt+left);         var ratebtc = json.ratet;         var percent = math.round(soldt/total*100);         var backers = json.orders;         var raised = math.round(json.raised);         var raisedtotal = raised + ' btc';         var goal = math.round((raised/730) * 100);          console.log(goal);         var percentsold = math.round(percent) + '%';         var backers = json.orders + ' backers';         var funded = math.round(raised/730*100);         $('.progress-bar').css('width', percentsold);          console.log(soldt);          console.log(total);         $('.percentage-label').html(soldt + "  coins sold ");         $('.ratebtc').html(ratebtc );           $('.backers').html(raisedtotal + " " + backers );         $('.progress-bar-success').css('width', goal + '%');         $('.goal-label').html(raisedtotal + " towards goal of 730 btc");         $('.funded-label').html(funded + " % funded");     });   });

here's working jsfiddle. hope helps.


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more