Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Advanced
Jul 10, 2000

Dynamically Changing Content without DHTML

The DHTML capabilities (such as changing the text color/fonts/size dynamically) are very nice features to have, but unfortunately, they are not available on all browser applications. Essentially, DHTML features work only on the Internet Explorer Web browser. This example explains how to achieve dynamic features within a normal HTML document even on browsers like Netscape Navigator. The method explained here makes use of the 'innerHTML' property of the <div> objects in the Internet Explorer and the 'layer' objects in Netscape Compatible browsers.

The example below explains how to use the <layer> in conjunction with the <div> tags:

 
<form name="myForm">
<input type="button" value="Make me Red & Bold" 
onclick="changeFont();">
<div id="myLayer">
<layer name="myLayer">
I am a normal text
!</layer>
 </div>
</form>

The following JavaScript method is called on by clicking the form button (changing the contents could happen on any other event like onmousemove, onmouseout etc.).

 
<script language="JavaScript">
function changeFont() {
textTag="<font color=red><b>
I am Red & Bolder now!</b></font>";

if (document.all)
document.all.myLayer.innerHTML = textTag;
else if (document.layers) {
obj = document.layers["myLayer"].document.open();
	        obj.write(textTag);
	        obj.close();
	    }
	}
</script>

Here the Internet Explorer makes use of the <div> tags, whereas Netscape Navigator makes use of the 'layer' object to dynamically change its content. Using this method and a little bit of imagination, you can add some 'dynamism' to your Web pages on any browser.

Ajith Prasad
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap