 | ||
|
| ||
| ||
|
| ||
Michael Wallent
Lead Program Manager, DHTML
Microsoft Corporation
April 6, 1998
The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "DHTML Dude" column. Before reading the DHTML Dude column, you need Internet Explorer 4.0 
.
First I'd like to thank everyone who participated in last month's chat with the DHTML Dude (that's me!). It was great to see so many people building really interesting applications with Dynamic HTML.
If you missed it, stay tuned here for the time and location of my next chat (probably in a month or two).
This month, I'm going to be random: not just one topic for you to peruse, but four.
Tables have become ubiquitous on the Web. Everything is a table. Did you know that you can modify tables with DHTML as well? The caveat is that the normal method of using properties, such as innerHTML or innerText, does not work on <TABLE> or <TR>. Even the insertAdjacentHTML method doesn't work, To compensate, Internet Explorer 4.0 added methods to the <TABLE> and <TR> tags that give you total control over the content of tables.
Your script can manipulate the rows of a <TABLE> (or <THEAD>, <TFOOT>, <TBODY>), and manipulate the cells (<TD>) for each row. There is no object model provided to manipulate columns directly.
When a table row or table cell is inserted via the table object model, it will initially be empty. To fill a row, use the insertCell() method. To fill a cell, you can use the standard Dynamic Content methods, such as innerHTML, innerText, insertAdjacentHTML(), or insertAdjacentText().
Here is a listing of the relevant table object model methods and properties.
| object.rows(index) | Returns the rows collection for the table. |
| object.insertRow(index) | Returns the inserted <TR> (which will be empty), or null if the call fails. If index isn't supplied, then the <TR> will be inserted at the end. |
| object.deleteRow(index) | No return value. Index indicates the rowIndex of the row to delete. |
| object.cells(index) | Returns the cells collection for the row |
| object.rowIndex | Returns the rowIndex of the row. Useful for inserting and deleting rows. |
| object.insertCell(index) | Returns the inserted <TD> (which will be empty), or null if the call fails. If index isn't supplied, then the <TD> will be inserted at the end of the row. |
| object.deleteCell(index) | No return value. Index indicates the position in the collection of the cell to delete. |
In earlier DHTML Dude columns, I have discussed how to set cascading style sheets (CSS) properties on individual elements. By now, this is probably something you are sick of reading about. However, did you know that you can turn style sheets on and off? Did you know you can add rules to a style sheet as well?
The following sample shows how three totally different looks can be applied to the same content, all with style sheet toggling. View the sample.
<html>
<head>
<style id=Spooky>
body {font-family: verdana; color: white; background-color: black}
</style>
<style id=Silly disabled=true>
body {font-family: webdings; color: green; background-color: red}
</style>
<style id=Normal disabled=true>
body {font-family: courier; color: black; background-color: white}
</style>
</head>
<body>
<input type=button value="Spooky"
onclick="setSheet('Spooky')">
<input type=button value="Silly"
onclick="setSheet('Silly')">
<input type=button value="Normal"
onclick="setSheet('Normal')">
<script>
function setSheet(aName) {
var i, sheet;
for (i=0; i<document.styleSheets.length;i++) {
sheet = document.styleSheets[i];
sheet.disabled = (sheet.id != aName);
}
}
</script>
The list of style sheets for a page is exposed off document.styleSheets. In this example, I loop through the collection, only turning on the sheet that shares the name with the pressed button.
Using different style sheets can be a very effective way to change the look of your page, even when you have multiple CSS classes, ID rules, or default tag rules applied. This might be an easy way for you to build pages that support multiple platforms or resolutions.
Not only can your script enable and disable style sheets on the fly, but it can add new "rules" as well. In the example above, this line is a rule:
body {font-family: courier; color: black;
background-color: white}
So is this:
.myClass {color: red; font-weight: bold}
The following sample is a rudimentary style sheet "editor" that allows you to enter new style sheet rules at will. View the sample.
<html>
<head>
<style id=Edited>
body {font-family: verdana}
h1 {color: red}
p {border-style: solid; border-color: black; border-width: 2}
</style>
</head>
<body>
<script>
function addRule() {
var i, sheet;
sheet = document.styleSheets[0];
sheet.addRule(NewRule.value, NewRuleContent.value);
}
</script>
In the end, this code is pretty simple. The only method of substance is the sheet.addRule(..) call, and it simply passes in whatever is typed into the entry fields. The first parameter to the addRule method is the rule name. It could be a class, such as .myClass, that can be set on an element via the class property. It could be a tag rule, such as <P> or <DIV>, that causes all elements with the specified tag to inherit the styles you set. It could also be an ID rule, such as #SOMEID, where an element on the page has an ID of SOMEID. The second parameter is the actual set of styles that the rule is going to apply. An example would be "font-size: 20; font-family: verdana."
You are now the Style Master. You can edit style sheets on the fly, and turn them on and off.
Ah, the mouseover effect. Truly, the eye candy of choice for many DHTML pages. "But the mouseover is too hard," you say. "I need to trap onmouseover and onmouseout; I'm in a tizzy."
But wait, there is another way. Hold your tizzy, at least if you want mouseover effects on anchors.
There is a special "pseudoclass" created on anchor elements called "hover". The styles specified in a "hover" pseudoclass are applied when the mouse is over the anchor. When the mouse moves back off the anchor, the styles from the "Normal" pseudoclass are applied again.
Let's see how this works: View the sample.
<html>
<head>
<style>
A {font-family: verdana; font-weight: normal; color: blue}
A:hover {font-weight: bold; color: red}
A:active {font-weight: bold; color: red;
background-color: darkgray}
A:visited {font-weight: bold; color: gray;
background-color: darkgray}
</style>
</head>
<body>
<a href="http://www.microsoft.com">Hover Over
Me</a>
<a href="http://www.microsoft.com">Now Hover Over
Me</a>
<a href="http://www.microsoft.com">Me Too</a>
</body>
</html>
Getting pseudoclasses to work is done entirely in the style sheet. Notice how I used the pseudoclass by referring to TAGNAME:PSEUDOCLASS. In this case, the tag name was "A," and I wanted to set up pseudoclasses for "hover," "active," and "visited." Hover is self-explanatory - when a mouse is over the anchor, it expresses the hover pseudoclass. The active pseudoclass is expressed when an anchor has the focus. The visited pseudoclass is expressed whenever a user has visited the target of the link before.
No scripting required. No tizzy needed.
Everyone has probably seen the "ToolTip" on an image or image map before. Did you know you can put them on any element as well? And you can also do some rudimentary formatting?
Move your mouse over the following page: View the sample.
<html> <body style="font-family: verdana"> <h2 title="I'm the heading">Welcome to ToolTip World</h2> <p title="I'm a paragraph"> Dynamic HTML is a set of innovative features in Microsoft® Internet Explorer 4.0. By enabling authors to dynamically change the rendering and content of a document, Dynamic HTML gives authors the ability to create visually outstanding HTML documents that interact with the user without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects. </p> <img title="I'm the Internet Explorer Logo
 I need two lines 'cuz I'm so big" src="ie.gif"> </body> </html>
All you need to do is put a TITLE attribute on an element, and, when the mouse is over that element, a TooTip will pop up with the text you specify.. To get a ToolTip to line break, insert a Carriage Return or Line Feed entity (
 or 
). It's that simple. Script can also read and write the title property - so you can have DHTML ToolTips!
One interesting use of ToolTips I have seen is for a glossary. You have a large document that has lots of complex words in it. Put an <I> tag around those complex words, and set the title property. Instant glossary.
I hope you enjoyed these random thoughts. I'll be back next month with somewhat less random, but equally cool, stuff to make your pages shine.
Michael Wallent is Microsoft's lead program manager for DHTML.
For a comprehensive guide to information on DHTML, from introductory overviews to advanced how-to's, consult the Dynamic HTML pages in the MSDN Online Web Workshop.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top