34,333
edits
Changes
no edit summary
In the previous chapter ([[Understanding Cascading Style Sheets (CSS)]]) we learned about the basics of Cascading Style Sheets (CSS). If you are not familar familiar with CSS it is recommened recommended that you take some time to review the previous chapter.
In this chapter we will begin to explore making dynamic style changes to web page pages using JavaScript and CSS. We will being begin with some simple changes such as changing the color of some text before moving on to more complex tasks such as hiding, showing and moving blocks of content.
== Making Basic Dynamic Style Changes ==
</pre>
We can very easily change the color of this text from within JavaScript. The first step is to access the element using the ''getElementById()'' method of the document object (see the [[JavaScript Document Object]] chapter for details of this object):
<pre>
myElement.style.color="green";
</pre>
Let's put this togther in an example in which we have a button configured to change the color of some text when it is pressed:
</pre>
Next we need to define some styles for these layers so that we can distinguish between them (for details on CSS see [[Understanding Cascading Style Sheets (CSS)]]):
<pre>
In addition to hiding and showing elements in a web page it is also possible to position elements so that they overlap. JavaScript can then be used to control which element appears on top of the other layers.
Layers are defined using the <nowiki><div> and <iframe></nowiki> tags. The <nowiki><div></nowiki> tag is used to define blocks of content that are contained with within the current web page. In contrast the <nowiki><iframe></nowiki> tag is used when the content is to be loaded from another HTML file.
In this example we will look at the <nowiki><div></nowiki> tag but the concepts are the same for <nowiki><iframe></nowiki>.
We will now use the ''z-index'' property to control which layer appears on top. The ''z-index'' property contains a numerical value which specifies the position of the layer relative to the browser (which is considered to be layer 0). The higher the z-index setting for a layer, the closer to the top of overlapping layers it will appear. For example, to get our ''layer1'' layer to appear above ''layer2'' in the above example we would need to set the z-index property of ''layer1'' to 2. The following extends our example to include z-index values for each layer. In this case we will make sure that ''layer1 '' has a higher value than ''layer2 '' so that layer1 appears on top of layer 2''layer2'':
<pre>
== Making Layers that Move ==
Now that we have covered some more of the basics of layers we can now look some basic animation, speficially specifically moving the position of layers dymanicallydynamically.
Again we will use our previous example and this time we will write some JavaScript to change the position of Layer 2 when buttons are pressed, essentially causing the layer to move back and forth across the browser window:
</pre>
As the left and right buttons are pressed layer2 will move across the brwoser browser window in increments of 10 pixels:
[[Image:Javascript movable layers1.jpg]] [[Image:Javascript movable layers2.jpg]]
