Passing a variable in the URL to turn on and off layers in another page

I have a series of five flowcharts in a tabbed layout, one flowchart per tab (seem to be doing tabs a lot lately). I wanted the user to be able to click a link on another page, and have the flowchart page open to the correct flowchart layer. A working example is here:

Switch layers on the next page by clicking a link

When I tried setting the value of a variable on the new page, it worked in some browsers but not others, probably because some computers are slower at loading pages than others, and the necessary layers would not be loaded in time for the variable to have something to populate.

I had a couple of functions in the first page something like:

 
<script language="JavaScript" type="text/JavaScript"> 
<!-- 
function openwindow() 
{ 
flowchart = window.open('http://www.med.umich.edu/i/mandatories/restraint/flowchart/index.htm','flowchart'); 
setTimeout('switchLayers',5000);
} 
function switchLayers(selectedLayer) 
{ 
flowchart.document.getElementById('Agitation').style.visibility = 'hidden'; 
flowchart.document.getElementById(selectedLayer).style.visibility = 'visible'; 

// return false; 
} 
--> 
</script> 

This worked on fast machines, but not on slow ones, and not at all on Netscape.

So instead I decided to put the parsing code in the receiving page, the flowchart page.

Here’s how I got this to work:

The links on the first page are of this form:

 
<a href="http://yourserver.com/flowchart.htm?agit" target="new">Click to go to Agitation  

<a href="http://yourserver.com/flowchart.htm?poor" target="new">Click to go to Poor Sitting Posture  

<a href="http://yourserver.com/flowchart.htm?wand" target="new">Click to go to Wandering  
Click to go to Unsafe Mobility  

<a href=http://yourserver.com/flowchart.htm?conf" target="new">Click to go to Confused Behavior  

This sends a 4 letter code to the target page in the URL.
I included a script at the head of the receiving page:

<script language="JavaScript" type="text/JavaScript">
<!--
function switchLayers(selectedLayer, deselectedLayer)
{ 
 document.getElementById(selectedLayer).style.visibility = 'visible';
 document.getElementById(deselectedLayer).style.visibility = 'hidden'; 
 return false;
}

function jumpToLayer()
{
query = window.location.search.substring(1,5);
 document.getElementById('Agitation').style.visibility = 'hidden'; 
  if (query=='agit') {
  document.getElementById('Agitation').style.visibility = 'visible';
  } 
 else if (query=='conf') {
  document.getElementById('ConfusedBehavior').style.visibility = 'visible';
  } 
 else if (query=='wand') {
  document.getElementById('Wandering').style.visibility = 'visible';
  } 
  else  if (query=='poor') {
  document.getElementById('PoorSittingPosture').style.visibility = 'visible';
  } 
 else  if (query=='unsa') {
  document.getElementById('UnsafeMobility').style.visibility = 'visible';
  }
else {
document.getElementById('Agitation').style.visibility = 'visible';
} 
}
-->
</script>

Then I included this script at the very end of the page “flowchart.htm” just before the body tag. I put it at the end to make sure the layers had all been parsed and loaded by the browser.

 
<script language="JavaScript" type="text/JavaScript">
<!--
jumpToLayer();
-->
</script>