Chapter 75. Automatically Refreshing the Page


Normally, the visitor needs to click the browser's Refresh button to reload the current Web page. But there's an easy way for you, the designer, to build an automatic refresh cycle into your page, so that the browser reloads the current document without the visitor's interaction. This trick comes in handy if your page contains time-sensitive or real-time information, like the current weather conditions, stock quotes, or inventory levels.

GEEKSPEAK

Information is said to be real-time if it reflects the current, up-to-the-second state, whether it's the number of units of product in a warehouse, the price of a share of stock, or the national debt.


Say you have a Web page that generates and displays lucky-number lottery picks for your visitors, as in Figure 75.1. A simple JavaScript function called doLucky() handles the picks.

Figure 75.1. This Web page calls a simple JavaScript function three times to generate the visitor's lucky numbers for the day.


Now say that you want to avoid a lawsuit, and you decide to change your page so that the browser displays the visitor's lucky numbers for the next three seconds only, thinking that your visitors will have a harder time proving fraud if your lucky-number sets are only good for three seconds each. Essentially, you have a real-time situation here. To keep your page accurate, you need to refresh it every three seconds.

Listing 75.1. View Source for Figure 75.1.

[View full width]

 <html>   <head>     <title>Lucky Numbers</title>     <script language="JavaScript"> /* This function picks a random number between 0 and 9 and writes it to the page. */       function doLucky() {         var x = Math.round(Math.random() * 9);         document.write(x);       }     </script>   </head>   <body> <!-- The following paragraph calls the doLucky() function three times to write three  random numbers to the page. -->     <p>Here are your lucky numbers for the day: <strong>        <script language="JavaScript">doLucky();</script>        <script language="JavaScript">doLucky();</script>        <script language="JavaScript">doLucky();</script>        </strong></p>   </body> </html> 

The easiest way to do this is to insert a special meta tag in the head section of your page. Meta tags indicate information in an HTML document that isn't for the browser to display. These tags have a variety of functions. Most often, they include keywords or descriptions of the page for the benefit of search engines. But you can also use a particular type of meta tag to enable the refresh behavior, as in Figure 75.2.

Listing 75.2. View Source for Figure 75.2.
 <html>   <head>     <title>Lucky Numbers</title>     <meta http-equiv="refresh" content="3,#">     <script language="JavaScript"> /* The doLucky() function goes here. */     </script>   </head>   <body>     <p>Here are your lucky numbers for the next three seconds:        <strong>        <script language="JavaScript">doLucky();</script>        <script language="JavaScript">doLucky();</script>        <script language="JavaScript">doLucky();</script>        </strong></p>   </body> </html> 

Figure 75.2. Use a meta tag to make the browser reload the page every three seconds.


FAQ

Where do meta tags go?

Meta tags belong in the head section of your page. Don't put them in the body section.


Just as the type attribute of an input tag determines the kind of form widget that the browser displays, the http-equiv attribute of a meta tag works the magic. Different values in the http-equiv attribute create different kinds of meta tags. By setting the http-equiv attribute to refresh, you turn the meta tag into an automatic page refresher.

How often the browser refreshes the page depends on the value of the content attribute. In the View Source for Figure 75.2, the meta tag looks like this:

 <meta http-equiv="refresh" content="3,#"> 

The 3 in the content attribute indicates a refresh cycle of three seconds. In other words, the browser reloads the page every three seconds. The # in the content attribute is browser shorthand that stands for the current page. You've used this notation before to create self-referential links. So, to express the value of the content attribute in plain language, you get something like, "Every three seconds, reload the current page."

There's no rule that says the page has to reload every three seconds. For a longer refresh cycle, increase the number of seconds:

 <meta http-equiv="refresh" content="60,#"> 

This meta tag causes the page to reload every minute.

TIP

If the number-sign notation bugs you, you don't have to use it. Simply replace it with the complete Web address of your Lucky Numbers page, including the http://www part:


<meta http-equiv="refresh" content="3, [complete URL goes here]">




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net