Posted By

talbs on 04/27/09


Tagged

regex javascript jquery slider progress infoviz background-position simplify


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

benrudolph
rsoule
dougunderscorenelson
talbs
danielfilho
keith
peacockct


[JQuery] Progress Slider Functionality


 / Published in: jQuery
 

mad props to Doug Avery (http://snipplr.com/users/dougunderscorenelson/) and http://javascript.about.com/library/blnumclean.htm (for the regex pattern)

  1. //============================================
  2. // Progress Slider Functionality
  3. //============================================
  4. // Mad props to Doug Avery (http://www.google.com/profiles/dougunderscorenelson)
  5. $.fn.simplify = function(string){
  6. var new_string = string.replace(/[^\d\.-]/g,"");
  7. alert(new_string);
  8. return new_string;
  9. };
  10.  
  11. $(".progress-slider").addClass("sliderized");
  12. $("li.goal").each(function(){
  13. var count = $(this).find(".count").html();
  14. var target = $(this).find(".target").html();
  15. var processed_count = $(this).simplify(count);
  16. var processed_target = $(this).simplify(target);
  17. var percent = (processed_count/processed_target)*100;
  18.  
  19. $(this).find(".heading").after('<div class="container-slider"><div class="slider" style="background-position:'+percent+'% 0;"></div></div>');
  20. });
  21.  
  22.  
  23. <!-- Here's a bit of example (X)HTML to go with this:
  24.  
  25. <div>
  26. <h2>Project Progress</h2>
  27. <ul>
  28. <li>
  29. <h3>Our Membership Status</h3>
  30. <p><strong>150</strong> members so far towards our goal of <strong>500</strong></p>
  31. </li>
  32. <li>
  33. <h3>Our Fundraising Status</h3>
  34. <p><strong>$200</strong> raised so far towards our goal of <strong>$50,000</strong></p>
  35. </li>
  36. </ul>
  37. </div> -->

Report this snippet  

You need to login to post a comment.