Lab 16: JavaScript and CSS

In this lab, you will work with the JavaScript support for manipulating CSS styles and classes.

Objectives:

• To manipulate CSS styles and classes from a script

Part 1: Changing the CSS Class

Steps:

1. Use File - Close All to close all open editing windows.

2. In RAD, create a new Dynamic Web Project named Lab16Web associated with Lab16EAR.

3. In the WebContent folder, create a new HTML file, drawattention.html. In the file's "head", define a style element that contains a CSS class named .attention with the following properties:

   • Background color set to green.
   • Font weight set to bold.
   • Border set to solid, 3-pixel black.

   In the body, write several paragraphs, each with a unique ID and some sample text in each. Also define a form with a submit button. When the user clicks the button, run a script that toggles one of the paragraphs with the "attention" class.

Part 2: More Practice

Steps:

1. Move an image across a Web page by changing its x-position. Note that you could conceivably do this using a CSS3 transition or animation, but this technique will work on older browsers and will give you practice writing JavaScript. Follow these steps:

   1. Find a relatively small (less than 100 pixels wide) jpeg, gif or png file, perhaps using Google image search. Import or copy the image into the WebContent folder.

      If you don't know the image width, open it in Windows Paint and examine its properties.

   2. Create a new HTML file, movepic.html and display the image on the page using absolute CSS positioning:

      <img src="mypic.jpg" 
         style="position:absolute;left:10px;top:10px;">
      
                  

   3. Then write Javascript that that moves the image across the width of the browser window after the page loads. You can use the setInterval() method on the window object to start a continuous timer. In the timer function, change the absolute x position of the image. Be sure to stop the timer when the picture reaches the right side of the browser window (use the image's width). Play around with the position-change amount and the timer interval to get a smooth animation.

      Note that you can find the current browser window width using document.documentElement.clientWidth.