Initial version of animation

fundraising-gauge.php

@@ -18,11 +18,10 @@ public function __construct() {
     );
   }
 
-
   public function percentage_raised($instance) {
     $money_raised = intval($instance["money_raised"]);
     $percentage = intval($money_raised / 75000 * 100);
-    return $percentage . "%";
+    return $percentage;
   }
 
   public function money_raised($instance) {
@@ -70,18 +69,99 @@ public function widget( $args, $instance ) {
       #investmentgauge .apply a:hover {color: white;}
       #investmentgauge .apply a:focus {color: white;}
       #investmentgauge .apply a:active {color: white;}
+
+      #bar {
+        background: transparent url(<?php echo plugins_url( 'images/Thermometer.png', __FILE__ ); ?>) no-repeat 0 0;
+        height: 150px;
+        left: 15px;
+        top: 15px;
+        overflow: hidden;
+        width: 150px;
+        z-index: 110;
+      }
+
+      #bar span
+      {
+        background: transparent url(<?php echo plugins_url( 'images/Thermometer-overlay.png', __FILE__ ); ?>) no-repeat left bottom;
+        background-position: left bottom!important;
+        background-repeat: no-repeat;
+        bottom: 29px;
+        display: block;
+        font-style: normal;
+        height: 0;
+        left: 0;
+        line-height: 0;
+        overflow: hidden;
+        position: absolute;
+        text-indent: -9999em;
+        width: 150px;
+      }
+
+      #bar strong
+      {
+        color: white;
+        font-size: 3em;
+        left: 0;
+        position: absolute;
+        text-align: center;
+        width: 122px;
+        top: 45px;
+        z-index: 102;
+      }
+
+      #gauge
+      {
+        position: relative;
+        left: -10px;
+        height: 150px;
+        overflow: hidden;
+        width: 150px;
+        z-index: 100;
+        margin-top: -10px;
+        margin-bottom: 8px;
+      }
+
     </style>
+    <script type="text/javascript">
+    jQuery(document).ready(function() {
+       var barHeight = 150;
+
+       var percentage = <?php echo $this->percentage_raised($instance); ?>;
+
+       var raisedHeight = (barHeight * percentage) / 100;
+       // alert(raisedHeight);
+       var percentageText = percentage + "%";
+       // alert(percentageText);
+
+
+      options = {
+        duration: 1500, 
+        step: function(now) { 
+          var currentPercentage = Math.floor((now / barHeight) * 100);
+          jQuery("#bar em").text(currentPercentage + "%"); } 
+      }
+
+       jQuery("#bar span").animate({ height: raisedHeight}, options);
+      // jQuery("#bar span").height(raisedHeight);
+      // jQuery("#bar em").text(percentageText);
+     });
+    </script>
     <li class="widget" id="investmentgauge">
       <h2>
         <a href="#" rel="nofollow" class="sidebartitle">Investment raised</a>
       </h2> 
       <div class="figures">
-        <div id="gauge">
-          <span>
-          <?php
-          echo $this->percentage_raised($instance); 
-          ?>
-          </span>
+        <div id="gauge" style="border: solid 1px red">
+          <div id="bar" >
+            <span></span>
+            <strong>
+              <em>
+                <?php
+                echo 0; //$this->percentage_raised($instance); 
+                ?>%
+              </em>
+            </strong>
+          </div>
         </div>
         <div>
           <span class="num">
@@ -109,7 +189,7 @@ public function widget( $args, $instance ) {
          <div>
           investors
         </div>
-        <div class="apply"><a href="https://brixtonenergy.co.uk/shareoffer.php">Apply now</a></div>
+        <div class="apply"><a href="https://brixtonenergy.co.uk/shareoffer.php">Invest now</a></div>
       </div>
     <li>
   <?php