setting a style in opened window - works in IE, not in NS

EllenM1

12-20-2004, 11:58 PM

Hi - I am trying to create a script that will open a new page (flowchart) and make some layers on it visible, and some layers hidden.

The exact layers to be turned on and off are specified in the link containing the onClick event. There are 5 layers on the newly opened page, including PoorSittingPosture and Agitation - and I just checked the spelling and case again to make sure it matches.

My problem is: this works fine in IE but not in anything else. I get this error:

Error: flowchart.document.getElementById(selectedLayer) has no properties
Source File: http://path.to.server/commandtest.htm#
Line: 17

Anyone have any ideas?

Thanks,

Ellen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<a href="#" onClick="openwindow(); switchLayers('PoorSittingPosture', 'Agitation')">Click to go to xxx </a>
</body>
</html>

glenngv

12-21-2004, 01:33 AM

You're calling switchLayers() and you're not sure that the popup page has loaded completely. So there is a big chance that you are referencing the layers that have not completely loaded, thus the error.
Can't you put the function in the popup itself then just pass the layers in the URL? The popup then retrieves the querystring then onload, call the switchLayers function.
Try this:

flowchart = window.open('http://path.to.server/index.htm?s='+selectedLayer+'&d='+deselectedLayer,'','flowchart');

EllenM1

12-21-2004, 03:43 AM

Thanks - I was sort of thinking it might be something like that - but had no idea what to do about it, except maybe put some kind of timed pause in there. I will give this a try in the morning!

EllenM1

01-03-2005, 08:09 PM

Here's how I got this to work:

The links used to get to the page "flowchart.htm" are of this form:

<a href="http://yourserver.com/flowchart.htm?agit" target="new">Click to go to Agitation </a> <br>
<a href="http://yourserver.com/flowchart.htm?poor" target="new">Click to go to Poor Sitting Posture </a> <br>
<a href="http://yourserver.com/flowchart.htm?wand" target="new">Click to go to Wandering </a> <br>
<a href="http://yourserver.com/flowchart.htm?unsa" target="new">Click to go to Unsafe Mobility </a> <br>
<a href=http://yourserver.com/flowchart.htm?conf" target="new">Click to go to Confused Behavior </a> <br>

This sends a 4 letter code to the target page in the URL.

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">

</script>

In the head section, I included this script which detects which 4 letter code is used (it could have been a 1 digit number but I wanted something that was mnemonically related to the layer) and compares it to a string then turns on whatever layer is associated with that code.

<script language="JavaScript" type="text/JavaScript">

function jumpToLayer()
{
query = window.location.search.substring(1,5);

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';
}

document.getElementById('Agitation').style.visibility = 'hidden';

}

-->
</script>

Of course each layer has an ID like "PoorSittingPosture" or "Agitation", etc.

A link to a working example of this is here:
Switch layers on the next page by clicking a link (http://thedesignspace.net/MT2archives/images/flowchart/)