PDA

Click to See Complete Forum and Search --> : Help with window.open()

AAKALAN
10-01-2006, 03:55 AM
I've put in a very long day getting this custom code to work - you click on a thumbnail and the script opens a new window, sizes it for the larger image, sets the SRC, width and height attributes for an img object.

This code works just fine across my LAN:

<SCRIPT LANGUAGE="JAVASCRIPT">
function bigImg(cImagePath, nWidth, nHeight, cFileName) {
nWHeight = nHeight+100;
nWWidth = nWidth+100;
nTop = window.screenTop-70;
nLeft = window.screenLeft+350;
cParams = "height= "+nWHeight+",width= "+nWWidth+",status=no,toolbar=no,menubar=no,location=no,top="+nTop+",left="+nLeft;
w = window.open("PicturePage.htm",null,cParams);
w.document.testImage.src = cImagePath;
w.document.testImage.height = nHeight;
w.document.testImage.width = nWidth;
w.document.title = 'Photo by: A. A. Katz: '+ cFileName+' ';
}
</SCRIPT>

Each thumbnail calls this function, passing its own relative URL and the image sizes.

<A HREF="javascript:bigImg('Fullsize/DSC_9281.jpg',640,430,'DSC_9281')">

The problem: This works perfectly on my machine across the LAN. Really beautiful, in fact, exactly what I want.

But it doesn't work over the Web.

1) I always get the window/page
2) Sometimes I get the image, too
3) But most of the time, I get the Javascript error:

testImage is null or not an object!

Only rarely, I get:

document is null or not an object!

Could it be that I'm losing the new window's object reference somehow?

Or perhaps some kind of timing thing (the rest of the code firing before the form is loaded? The form is about 6 lines of code. The operative line in the page that gets loaded in the new window is:

<img src="#" name="testImage" width="10" height="10" id="testImage">

I've been writing this kind of code (and tools to write it) since 1995. And I am completely and totall stumped. Someone please help. Just point me in a direction! I'm out of options.

You can see the page at http://www.aakatz.com/photo/cutler/homepage.htm

Thanks in advance[/SIZE]
ray326
10-01-2006, 05:28 PM
More likely you're not waiting until the page is loaded before accessing the content. You'd be better off using the DOM, too. Make that id="testImage" and use getElementById("testImage") to get a reference to it.
JUD
10-02-2006, 09:37 AM
I agree with ray. You need to include an onload function to set your image properties. Something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
// <![CDATA[
function bigImg(cImagePath, nWidth, nHeight, cFileName){
var nWHeight = nHeight + 100;
var nWWidth = nWidth + 100;
var nTop = window.screenTop - 70;
var nLeft = window.screenLeft + 350;
var cParams = "height= " + nWHeight + ",width= " + nWWidth + ",status=no,toolbar=no,menubar=no,location=no,top=" + nTop + ",left=" + nLeft;
var w = window.open("PicturePage.htm", null, cParams);
w.onload = function(){
w.document.getElementById("testImage").src = cImagePath;
w.document.getElementById("testImage").height = nHeight;
w.document.getElementById("testImage").width = nWidth;
w.document.title = 'Photo by: A. A. Katz: '+ cFileName;
}
}
// ]]>
</script>
</head>

<body>
<a href="javascript:bigImg('Fullsize/DSC_9281.jpg',640,430,'DSC_9281')">Click Here To See The Image</a>
</body>
</html>


and I'm guessing 'PicturePage.htm' looks similar to this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body{
margin:50px;
}
-->
</style>
</head>

<body>
<img src="" id="testImage" alt="" />
</body>
</html>
AAKALAN
10-02-2006, 11:42 AM
More likely you're not waiting until the page is loaded before accessing the content. You'd be better off using the DOM, too. Make that id="testImage" and use getElementById("testImage") to get a reference to it.

I tried that several times (that's why the ID="testImage") was put in the child HTML. Didn't help. I do think it's timing.

Thanks for the help.

AAK