JQuery plugin works fine in static html but has no effect on drupal page

By RandomSeb on 30 Dec 2015 at 09:39 UTC

I don't even know where to begin to debug this, but the following static html page works just fine, and the progress bar under the image raises with the jquery animation to replicate a thermometer.. But the exact same thing on drupal does not work.. nothing happens. What can be the difference? The jquery and plugin is loaded in the header in both cases, and the page has the same div structure fr the element.. What it appears to me is that the jquery .animate() function doesnt work when its on the dynamic drupal page.. huh

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>progressbar demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="jqmeter.min.js"></script>
</head>
<body> 
<div class='thermometer'>
    <div class='inner-thermometer'>  
       <div class='thermometer_img'>
         <img src="thermo.png">
       </div>
       <div class="thermometer_bar"><div id="thermometer_bar"></div></div>
    </div>
</div>
<style>
.thermometer_img {
    position: absolute;
    z-index: 2;
    border: 1px solid blue;
    padding: 0px;
    width: 124px;
    //left: 100px;
}
.thermometer_bar {
    position: absolute;
    z-index: 1;    
    height: 115px;
    margin-top: 25px;
}

.thermometer {
    width: 100px;
    margin-left: 200px;   
}
</style> 
<script>
  $('#thermometer_bar').jQMeter({
      goal:'10000',
      raised:'10000',
      orientation:'vertical',
      width:'50px',
      height:'115px',
      bgColor: "#fff",
      barColor:'#9c0f17',
      displayTotal: false
  });    
    
</script>
</body>
</html>

Drupal 7 page:

... regular header stuff..
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery || document.write("<script src='/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js'>\x3C/script>")</script>
<script src="https://192.168.0.103/misc/jquery.once.js?v=1.2"></script>
<script src="https://192.168.0.103/misc/drupal.js?o05z01"></script>
<script src="//code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write("<script src='/sites/all/modules/jquery_update/replace/ui/ui/minified/jquery-ui.min.js'>\x3C/script>")</script>
<script src="https://192.168.0.103/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.min.js?v=1.2.1"></script>
<script src="https://192.168.0.103/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script src="https://192.168.0.103/modules/contextual/contextual.js?v=1.0"></script>
... more regular header stuff...

... regular drupal over-structured div structure..
<!-- for smaller screens --><div class='row thermometer_box hidden-lg hidden-sm hidden-xs'>
   <div class='row'>
      <div class='col-sm-12'>
         <h5 class='thermometer_caption'>Hermitage Receives Challenge Grant!</h5>
      </div>
   </div>
   <div class='row'>
      <div class='col-sm-4'>

<div class='thermometer'>
    <div class='inner-thermometer'>  
       <div class='thermometer_img'>
         <img src='sites/all/modules/hermitmeter_civicrm/thermo.png'>
       </div>
       <div class='thermometer_bar'>
          <div id='thermometer_bar'>
          </div>            
       </div>
    </div>
</div>
      </div>
     <div class='col-sm-8'>
<p>long paragraph of text</p>
     </div>
  </div>
</div>
<script src='https://192.168.0.103/sites/all/modules/civicrm//extern/widget.php?cpageId=1&widgetId=1&format=3'></script>
<script>
(function($)
{
  $('#thermometer_bar').jQMeter({
      goal:'10000',
      raised:'10000',
      orientation:'vertical',
      width:'50px',
      height:'115px',
      bgColor: '#fff',
      barColor:'#9c0f17',
      displayTotal: false
  });    
}(jQuery));
    </script>  
</section>

Why would it work in a static html? What is drupal doing to change jquery functionality? I account for the $ not being globally defined, and verified that the JQMeter plugin is stepping in the code properly, and it just steps over .animate() (which sets the height property normally) without doing anything.

The plugin comes from here, and I have the vertical bar under a thermometer image which has it's innards cut out so that the bar shows through:
http://www.jqueryscript.net/loading/Animated-Customizable-Progress-Meter...

This will be integrated with civicrm's contribution widget to be able to display a nice fundraiser thermometer