In the last article we discussed a method for creating a modular Javascript toolbox. Having this ability is a great boon for rapid development, but does little in the way of being very useful on its own–so this week we’ll move on to one of the most common uses for Javascript since its debut: modifying the appearance of your website!
Thanks to standards developed by the W3C, as well as concepts based in SGML, each page has a document heirerarchy associated with it. We call this the DOM, (Document Object Model), and it is very useful for creating DHTML (Dynamic HTML) pages when used in conjunction with CSS and Javascript. There are books that cover the concept of the DOM by itself so it is slightly outside of the scope of this article, however we can use it to create our own dynamic pages.
Let’s start by creating some generic CSS classes that will allow us to manipulate the page via JavaScript.
[CODE]Note that while I have separated these classes based on their demonstration function (background color, text color, size, position) you could modify ANY attribute of the CSS as long as it is declared specifically in the CSS file. Note that if you do not declare a style for a class or tag, some JavaScript implementations will refuse to modify them; this can be a hassle in debugging.
dynamic_style.css
/*
Any styles applied here will affect the BODY tag
in your page, a good place to put background-color
or background-image definitions instead of the HTML
code, to better separate layout from content!
*/
body{
background-color: #FFFFFF;
}
.dBackgroundBox{
background-color: #FFFFFF;
}
.dColorBox{
color: #000000;
}
.dSizeBox{
width: 400px;
height: 600px;
}
.dPositionBox{
position: absolute;
left: 15px;
top: 15px;
}
[/CODE]
Now let’s create a JavaScript file that we can use to modify these display elements:
[CODE]And now to see them in action (remember to properly include the file from the last article!):
dynamic_display.js
function ModifyBGColor(id, newColor)
{
var mElement = document.getElementById(id);
mElement.style.backgroundColor = newColor;
}
function ModifyTextColor(id, newColor)
{
var mElement = document.getElementById(id);
mElement.style.color = newColor;
}
function ModifyBoxSize(id, newWidth, newHeight)
{
var mElement = document.getElementById(id);
mElement.style.width = newWidth;
mElement.style.height = newheight;
}
function ModifyBoxPosition(id, newLeft, newTop)
{
var mElement = document.getElementById(id);
mElement.style.left = newLeft;
mElement.style.top = newTop;
}
[/CODE]
[CODE]Please note:
ourTestPage.html
<HTML>
<HEAD>
<TITLE>Our Display Test</TITLE>
<script src=”modules_control.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>
AddModule(“dynamic_display.js”);
</script>
</HEAD>
<BODY>
<div class=”dBackgroundBox” id=”bgModBox”>
<p><a onclick=”ModifyBGColor(‘bgModBox’,’#FF0000′);”>Click here to modify the background color!</a></p>
</div>
<div class=”dColorBox” id=”cModBox”>
<p><a onclick=”ModifyTextColor(‘cModBox’,’#00FF00′);”>Click here to modify the text color!</a></p>
</div>
<div class=”dSizeBox” id=”szModBox”>
<p><a onclick=”ModifyBoxSize(‘szModBox’,’900px’, ‘100px’);”>Click here to modify the box size!</a></p>
</div>
<div class=”dPositionBox” id=”pModBox”>
<p><a onclick=”ModifyBoxPosition(‘pModBox’,’100px’, ‘100px’);”>Click here to modify the box position!</a></p>
</div>
</BODY>
</HTML>
[/CODE]
- The quotations marks are singular, not double, in the onclick references!
- The size and position parameters are strings followed by either “px” or “%”, such as “10%” or “100px”, just as in the CSS declarations!
- Elements can be associated with more than one type of class and custom classes can be created with other styles declared; as long as the style is declared you can manipulate them with these functions and the ID of the element!
Now we have working dynamic display code that we can use to change the appearance of our web sites on the fly, letting your visitors use their own preferences!
