Implementing DHTML in WebExpress

 

 Animate script: (for demo click here)

Currently in WebX:

To make this easier in WebX:

To add the animate script:

Paste in the 'detect.js' script.

Insert>Script>Extensions

Name: src
Value: animate.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 'animate.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: animate ('test', 's', '10', '10');
Name: onmouseout 
Value: animate ('test', 'n; '10', '10');

The format is ('name', 'dir', 'dist', 'times')
dir is either "n", "s", "e", or "w"
dist is the number of pixels to move
times is the number of times to move
You can set the speed and framerate by changing the dist and times accordingly.

Any DIV tags with ID's set should be recorded in a list which you can choose from later in the 'animate' 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?) 

The script now works in both browsers.  

var timer = 0;
function animate(name,dir,dist,times)
// move element, -name-, in -dir- direction by -dist- amount -times- number of moves
{ 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);
   dir2=dir;
   name2=name;
   dist2=dist;
   times2=times-1;
   if (times2<0) { return;}
  setTimeout ('animate(name2,dir2,dist2, times2)', 1);
  setTimeout ('animate(name2,dir2,dist2, times2)', 1);
  }

 

>>