Tuesday, May 10, 2005
JavaScript, CSS, and Background Coloring
Blog Entry #8
JavaScript and cascading style sheets (CSS) intersect in today's entry to produce some nifty background-coloring effects.
Roll your mouse over the colors of the color series below:
Red Orange Yellow Green Blue Indigo Violet
(Those of you who are 'scientifically inclined' will recognize that these colors in the form of light approximately make up the visible region of the electromagnetic spectrum, which ranges from lowest energy (longest wavelength) red light through the intermediate colors of the series to highest energy (shortest wavelength) violet light. Acronym fans, remember: ROY G BIV.)
To 'statically' set a background color for a document element, we would put the attribute:
style = "background-color: colorinfo"
("colorinfo" is the desired color as a word description or hex code)
or, more simply:
style = "background: colorinfo"
into the relevant HTML tag, e.g., <p>, <span>, <div>, etc. (At HTML Goodies, discussion of the <span> tag appears here, whereas the <div> tag crops up in the "So, You Want Positioning, Huh?" tutorial.)
For example, <span style = "background-color: lightseagreen">The Pacific Ocean</span> gives: The Pacific Ocean
To set background colors dynamically is not much more difficult, and can be done by making use of the JavaScript style object; to do this by, say, a mouseover, we can use the following command statement:
onmouseover = "this.style.backgroundColor = 'colorinfo';"
(the "this" keyword is a special operator that refers to the document element in whose HTML tag it resides; in "Example 2" on the JavaScript Kit style object page, "this" refers specifically to a division element)
or, more simply:
onmouseover = "style.background = 'colorinfo';"
In these statements, "style" is simultaneously serving as (a) an object, with a backgroundColor (background) property whose value is to be 'colorinfo', and (b) a property of the "this" element.
So, getting back to the demo at the top of the page, the code for dynamically changing the background (and 'foreground') color of "Red" is:
<span onmouseover="style.background='red'; style.color='white';">Red</span>
Not so tough, eh?
The getElementById( ) method
In extension of the above, we can access and dynamically style any document body element whose HTML tag holds an id="whatever" attribute via the getElementById( ) method, a method of the document object and one of the most powerful methods in JavaScript. In illustration, click on the question below:
What is the capital of Nicaragua?
(A) San Salvador
(B) Tegucigalpa
(C) Managua
(D) San José
The "What is the capital of Nicaragua?" question constitutes a span element, whose <span> tag holds an onClick event handler, which is discussed in Primer #5; the correct answer, "(C) Managua", also constitutes a span element, whose <span> tag holds an id="niccap" attribute. Connecting the two is the following onClick command statement whose syntax is again helpfully provided by JavaScript Kit:
onClick="document.getElementById('niccap').style.backgroundColor='yellow';"
(again, the "Color" of "backgroundColor" can be dropped)
I trust that you can write out the complete code for all of this.
Blogger background colors, revisited
With the getElementById( ) method now part of our JavaScript armamentarium, we are ready to horse around with background colors here at Blogger.com.
This blog makes use of the (old-school, no-longer-available) "Bluebird" Blogger template.
Click here to view the source code of my template. Click here to hide the code.
In the template, a post is contained in a <$BlogItemBody$> template tag that sits in a division element whose <div> tag holds a class="Post" attribute; in turn, the <div class="Post"> division is part of a larger division element whose <div> tag holds an id="main" attribute. To set a new background color - say, violet - for the <div id="main"> division, we can straightforwardly write:
<span onclick="document.getElementById('main').style.background='violet';">Click on this sentence to change the post background color.</span>
Try it below:
Click on this sentence to change the post background color.
Similarly, the "About Me" section of the blog that occupies the upper-right-hand corner constitutes a division whose <div> tag holds an id="menu" attribute. To set a new background color - say, gold - for the <div id="menu"> division, we could write:
<span onclick="document.getElementById('menu').style.background='gold';">Click on this sentence to change the background color of the "About Me" section.</span>
Try it below:
Click on this sentence to change the background color of the "About Me" section.
Let's get back now to the document.bgColor command, which I discussed but did not demonstrate in my last blog entry. The background color of the document is set by the body selector that kicks off the inline style block at the top of the template source; as you can see, the body's background-color property has the value "#C3CFE5", corresponding to a pale blue, which colors the stripes running up and down the sides of the template. In trying to change the color of the background side stripes, the problem here is that the document.bgColor command will not override the body selector information. What to do? The solution, it turns out, is quite simple:
(1) Remove "background-color:#C3CFE5" from the body selector; in its stead, insert a bgcolor="#C3CFE5" attribute in the <body> tag.
(2) NOW use a document.bgColor command where desired to change the document background color. To change the side stripes to red, for example, we could write:
<span onmouseover="document.bgColor='red';">Move your mouse over this sentence to change the side-stripe color.</span>
Try it below:
Move your mouse over this sentence to change the side-stripe color.
Alternatively, we could insert an id attribute - say, id="sidestripes" - in the <body> tag and then use an onmouseover="document.getElementById('sidestripes').style.background='red';" command statement in the <span> tag.
I'm still having problems with writing new messages to the window status bar here at Blogger - when I go to the Blogger site, there seems to be something from the Blogger server that my computer won't load, and a "Transferring data from www.blogger.com... [or buttons.blogger.com...]" status message preempts the execution of the window.status.command, at least when I'm using Netscape - but at least we're all up to speed on background coloring with JavaScript. Next time, we'll get into some more event handlers as we take on HTML Goodies' JavaScript Primers #5.
reptile7
- posted by A. Peak @ 3:15 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)