Use CSS and jQuery to overlay images in Google Apps Script HtmlService WebApp

Question

I am trying to use to display the progress made by my company in achieving a goal through a “jump” scenario. (The idea is for the horse’s image to move from left to right in another image of the horse’s track. The goal of our goal is the number from to which is stored in a Google spreadsheet.) HtmlService 0 60

I figured out how to print the value on the screen and how to use JavaScript ( jQuery ) to update CSSto move the horse. However, I could not connect them together. Here is what I came up with:

My file Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();    
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.NATIVE)
      .getContent();
}

function getHeadCount() {
  var ss = SpreadsheetApp.openById('some id');
  var sheet = ss.getSheetByName("Horse race headcount");
  var hC = sheet.getRange(24, 2);
  var headCount = hC.getValue();

  return headCount
}

My file Page.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<?!= include('Stylesheet'); ?>    
<!-- the above code serves the same purpose as an href for a style sheet --> 

    <div id='page' width="100%">
        <div id="wrapper">
            <img src="http://i.imgur.com/j1hUEvx.jpg" width="96%" />
            <div><p>Consultant Starts: <?!= getHeadCount(); ?> </p></div>
            <!-- the < ? != tag is for inserting the value of the function into the template -->                    

            <div id="mustang">
                <img src="http://i.imgur.com/CFtqjuy.png" />
            </div>
                <div id='scale'>
                    <div class='block' id='one'><span>start</span></div>
                    <div class='block' id='two'><span>10</span></div>
                    <div class='block' id='three'><span>20</span></div>
                    <div class='block' id='four'><span>30</span></div>
                    <div class='block' id='five'><span>40</span></div>
                    <div class='block' id='six'><span>50</span></div>
                </div>
        </div>
    </div>
<?!= include('JavaScript'); ?> 

My file css.html:

<style>   
    #page {
        background-color: f0f0f0;
        padding: 5px;          
    } 

    #wrapper { 
        margin: 0 auto;          
    }

   #mustang {
       position: relative;
       top: -347px;
       left: <?!= horseRace(); ?> <!-- 38% for 31 headCount -->                          
   }

    #scale {
       display: inline;
       text-align: center;
       width: 96%;
    }

    .block {
          float: left;
          position: relative; 
          width: 16%; 
          height: 30px;
          top: -400px;    
     }

     div p {
         width:100px;
         height: 50px;
         background-color: #f0f0f0; 
         position: relative;
         top: -300px;        
     }     

     #one {
          background-color: #1F78B4;
     }

     #two {
          background-color: #33A02C; 
     }

     #three {
          background-color: #E31A1C;
     }

     #four {
          background-color: #FF7F00;
     }

     #five {
          background-color: #6A3D9A;
     }

     #six {         
          background-color: #18258B;
     } 
</style>

JavaScript.html, CSS getHeadCount(); ,

? , - , . , !

Answer 1

jQuery, . $(#mustang).left. include() Html ( ), , css:

 #mustang {
     position: relative;
     top: -347px;
     left: 0%    
 }

JavaScript.html , , headCount , .

<script>

// This code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(positionHorse)
      .getHeadCount();
});

function positionHorse(headCount) {
  var position = 100 * headCount / 60;
  $('#mustang').css('left', (position)+'%');
}

</script>

.. css evaluate(), .

doGet() ... htmlOutput. :

function doGet() {
  var template = HtmlService
                 .createTemplateFromFile('Page');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                   .setTitle('Horse Race');

  return htmlOutput;
}