Test 4

This test alters the javascript so that there is a short delay before the stylesheet switches. If you do nothing during the delay, then the same bug will appear. If, however, you change the focus away from the box during the delay, then the bug will not occur. You can change the focus either by clicking somewhere outside the box, or by pressing "tab" to switch the focus to the next link.

Explanation

All I've done is to add a timer function in the javascript to create a delay. This delay gives you the chance to "escape" from the box before it vanishes and "traps" you with it.

Pressing tab will move the focus to the next link on the page. Note how the faint black border moves from one link to the next.

Source files

Only the javascript has changed from test 2. This time, instead of calling "change()" directly, I call "startClock()". After a delay, "startClock()" calls "change()":

// This script disables/enables a stylesheet based
// 	on the number of the link tag

var linknum = document.getElementsByTagName('link');

function styleDisable() {  
  linknum[1].disabled = true;  // Disables change.css
}

function change() {   //Enables change.css:
  linknum[1].disabled = false;
}

//Timer functions to delay the switch

 var time = 200
 var running = true
 
function timer(){ 
  if (running) {
  time = time-1 
  setTimeout("timer()", 10) 
	 if(time==0){stopClock(); change();}
	//After timer runs out, enable change.css
  }
	
}
function stopClock() {
   if (running) {
      running=false;
	  time=200;
     }
}

function startClock() {
  running=true;
  timer();
}

Test 4: the bug in slow-motion **BUGGY**

Explanation

Source files

Test 4: the bug in slow-motion BUGGY