HTML5 and CSS3, Second Edition

We can control the width of the meter using CSS as follows. Create the file

stylesheets/style.css and add this to it:

html5_meter/stylesheets/style.css

meter{

width:280px;

}

Don’t forget to link to the CSS file in the section of the HTML page:

html5_meter/index.html

<linkrel="stylesheet"href="stylesheets/style.css">

When we look at this in the browser, we see a very nice meter. But meters

aren’t supported everywhere, so we need a good fallback solution.

Falling Back

Not every browser recognizes the <meter> tag. But we can easily solve that by

constructing our own meter using jQuery and the information we embedded

in the <meter> element. To do this we’ll create a new file called javascripts/fallback.js

that will hold our JavaScript solution. We need to load jQuery and this new

file at the bottom of our page.

First, to detect if the browser supports the <meter> element, we create the

meter element and check if the element has the max attribute defined. If it’s

undefined, we can assume that the browser doesn’t understand enough of

the <meter> to interpret our markup. We declare this as a function called

noMeterSupport(), like this:

html5_meter/javascripts/fallback.js

varnoMeterSupport=function(){

return(document.createElement('meter').max=== undefined);

}

Then we use jQuery to grab the values from the meter and construct a meter

when there’s no support for the <meter>.

Our meter is going to consist of an outer box that will represent the total

length of the meter, which we’ll call the fakeMeter; an inner box, which we’ll

call the fill; and a text label that shows the dollar amount. We’ll also attach

some styles to these elements. Once we have the new element in place, we

replace the <meter> tag with our own.

html5_meter/javascripts/fallback.js

Line 1 if(noMeterSupport()){

• varfakeMeter,fill,label,labelText,max,meter,value;


• 
  

  value= meter.attr("value");

  
  

meter= $("#pledge_goal");

report erratum • discuss

Showing Progress toward a Goal with the Element • 27

Download from Wow! eBook <www.wowebook.com>