DHTML Lab: Cross-Browser Visibility Transitions; Transition 23 (Random) | WebReference

DHTML Lab: Cross-Browser Visibility Transitions; Transition 23 (Random)


Cross-Browser Visibility Transitions
transition 23: random

IE4 behavior:
  as described
NS4 behavior:
Boldsame as IE4
BItalicsimilar to IE4
Italicother trans substituted
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across10
Checkerboard down11
Random dissolve12
Split vertical in13
Split vertical out14
Split horizontal in15
Split horizontal out16
Strips left down17
Strips left up18
Strips right down19
Strips right up20
Random bars horizontal21
Random bars vertical22

Transition 23 is not a transition, per se, but a call to our script to select any of the other transitions and execute it. We, therefore, immediately pass control to function twentythree() which will select a random transition.

The single argument passed to twentythree() is dur, which was originally passed to doTransNS(). It must be explicitely passed, since it originates as an argument and not as a declared variable. We do not want to use the setInterval() method, as no transition is called for yet, so we return from doTransNS().

case 23:


In our Jigsaw Puzzle columns, we used getRandNums(), a function that returns a random number between two numbers passed as arguments. Function twentythree(), therefore, calls getRandNums() requesting a random number between 0 and 22. The result is assigned to newTrans. We then call doTransNS(), again, this time with an executable transition.

function twentythree(dur){
    newTrans = getRandNums(0,22);
function getRandNums(from,to){
  temp = parseInt((Math.random() * (to-from)) + (from));
  while (isNaN(temp)) {
    temp = parseInt((Math.random() * (to - from)) + (from));
  for (i=0; i<arHidden.length; i++) {
    if (temp == arHidden[i]) {
      temp = parseInt((Math.random() * (to - from)) + (from));
      while (isNaN(temp)) {
        temp = parseInt((Math.random() * (to - from)) + (from));
  return temp

Note: Several of our transitions are used to show hidden elements. We assigned them to the arHidden array. Our random number generator will compare any number generated to the elements of arHidden. If a match is found, it regenerates a random number. It will only return a number that corresponds to a visible-to-hidden transition. Hidden-to-visible transitions are excluded from the random selection.

That's it. Let's wrap up.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Apr. 28, 1998
Revised: Apr. 28, 1998

URL: http://www.webreference.com/dhtml/column19/transRandom.html