< Main, slides version for more script demonstrations and/or for magnifications over 200%.]

Introduction to DOM, by Dr Sam

Straight-Text Version

< Page 1 : Page 2

Full Contents

Page 2 Text

Methods, continued

[Page Top]

Coordination of Standards, continued

Add a Timer

We might want to have the note closed automatically with a timer. A separate function would not be not needed:

<script type="text/javascript">
function showOurExample()
{
document.getElementById("ourExample").style.display="block";
setTimeout("document.getElementById('ourExample').style.display='none';",2000);
}
</script>

The timer runs in milliseconds. It has been set for two seconds, because you have already read the content of the hidden element. In real life, this would be too swift. (We must be cautious before setting any text to disappear on a timer, because people read at different speeds.)

Let's see the timer at work next . . .

(4) The Page Display

This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.

The event handler will activate the script function. The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless.

Our function includes a window object now, which we may refer to as BOM (the term has been explained in our Introduction's section about DOM and BOM):

window.setTimeout("script code",milliseconds);

The timer is proper to the browser. The "BOM" of the major browsers today should fit with the standards as these standards are working together, in mesh ~ ECMA script (javascript standardized) with DOM with CSS with XML/XHTML/HTML.

Syntax

Our DOM code has become a parameter in the BOM timer:

setTimeout("script code",milliseconds);
setTimeout("document.getElementById('ourExample').style.display='none';",2000);
Position the Element

We could play with the position of our hidden element.

Because DOM is able to call any element from anywhere in a document, we could put our hidden text almost anywhere.

We could enclose our hidden element inside our main text, as follows for instance:

Portion of the Page Source
<div><a href="javascript:void(0);" onclick="showOurExample(); return false"> The event handler will activate the script function.</a> <div id="ourExample"> This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM. </div> The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless. </div>

Yes, when our hidden element is displayed, it should appear inside our main text now. The timer has been set for four seconds for you to see this, next . . .

(5) The Page Display
The event handler will activate the script function.
This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.
The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless.

We could insert our hidden element inside almost any other element as long as the nesting is proper.

We've chosen to nest it as a div within another div, as already shown in the portion of the source, above. Here is that portion of the source again:

Notice the nesting of the divs
<div><a href="javascript:void(0);" onclick="showOurExample(); return false"> The event handler will activate the script function.</a><div id="ourExample">This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.</div>The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless.</div>
Add More Styles

We could play further with the CSS:

<style type="text/css">
#ourExample
{
display:none;
background-color:#ffffcc; color:#000000;
margin:solid thin #000000; padding:.5em;
left:20%
position:absolute;
z-index:1;
}
</style>
position: absolute

The element's position will be fixed (absolutely) in the document object according to the element's own top and left styles. For instance, we can write an element into the bottom of the document body while we set the element's top and left styles so that it should appear at the top or in the middle or somewhere else, depending on the styles, when the document is displayed on screen.

z-index

The z-index arranges the display, so that an element that is positioned absolute with a higher z-index should appear over, on top of, an element with a lower z-index. Z-index 2 should appear over z-index-1. Z-index 3 should appear over 2, etc.

These additional styles should make our hidden element appear to float when it appears. Let's see . . .

(6) The Page Display
The event handler will activate the script function.
This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.
The styles in our DOM will replace those in our CSS. Because DOM and CSS have been developed to work together, their styles mesh. So, the replacement should be seamless.

Yesterday, that could only have been achieved through long, convoluted scripting for cross-browser compatibility. Today, this can be achieved across the recent browsers with just a few dashes of CSS and a couple of lines of script. smile

<script type="text/javascript">
function showSomething()
{
document.getElementById("elementId").style.display="block";
setTimeout("document.getElementById('elementId').style.display='none';",4000);
}
</script>

All of this is elementary DOM. Imagine the possibilities!

Imagine the possibilities!

Imagine the flexibility and creativity even with this elementary DOM. Imagine the possibilities with images if you happen to be a graphic designer.

My own interest is with text. In this page, I am using nothing more than the methods that have been taught through this lesson. The exercise here is to indicate (merely to indicate) the possibilities at hand. Much can be done with these methods alone. They are available for you already. Yes, they are.

~ And ~

[Page Top]

Compatibility and Accessibility

These methods descend gracefully.

Yes, these methods descend gracefully ~ or they ought to ~ for compatibility and accessibility. They can. This is part of the beauty of DOM and of the coordination of the standards.

Let's finish our lesson very quickly by using our example to glimpse these possibilities.

Compatibility: Jump over the DOM
function showOurExample()
{
if ( document.documentElement )
{
document.getElementById("ourExample").style.display="block";
return;
}
else
{
alert("same message here as in our DOM handled element.");
}
}
Accessibility: Everything for Everybody
Noscript Content?

Is noscript content necessary in our example?

Speaking-browsers and text-only browsers usually do not process CSS (or javascript). A browser that does not process CSS will not hide our element. So, the text in our hidden element should appear for them.

Oh, oh ~ what about a visitor who might have CSS enabled but javascript disabled? The text would then be hidden by the CSS. It would not become visible through the script. It would be unavailable.

Hmmmmm, what we should do about that? Are you interested in a possible solution?

| Yes, please. Tell me more. |

| No, thanks. Skip forward. |

An All-Around Solution

Remember: The same authority that is developing the standards for DOM is also developing the standards for the WAI (Web Accessibility Initiative). This is the W3C . So, through the coordination of standards, it is possible for us to make our material available for everyone at the very same time in the very same page.

[Page Top]

Conclusion

Always More to Discover

Well, there is always something more to learn. There are plenty of possibilities for us to discover. Just imagine the possibilities.

More at this Threshold

We are just at the threshold. Much is already possible for us even now. More will become available for us as we advance.

[Page Top]

Resources

[Page Top]

Copyright

© Copyright S.A. Mousalimas 2003. All Rights Reserved.

"Introduction to DOM, by Dr Sam"

Published by OxfordU.net.

[Page Top]
End

Straight-text version: < Page 1 : Page 2 |

Introduction to DOM, by Dr Sam
copyright |  contact
published by OxfordU.net

Web-Design Tutorials by Dr Sam

Top of this Page