User:Aza/VapourExamples

Weather

<addon>
  <style>
    #weatherBadge{ opacity: 0.9; }
    #weatherBadge:hover{ opacity: 1.0; }
    
    #weatherPanel{ background: transparent; /* more css here */ }
  </style>
  
  <button id="weatherBadge" img="sun.png">
  
  <div id="weatherPanel">
    <!-- Pretty pretty mockup here -->
  </div>
  
  
  <script>
    Browser.load(function(){
      JetPack.UI.statusBar
        .add("#weatherBadge");
        .hover( showWeatherPanel );
      
      setInterval( updateWeatherBadge, 60*60 );
    })
    
    function updateWeatherBadge(){
      var weatherApiUrl = "http://...";
      
      JetPack.ajax( weatherApiUrl, function(data){
        jQuery("#weatherBadge").attr({
         "img", data.weather.img,
         "text", data.weather.forecast
        });
        
        jQuery("#weatherPanel")... /* update the panel */
      });
      
    }
    
    function showWeatherPanel(){
      this.showPanel("#weatherPanel", {y:"+5px"})
    }
    
  </script>
</addon>