Dynamic Web Content With Javascript And JQuery

This post describes how to use Javascript to create dynamic web content.

Example: Changing Appearances

It is relatively simple to enhance a webpage with interactive features. For example, this post contains buttons that change its appearance. Click the "Help" button to learn more.

The purpose of this post is to demonstrate a simple method of transforming a static page into one that is dynamic.

The buttons and their actions are implemented via a combination of Html, CSS and Javascript. Cascading stylesheets are used to define the attributes of Html elements in each state. Javascript enables dynamic content by changing the style attributes of various Html elements on the page.

The code segments necessary to recreate these dynamic elements are explained below.

Appearance: Visibility:

Appearance
Toggle appearance of blog by pressing the button
Visibility
Toggle visibility of this text by pressing the button

Html

The Html code for the page is fairly simple. In the header

A style tag is used to include the CSS stylesheet.
A script tag is used to include the JQuery library, which is used by Javascript.
A script tag is used to define the Javascript.

In the body, there is

A "Help" button with ID equal to optional
A "Day/Night" button with ID equal to daynight
A div element containing instructions with class equal to optional

  <!doctype html>
  <!-- !doctype html public "-//W3C//DTD HTML 4.0 Transitional //EN"> -->
  <html>
  <head>
      <!-- STYLESHEET -->
      <style type="text/css">
          /* insert stylesheet here */
      </style>

      <!-- JAVASCRIPT -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script language="javascript">//<![CDATA[
          /* insert js code here */
      //]]></script>
  </head>
  <body>

  <button id="optional">Help</button>
  <button id="daynight">Day/Night</button>
  <div class="optional">
  <h1>Buttons</h1>
   * Toggle visibility of this text by pressing the "Help" button
   * Toggle appearance by pressing the "Day/Night" button
  </div>
  </body>
  </html>

Stylesheet

The style of Html elements is specified in a stylesheet included in the header. There are separate styles day and night for the <body> tag. These styles alter the foreground (text) and background colors. Elements with class optional are initialized to be invisible display: none.

  body { /* static body style: e.g. margins, font, etc. */
  }
  body.day { /* day body style */
      color: #000000;
      background-color: #FFFFFF;
  }
  body.night { /* night body style */
      color: #AAAAAA;
      background-color: #191919;
  }
  .optional {
      display: none;
  }

Javascript

The response to button clicks is governed by Javascript, written with the help of the JQuery library that was included in the header. In this script:

JQuery code is included in the document's ready() function. This ensures that the script is activated after the page has completed loading.
In line 3, JQuery defines a function that is called when the button with ID equal to optional is clicked.
Within this function, on line 4, JQuery is used to toggle the visibility of div elements with class equal to optional.
Lines 8-13 initialize the CSS classes for the <body> tag. If it is daytime, the CSS style body.day is used; for nighttime, the CSS style body.night is used.
In lines 15-18, JQuery is used to toggle the classes for the same elements. The instantiated styles are removed by one of the toggle() commands, and the alternate styles are included by the other.

  $(document).ready(function(){
      /* Toggle visibility of element */
      $("button#optional").click(function(){
          $("div.optional").toggle();
      });

      /* Display day mode between 7am and 7pm */
      var currentTime = new Date().getHours();
      if (7 <= currentTime && currentTime < 19) {
          $("body").addClass("day");
      } else {
          $("body").addClass("night");
      }

      $("button#daynight").click(function(){
          $("body").toggleClass("day");
          $("body").toggleClass("night");
      });

  });

Wrap Up

That's about it.

Clicking the "Help" button activates the click function on line 3, toggling the visibility of the instructions, and clicking the "Day/Night" button activates the click function on line 15, changing the background/foreground colors of the page.

Have fun experimenting with Html, CSS and Javascript.

blog comments powered by Disqus

Published

14 April 2011