DHTML example

On this page I explain a simple DHTML example script that features invisibility, moving and the changing of text colour.

Example

Make test text invisible.
Make test text visible.
Move test text 50 pixels down.
Move test text 50 pixels up.
Change colour to red.
Change colour to blue.
Change colour to black.
Change the font style to italic.
Change the font style to normal.
Change the font family to 'Times'.
Change the font family to 'Arial'.

The script

The scripts work on this HTML element:

<DIV ID="text">Test Text</DIV>

#text {position: absolute;
	top: 400px;
	left: 400px;
	font: 18px arial;
	font-weight: 700;
}

These scripts are necessary for the three effects:

var DHTML = (document.getElementById || document.all || document.layers);

function getObj(name)
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
	this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
	this.obj = document.all[name];
	this.style = document.all[name].style;
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
   	this.style = document.layers[name];
  }
}

function invi(flag)
{
	if (!DHTML) return;
	var x = new getObj('text');
	x.style.visibility = (flag) ? 'hidden' : 'visible'
}

var texttop = 400;

function move(amount)
{
	if (!DHTML) return;
	var x = new getObj('text');
	texttop += amount;
	x.style.top = texttop;
}


function changeCol(col)
{
	if (!DHTML) return;
	var x = new getObj('text');
	x.style.color = col;
}

Explanation

First of all we'll have to find out if the browser supports DHTML at all. To do this, see if it supports one of the advanced DOMs:

var DHTML = (document.getElementById || document.all || document.layers);

Secondly we add the DHTML micro-API.

Invisibility

Then the function for the visibility and invisibility. I send it a 1 when the text should become invisible, a 0 when it should become visible and store it in flag:

function invi(flag)
{

Check if the browser supports DHTML, if it doesn't we do return and end the function.

	if (!DHTML) return;

Then we get the correct object: the layer with ID="text", and put it in x:

	var x = new getObj('text');

If flag is 1 (true), set the visibility of the object to 'hidden', if it's 0 (false), set the visibility to 'visible'.

	x.style.visibility = (flag) ? 'hidden' : 'visible'
}

Moving

For moving the text around we need an extra variable to keep track of the currect position. This is because many browsers give the top property not value 400 but '400px'

I want to add the amount to the current top, but if we do 400px + 50 we get JavaScript errors. So I need a number for keeping track of the current top, not a string. This is the variable texttop. So we set it to the default value, 400:

var texttop = 400;

The function is called with the amount of pixels the text should move (move(-50), for instance). The amount is stored in amount:

function move(amount)
{

Check for DHTML, then get the correct object and put it in x:

	if (!DHTML) return;
	var x = new getObj('text');

Then we add amount to our extra variable texttop:

	texttop += amount;

and set the top property of the object to texttop (This is allowed, if you do x.top = 400 the browsers automatically change it to x.top = '400px'):

	x.style.top = texttop;
}

Colour change

The function is called with the colour the text should get, in HEX value (changeCol('#cc0000'), for instance). The colour is stored in col:

function changeCol(col)
{

Check for DHTML, then get the correct object and put it in x:

	if (!DHTML) return;
	var x = new getObj('text');

and change the color property of the object to the correct colour:

	x.style.color = col;
}

As said before, Netscape 4 does not support the changing of text colour, but it doesn't throw any errors either. So the changing of the property x.color is allowed, the browser just doesn't do anything about it.

Font style and font family

As to the changing of the font style and font family, it works in the same way. We change the fontStyle and fontFamily styles and it magically works. I don't explain the code since it works exactly the same as the colour change.

Home