fundraiser-thermometer.js (requires jquery)

When you're running an online fundraiser it can be useful to provide a visual status of your fundraising status. This simple library allows you to render a thermometer-style visualization of your fundraising status. Here's how to use it:

  1. <script type="text/javascript" src="http://www.andydoestech.com/scripts/fundraiser-thermometer.js"></script>
  2. <div id="mythermometer"></div>
  3. <script type="text/javascript">
      $(document).ready(function() {
        setupThermometer("mythermometer",150,400,"FF0000",39);
      });
    </script>

This will populate the <div> created with the id of mythermometer with a thermometer colored red (FF0000) with a width of 150 pixels and a height of 400 pixels. The current state of the thermometer is 39%.


slideomatic.js (requires jquery)

Take a collection of photos and create an extremely customizable slideshow with the ability to show/hide controls and auto advance. To get going follow these steps:

  1. <script type="text/javascript" src="http://www.andydoestech.com/scripts/slideomatic.js"></script>
  2. <div id="myslideshow"></div>
  3. <script type="text/javascript">
      $(document).ready(function() {
        slideOMatic('myslideshow','#000000',5000,true,false,'http:/www.andydoestech.com/images/','jpg',100,320,240);
      });
    </script>

This will create a slideshow within the <div> with the id of myslideshow with a black border (#000000), a 5 seconds delay (or 5000 milliseconds), automatically advancing (true), controls not visible (false), and will pull 100 images from http://www.andydoestech.com/images with a file extension jpg. The dimensions of the slideshow is 320px wide and 240px high.