JavaScript and CSS Notes

getComputedStyle

Here's a link to a web page that includes some information about using JavaScript with CSS, including a short description of the getComputedStyle method: http://javascript.info/tutorial/styles-and-classes-getcomputedstyle

getComputedStyle is a standard method, but older versions of Internet Explorer don't support it.

Positioning

The values of the position element can be confusing, so be careful that you understand what each value means. Also, there are some aspects of positioning that are not obvious.

To better understand the position attribute and its values, let's look at an example where JavaScript will be used to move an image around inside a div element. The HTML defines the img element as a child of the div so that the image appears inside the div.

Your first thought might be to set the position of the image to absolute and then change the top and left attributes to the values that correspond to the desired location (for example (20, 5). What you will find, however, is that the image will not be in the correct location, and might not be inside the div at all. That is because the "containing element" of the image is not the div, but is the body element.

In order to place the image within the div you need to set the div's position to relative. That will make the div the "containing element", so the image will be positioned relative to the div.

You can see JavaScript and CSS positioning in action on this page.

Animation

You can use the CSS style attributes and the setInterval function to make animations in web pages.

setInterval creates a timer that will call a function on a given interval. The first parameter specifies the callback function, and the second parameter specifies the number of milliseconds (thousandths of a second) in the interval. For example, setInterval(animate, 1000); will call the function animate every 1000 milliseconds (every second). Usually you will want to save the return value of setInterval so that you can pass it as a parameter to clearInterval to stop the timer.

If you want to move something on a web page, you can have the setInterval callback function change the CSS top or left attributes. You can do color animations by changing text, background, and border colors attributes. You can also do things like change the src attribute of images and change the text in divs and spans. There is an example using the top and left attributes to move an image here: Animate Bot Example

CSS3 includes a transform attribute that can be used to translate (move), rotate, and scale HTML elements, including images. The transform attribute provides a very powerful mechanism for animation, but not all browsers implement it. There is a tutorial showing how to use the use of the transform attribute at http://www.shayhowe.com/tutorial/css3-animated-owl-tutorial/

Here's a link to another animation tutorial: http://www.schillmania.com/content/projects/javascript-animation-1/ There are links to other parts of the tutorial on the page.

Here's another tutorial: http://www.htmlgoodies.com/beyond/javascript/article.php/3709486

Mobile Browsers

Cell phones and other handheld devices are commonly used for Web browsing, but because of small screens, relatively limited bandwidth, and (in some cases) the cost of downloading data, making web applications that work well in mobile browsers is not easy.

CSS plays an important role in adapting web sites for mobile browsers because you can specify different style rules for different screen sizes. However, you can do much more with a combination of JavaScript and CSS than you can do with CSS alone. For example, it's possible to use CSS to specify background images, so CSS can be used to specify different background images (with smaller file sizes) for handheld devices than are used for devices with larger screens. CSS does not provide a way to specify the source of an img element, however, so if you want to change images based on the screen size, you need to use JavaScript.