DHTML example

  • This is a Version 4 script.
  • The changing of text colour is not supported by Netscape 4 and Omniweb.
  • Escape doesn't support the changing of text colour and the visibility change.
  • The changing of text colour is the only bit of this script supported by iCab.
  •  

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

    Example

    Test Text

    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.

     

    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 changing of text colour is not supported by Netscape 4.
  • 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.

    Home