Build a Thermometer Controlled Page with jQuery
Hold on. Before anyone gets too excited, jQuery does not have the ability to actually monitor a room’s temperature.
The thermometer we are building is a vertical slider from the jQuery UI library. As the temperature is changed on the thermometer, the page design will update accordingly.
The choice to go green in today’s post wasn’t random. Actually, it’s the result of an annual one day movement in the blogosphere…
It’s Blog Action Day!
This year, Blog Action Day has a focus on climate change.
When you spend most of your time building digital real estate, it’s often hard to realize the implications that a website can have on the real world. But then again, this is the same world where changing the background of Google could save massive amounts of energy. With impact like that, there’s steps even a simple web designer can take to safeguard against damaging climate change.
A Climate Oriented Tutorial
Today we’re doing our part to build awareness via themed tutorial. Chances are that you’ve already seen talk of conserving trees on other participating blogs. To mix things up, we’re going to celebrate nature by building our own miniature bio-dome.
The Goal
By the end of this tutorial, we’ll have a fully functioning temperature sensitive “Eco-Dome” built with the power of jQuery.
Quick disclaimer: I am not a climatologist. The temperatures used in the end product were not chosen scientifically. They are a rough guess at typical climate ranges. Build Internet is not the type of place you should studying for a science test.
In the interest of keeping this post at a reasonable length, I’ll only be explaining the elements of code that are directly relevant to this tutorial. If you get caught up in anything not explained here, please feel free to leave a comment.
The HTML
New File: Create “jquery-environment.html“ in the root directory
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <!-- jQuery UI Libraries for Slider --> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> <script type="text/javascript" src="jquery-environment.js"></script> <title>jQuery Environment</title> <link type="text/css" href="http://jqueryui.com/latest/themes/blitzer/ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="jquery-environment.css" type="text/css" /> </head> <body> <div id="wrapper"> <div class="big-padding"> <h1>The jQuery Eco-Dome</h1> <p class="instructions">Drag slider along the thermometer to change temperature.</p> <div id="temp-controller"></div> <div id="eco-dome"> <p class="summary"><span class="current-climate">Moderate</span> / <span class="current-temp">50</span> °F</p> <p class="fact">Eleven of the twelve hottest years since thermometer readings became available occurred between 1995 and 2006 <a href="http://environment.nationalgeographic.com/environment/global-warming/gw-overview.html">Source</a></p> </div> </div> </div><!-- End of wrapper --> <!-- Hidden Content for Loading --> <ul id="climate-facts"> <li id="rainforest-fact">One hectare (2.47 acres) may contain over 750 types of trees and 1500 species of higher plants <a href="http://www.rain-tree.com/facts.htm">Source</a></li> <li id="moderate-fact">Eleven of the twelve hottest years since thermometer readings became available occurred between 1995 and 2006 <a href="http://environment.nationalgeographic.com/environment/global-warming/gw-overview.html">Source</a></li> <li id="arctic-fact">Antarctica was imagined by the ancient Greeks, but not even seen until 1820 <a href="http://www.coolantarctica.com/Antarctica%20fact%20file/antarctica%20fact%20file%20index.htm">Source</a></li> </ul> <div id="image-bank"> <img id="rainforest-image" src="images/rainforest-banner.jpg"/> <img id="moderate-image" src="images/moderate-banner.jpg"/> <img id="arctic-image" src="images/arctic-banner.jpg"/> </div> <!-- End of hidden content --> </body> </html>
Setup for this page’s structure is fairly straightforward. We’re putting in a series of spans, paragraphs, and images for the jQuery to put content in later. Each is identified by an ID to make targeting simple. I’ve put in the contents of “Moderate Climate” as a default value.
In order to reduce load times, all of the banner images (available in the source file) are loaded into a div tag which we will hide using CSS. Since the images are being loaded on pageview as opposed to the first jQuery call, loading should be much smoother.
The only other hidden section will be a list containing all of the “Fun Facts” to be displayed on top of the climate images. Just like the images, they will be pulled using jQuery.
The CSS
New File: Create “jquery-environment.css“ in the root directory
Nothing special in the CSS department. The only customization outside of fonts and alignment is with the slider class. The default slider is a little too thin for this project, so we’ve widened the entire element.
/* Styles for jQuery Eco-Dome Tutorial */
/* Zach Dunn (www.buildinternet.com) */
*{margin:0; padding:0;}
body{background:#5D7E2F url("images/moderate-bg.jpg") no-repeat top left;}
#wrapper{width:960px; margin:20px auto; background:#FFF; border:1px solid #DDD; overflow:hidden;}
.big-padding{padding:30px;}
h1{font-family:Helvetica, arial, sans-serif; color:#191919;}
p{font-family: "Lucida Grande", arial, sans-serif; font-size:13px; color:#333;}
p a{color:#A90000; text-decoration:none;}
p a:hover{text-decoration: underline;}
/* Eco Dome Pieces */
#eco-dome{width:750px; height:200px; background:#f7f7f7 url("images/moderate-banner.jpg") no-repeat top left; float:left; overflow:hidden;}
#eco-dome p{color:#FFF; text-align: center; background:#000;}
p.summary{font-size:21px; display:inline; margin-top:10px; float:left; padding:10px;}
p.fact{display:inline; float:right; font-size:14px; padding:10px 0px; width:500px; clear:both; margin-top:60px;}
p.fact a{font-style:italic; font-size:11px;}
#temp-controller{float:left; margin:0px 30px;}
/* Navigation Pieces */
.ui-slider-vertical{height:200px; width:80px; border:1px solid #DFDFDF;}
.ui-slider .ui-slider-handle{width:90px; height:10px; border:1px solid #DFDFDF;}
/* Hidden Elements */
#climate-facts, #image-bank{display:none;}
What’s this jQuery UI Business?
Some of you may be wondering what the difference is between jQuery and the UI. They are not the same thing, nor are they packaged together by default. jQuery UI is a separate library dedicated to user interface elements (e.g. Tabs, progress bars). In this tutorial we’re only using the slider element.
Each of these elements have themes that can be loaded in by default. As you can see in the html code above, we are using the “Blitzer” theme. It is loaded in from an external CSS file hosted on the UI server.
The jQuery
New File: Create “jquery-environment.js“ in the root directory
/* jQuery Eco-Dome Tutorial */
/* Zach Dunn (www.buildinternet.com) */
var climate;
var climate_fact;
var climate_banner;
function analyze_temperature(current_temp){
//Determine current temperature range
if (current_temp >= 0 && current_temp <= 32){
//Arctic climate
climate = "Arctic";
//Get current banner
climate_banner = $("#arctic-image").attr("src");
$("#eco-dome").css({
'background' : '#000 url("' + climate_banner + '") no-repeat top left'
});
$("body").css({
'background' : '#285988 url("images/arctic-bg.jpg") no-repeat top left'
});
//Update displayed fact
climate_fact = $("#arctic-fact").html();
$(".fact").html(climate_fact);
}else if (current_temp > 32 && current_temp < 75){
//Moderate climate
climate = "Moderate";
//Get current banner
climate_banner = $("#moderate-image").attr("src");
$("#eco-dome").css({
'background' : '#000 url("' + climate_banner + '") no-repeat top left'
});
$("body").css({
'background' : '#5D7E2F url("images/moderate-bg.jpg") no-repeat top left'
});
//Update displayed fact
climate_fact = $("#moderate-fact").html();
$(".fact").html(climate_fact);
}else{
//Tropical climate
climate = "Rainforest";
//Get current banner
climate_banner = $("#rainforest-image").attr("src");
$("#eco-dome").css({
'background' : '#000 url("' + climate_banner + '") no-repeat top left'
});
$("body").css({
'background' : '#11170d url("images/rainforest-bg.jpg") no-repeat top left'
});
//Update displayed fact
climate_fact = $("#rainforest-fact").html();
$(".fact").html(climate_fact);
}
}
function changeTemperature() {
var current_temp = $("#temp-controller").slider("value");
$(".current-temp").html(current_temp);
//Determine climate from temperature
analyze_temperature(current_temp);
//Display climate title
$(".current-climate").html(climate);
}
$(document).ready(function(){
$("#temp-controller").slider({
orientation: "vertical",
range: "min",
max: 100,
min: 0,
value: 50,
slide: changeTemperature,
change: changeTemperature
});
});
Now that we’ve got all of the style and structure in place, it’s time to put an engine behind the visuals. The jQuery used below may look a little long, but it’s not terribly complex. I’ve broken down the flow below in sections to help you figure things out:
$(document).ready
- The div of #temp-controller is converted into a vertical slider. Whenever this slider is used (via slide and change parameters), it will trigger the changeTemperature function
changeTemperature Function
- The changeTemperature function assigns the current value of the slider to a variable called current_temp
- The current_temp variable is displayed into the “.current-temp” span tag
- The analyze_temperature function is called using the current temperature as an argument
- The climate name returned from analyze_temperature is displayed within the .current-climate span
analyze_temperature Function
- The current temperature (stored in current_temp) is filtered by current range
- Based on the temperature, a different style and climate name is assigned
- Style changes are done through the css jQuery method
- Images are pulled using src attributes of preloaded images in the hidden “image-bank” div
Environmentally Friendly Code
With some added ingenuity, you can adapt the concepts used in this tutorial to build your own slider-controlled content. Or digital terrarium. Whichever appeals to you more.
As of posting, I’ve only tested the result in Firefox in order to get a working version up. I’ll be revisiting it as needed to fix bugs in browsers from IE7 and up.
