Uncle Jim's Web Designs

Dynamic HTML FAQ Page

Listed below are some of the most commonly asked questions pertaining to DHTML.
Simply click on the question to see the answer display below.

Expand all | Collapse all

1) What is DHTML?

DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable once the page has loaded, such as text, page styles (font color, size etc), element position, etc, can now all be changed dynamically, thanks to DHTML. It brings your web pages one step closer to how things look inside your television, where images appear and disappear, text flies in and out, and content move around freely inside the screen.

2) What is DHTML script?

DHTML scripts are scripts that take advantage of the DHTML technology to bring true interactivity to your site. They can be written in a number of languages, although the most popular are JavaScript and VBscript. All scripts here at Uncle Jims are written in JavaScript1.2+

3) How does DHTML script differ from JavaScript?

Think of DHTML script as an advanced form of JavaScript. While both are written using the JavaScript language, DHTML scripts utilize and access the DHTML features of your 4+ generation browser, while JavaScript does not.

4) How does your site differ from other JavaScript code libraries?

Most sites primarily deal with one type of scripting, be it Javascript, CSS, PHP, HTML, etc.

Uncle Jim's Web Designs understands that websites are developed using not one, but a majority of these. Our mission is to supply you with ALL of the information you need to develop and enhance your website, using the latest scripting technologies available. This site doesn't just offer DHTML examples and tutorials, but teaches you how to construct proper Cascading Style sheets, consistent HTML pages and Javascript, all of which lead you to a better understanding of DHTML.

5) Which browsers support DHTML, and how will non-supporting browsers handle DHTML?

Netscape 4+ and Internet Explorer 4+ both support DHTML, although to different extents. IE 4 is more complete in it's support of DHTML, so you will find many more scripts here for IE 4+. Regardless of which browser the scripts are written for, all of them are designed to be as compatible as possible to all browsers, including FireFox 1+ and Opera. Having said that, you should always test a script on multiple browsers to ensure that it degrades well with all of them.

6) Can I link back to your website examples and tutorials?

Absolutely! In fact, a simple link back to us is the most important thing you as the visitor can do for us. While many sites require that its visitors link back if scripts are used, we never require people to do so. If you feel we have helped you or your website in a positive way, then please link back to us from your site. We would greatly appreciate it.

7) Can I submit a script to Uncle Jim's Web Designs?

Yes. We know that some of the best DHTML scripts are written by others and look forward to seeing what else is available.

8) How do I access constants of a DOM interface with JavaScript?

W3C DOM LEVEL 1 (and 2 too) specifies some constants for interfaces for example, the "Node" interface defines the following constants:
  const unsigned short      ELEMENT_NODE                   = 1;
  const unsigned short      ATTRIBUTE_NODE                 = 2;
  const unsigned short      TEXT_NODE                      = 3;
  const unsigned short      CDATA_SECTION_NODE             = 4;
  const unsigned short      ENTITY_REFERENCE_NODE          = 5;
  const unsigned short      ENTITY_NODE                    = 6;
  const unsigned short      PROCESSING_INSTRUCTION_NODE    = 7;
  const unsigned short      COMMENT_NODE                   = 8;
  const unsigned short      DOCUMENT_NODE                  = 9;
  const unsigned short      DOCUMENT_TYPE_NODE             = 10;
  const unsigned short      DOCUMENT_FRAGMENT_NODE         = 11;
  const unsigned short      NOTATION_NODE                  = 12;
These are scriptable in NN6 as static properties of the Node object e.g.
  Node.ELEMENT_NODE
  Node.ATTRIBUTE_NODE
Unfortunately, IE5 does not expose the Node object or its static properties. With IE5, you are forced to hard code the constants' values.
In DOM-compliant browsers (IE5/NN6), you can retrieve (but not set) the type of the given node in the following notation: 
iType = oNode.nodeType
where iType specifies an integer (as shown in the above table) indicating the nodeType of the requested node, which also determines the valid values for the node, and whether the node can have child nodes. The property is read-only.

9) How do I read the META elements?

Only IE4/5 and NN6 with full DOM access allow to read META elements. IE4/5 use document.all.tags('META') NN6 (and IE5)
  document.getElementsByTagName('META')
Here is a link to a complete example reading the <META NAME="keywords" ...> elements' content values into an array:

Demo: Reading META tag keywords.

For browsers not supporting the META element access an empty array is returned.

10) How do I find all TABLEs in a document?

Only IE4+ and NN6 trough their full DOM implementation allow that.
For IE4+: var allTables = document.all.tags('TABLE');
For NN6 (and IE5): var allTables = document.getElementsByTagName('TABLE');
So for crossbrowser code you would execute the following:
  var allTables = document.all ?
    document.all.tags('TABLE') :
    document.getElementsByTagName ? 
    document.getElementsByTagName('TABLE') : new Array();
Then you can loop through allTables. If you just want to access a particular table, then give it an ID attribute like below:
<TABLE ID="aTable">
and then the below script:
  var table = document.all ? document.all['aTable'] :
    document.getElementById ?
    document.getElementById('aTable') : null;
  if (table)
    // script table for instance loop through table.rows


11) How do I dynamically add elements to a FORM?

DOM level 1 supported by NN6 and IE5 allows to dynamically create form elements and add them to a FORM. addField, which allows to add a field passing the form, the field type, the field name and the field value and a second function, removeField, which allows to remove a field passing a form and a field name.
Two example forms are given, one that allows addition of different types of fields, the second binding hidden field addition and removal to some checkbox and radio button click events.

Demo: Dynamically add elements to forms.

NN4 will not allow dynamic addition or removal of form fields unless you keep the whole form as a js data structure which you dynamically write to a layer. IE4 allows the insertion of unparsed html but is rather weak in removing elements. I might add an IE4 example later.

12) : How can I read the styles of an ID selector rule?

Suppose you have an ID selector css style rule as in the below example:
<STYLE>
  #elementID {
    property-name: propertyValue;
  } 
</STYLE>
Then with NN4 you can read document.ids['elementID'].propertyName while with IE4+ and NN6 you have to search through document.styleSheets and the rules to find the matching selector and access the style info.
The following link contains two convenience functions, getIDedStyle and getIDedStyleProperty, which encapsulate the different code for NN4, NN6 and IE4+ to access the complete style object respectively a single style property.

Demo: Reading styles of an ID selector rule.



13) How can I read the styles of a style class?
Suppose you define the below style class:
<STYLE>
  .styleClass {
    property-name: propertyValue;
  }
</STYLE>
Then with NN4, you can read document.classes['styleClass'].all while with NN6 and IE4+ you have to loop through document.styleSheets to find the matching style rule.
The following link contains two convenience functions, getStyleClass and getStyleClassProperty, which encapsulate the different code for NN4, NN6 and IE4+ to access the complete style class respectively a single property of the style class:

Demo: Reading CLASS styles.



14) What is the standard method of referencing an element object in the DOM?

The DOM specification includes getElementById() and getElementsByTagName() methods for general access to all elements in the document tree.

While both IE (since 4.0) and NN (since 6.0) comply with most of the standard interface specified in the DOM, these and other versions of both browsers used their own proprietory object models prior to standardization of the DOM. It becomes imperative then, to understand how to work around the differences, to create scripts that will work across most browsers.

Internet Explorer 4.0 and later:
IE4+ provide scripting access to all HTML page elements in the following, essentially equivalent, ways
·  Using an element's id: elementId.propertyName
·  Using the document.all collection, and referring to the object either via the element's index, name, or id, as in the below examples:
For example, the code below can be used in IE to display in an alert box containing the names of all tags on a page:
<script language="JavaScript">
<!--
var htmltags = "";
for (i=0; i < document.all.length; i++) {
htmltags += document.all[i].tagName + "\n";
}
alert(htmltags);
//-->
</script>
 In addition, IE4+ provides scripting access to the standard set of element collections specified in DOM Levels 1 and 2, along with IE's proprietory collections. In the same manner, the elements are accessible by ordinal index, name or id, as below: 
  form.elements[0]
  window.frames['frameName']
  document.styleSheets['styleSheetId']
Internet Explorer 5.0 and later:
Aside from supporting all of the above, IE5+ also provide access to elements using the standard DOM2 methods getElementById() and getElementsByTagName().

Netscape Navigator 4.0:
NN4 and below provide access only to page elements positioned with CSS Positioning attributes, and content bound by Netscape's proprietory LAYER tag, in the following, essentially equivalent, ways:

In addition, NN4 provides scripting access to the standard set of collections specified in DOM Level 1, along with Netscape's proprietory collections, and in the same manner accessible by index, name, or id.
Netscape Navigator 6.0
NS6 provides scripting access to all elements similar to IE5, using the standard DOM2 methods getElementById() and getElementsByTagName().


15) How can I insert a character entity like   into a document from Javascript ?

If you want to insert a non-breaking space you can insert it using the charactor code like below:
var nbsp = document.createTextNode( "\u00A0" );		
referenceToWhereYouWantIt.appendChild( nbsp );


16) How can I convert 'em' to 'px'?

First, you need to retrieve the font-size of the body by one of three availablemethods:
1. fz = document.body.fontSize;
or (if not available)
2. you should use getComputedStyle (Mozilla)
or
3. getCurrentStyle (MSIE) is the font-size given in pt, you can calculate the font-size in px by fspx = 1.3333*fspt;. For instance, a font-size specified with font-size:10pt; will lead to a font-size of 13.3333px.
A font-size, specified with font-size:2.5em; is leading to a font-size, which is 2.5 times that of the bodies font-size.
Lets say you specified the font-size of a div to 1.5 em. You can calculate its pixel-value by one of two methods:
fsdivpx = 1.3333*fsbodypt*fsdivem or fsdivpx = fsbodypx*fsdivem

In both cases, the result is 20px

17) How can I add sub-sections to a collapsable menu?

The following link demonstrates how to start with a static HTML document that works in browsers where scripting is disabled or not supported and where script is used to enhance the use of the document by allowing to collapse/expand sections of the document. All you need to do is structure your document with <h1> elements, then the script adds the necessary structure and links to collapse/expand sections as needed in browsers (like Netscape 6/7, Mozilla, FireFox, IE 5/5.5/6, Opera 7) that support the W3C DOM to dynmically change the structure of the document:

Demo: Adding sub-sections to collapse menus.



18) How can I expand acronyms or abbreviations when they are clicked?

In HTML 4 (and XHTML 1.0 and 1.1) you have the elements <abbr> and <acronym> to properly mark up abbreviations and acronyms where the expansion of the abbreviation or acronym should go into the title attribute which the browser should then show as a tooltip.

In addition, you can use W3C DOM scripting to insert the expansion directly into the document when the element is clicked.

The following link demonstrates how to do that by allowing you to insert the expansion in browsers like IE 5 and later, Netscape 6/7, Mozilla, Firefox, Opera 7 which support the W3C DOM. Note that IE on Windows. IE 6 does not recognize the HTML element <abbr>, thus with IE the expansion works only for <acronym> elements.

Demo: Expand acronyms and abbreviations.



19) Will you be adding more FAQs to this page?

Yes. As we receive additional questions pertaining to DHTML, CSS-P and Javascript, we will be adding them to our database(s) and including them here when time permits.



Send Us Your Comments
|  BACK TO THE TUTORIALS  |