Implementing DHTML in WebExpress

 

 Move script: (for demo click here)

Currently in WebX:

To make this easier in WebX:

To add the changebgcolor script:

Paste in the 'detect.js' script.

Insert>Script>Extensions

Name: src
Value: move.js

Add the 'detect.js' script whenever you use a script which acts upon a named DIV element, or when changing width or height.

Import>Scripts>move should create the 'detect.js' script tag and 'move.js' script tag.

 

Create a DIV tag with an 'ID' set:
ID = "test"
Then create a paragraph of text inside the DIV which you'd like to move when a link is clicked or passed over.
Create a link
Hit the 'Extensions' button in the link dialog
Name: onmouseover
Value: move ('test', 's', '100');
Name: onmouseout 
Value: move ('test', 'n; '100');

The format is ('name', 'dir', 'dist')
dir is either "n", "s", "e", or "w"
dist is the number of pixels to move

Any DIV tags with ID's set should be recorded in a list which you can choose from later in the 'move' dialog.

If you use 'onclick' you will have to set the link to 'javascript: void(0);'

 

Rules/Problems with the 'animate.js' script:

The DIV ID's cannot be set automatically... (or can they?) 

 
function move(name,dir,dist)
// move element, -name-, in -dir- direction by -dist- amount
{ if (unable) return;
  if (dir == "n" || dir =="s")
 axis = '.top';
  if (dir == "n" && dist>0)
 dist = -dist;
  if (dir =="e" || dir == "w")
 axis = '.left';
  if (dir =="w" && dist>0)
 dist = -dist;
  if (DOM) now = eval (wholebit + axis);
  if (!DOM) now = eval (frontbit + name + endbit + axis);
 endpoint = parseInt(now) + parseInt(dist);
 if (endpoint<0)
  endpoint = 0;
 if (DOM) eval (wholebit + axis + '=' + endpoint);
 if (!DOM) eval (frontbit + name + endbit + axis + '=' + endpoint);
}

 

>>