passing values from parent window to child window dynamically

[TurboRogue]

So here's the basic premise:

I have an html page with a bunch of pictures (pic.html). All of the images are thumbnails of larger photos. I also have another html page which is a pop-up window essentially (popup.html) (it's a standard html page that I've set to a smaller width/height by using javascript). The popup.html page has 2 divs in it, one with the area that I'm trying to populate dynamically with the full size image of the link that the user clicked on, and the other with the selfClose button in it. The effect I'm going for is when the user clicks the link on a thumbnail, the popup should pop-up and have the top div populate with the larger image, and then when the user hits the close button, and then hits the next thumbnail link, the same popup.html window pops-up with the new 2nd larger image in that first div. Hopefully that makes sense...

So here's my code. Mind you that I've tried various iterations of this, so there's been a lot of trial and error...


pic.html relevant code (just 2 examples used of like 150 pics):

[HTML]<p><a href="images/pics/pic125.jpg" rel="external" onclick="popupwin();"><img src="images/pics/pic125tn.jpg" alt="pic125" width="100" height="125" /></a><br />
Caption Text</p>

<p><a href="images/pics/pic126.jpg" rel="external" onclick="popupwin();"><img src="images/pic/pic126tn.jpg" alt="pic126" width="100" height="125" /></a><br />
Caption Text</p>[/HTML]
popup.html relevant code:
[HTML]<div id="picarea" style="width:600px; height:550px;"></div>
<div id="closebutton" style="width:600px; height:25px; padding-top:10px; text-align:center;"><input type="button" value="Close Window" style="padding:2px; font-size:14px; text-transform:uppercase; font-weight:bold;" onclick="self.close();" /></div>[/HTML]
javascript:

function popupwin() {
var popone = document.getElementsByTagName("a");
for (var i=0; i<popone.length; i++) {
var picpop = popone[i];
if (picpop.getAttribute("rel") == "external")
window.open('popup.html','foo','height=560,width=600,scrollbars=1,resizable=1,toolbar=1,location=1,s tatus=1');
}
}
 

My javascript skills are moderate, so I'm hoping this is just an easy javascript fix that I'm not aware of. Also, I'm trying to be "good" about my code, so I'm going for xhtml strcit validity. Let me know if any of this is unclear, and thanks for any help anyone can offer.

[acoder]

Welcome to TSDN!

When you create the child window, you should keep a reference to it:

var popup = window.open(...);

Then you can access the div with popup.document.getElementById("picarea").

It would be better if you kept the window open and re-used it each time, but if that's not suitable, you'll have to wait until the window has fully loaded before you can access its elements. You will need to create an image either using DOM methods or just use a string and set the div's innerHTML.

You need to identify which link has been clicked. You can either pass "this" to the function or use the event properties.

[TurboRogue]

Thanks acoder:)

Any chance you could give me a code sample of what you have in mind?

[acoder]

Sure, here's some example code:

In pic.html:
[HTML]<p><a href="images/pics/pic125.jpg" rel="external" onclick="popupwin(this);"><img src="images/pics/pic125tn.jpg" alt="pic125" width="100" height="125" /></a><br />
Caption Text</p>[/HTML]
In popup.html:
[HTML]<div id="picarea" style="width:600px; height:550px;"><img id="image" src="images/pics/pic125.jpg"></div>[/HTML]
and the javascript:

var popup = null;
function popupwin(link) {
  if (popup == null || popup.closed) {
    popup = window.open('popup.html','foo', 'height=560,width=600,scrollbars=1,resizable=1,toolbar=1,location=1,status=1');
    // you may want to open to the image by passing the image in the URL
  } else {
      popup.document.getElementById("image").src = link.href;
  }
}

[TurboRogue]

That would work for one specific image, but I'm trying to make it dynamically tie into the photo that the user has clicked on.

I've been playing with it a bit further, and I think I've gotten a little farther, but i'm still not able to pass the variable correctly. Here's what I have so far:

pics.html:

[HTML]<p><a href="images/pics/pic125.jpg" rel="external" onclick="popupwin(this);">
<img src="images/pics/pic125tn.jpg" alt="caption" width="100" height="125" /></a><br />
Caption</p>

<p><a href="images/pics/pic126.jpg" rel="external" onclick="popupwin(this);">
<img src="images/pics/pic126tn.jpg" alt="caption" width="100" height="125" /></a><br />
Caption</p>
[/HTML]

popup.html: (I know the onload isn't xhtml strcit valid, but one step at a time)

[HTML]<body style="margin:0; padding:0;" onload="popu();">
<div id="picarea" style="width:600px; height:550px; background-color:pink;"></div>
<div id="closebutton" style="width:600px; height:25px; background-color:green; padding-top:10px; text-align:center;"><input type="button" value="Close Window" style="padding:2px; font-size:14px; text-transform:uppercase; font-weight:bold;" onclick="self.close();" /></div>
[/HTML]

javascript:

function popupwin(foo) {
window.open('popup.html',foo,'height=560,width=600,scrollbars=1,resizable=1,toolbar=1,location=1,status=1');
    var popone = document.getElementsByTagName("a");
    for (var i=0; i<popone.length; i++) {
        var picpop = popone[i];
        if (picpop.getAttribute("rel") == "external")
        popu();    
    }
}
 
 
function popu() {
window.document.getElementById("picarea").innerHTML = "<img alt='photo' src='" +foo+ "' />";
}

Please let me know if there are any further thoughts. More code samples would be greatly appreciated. Thanks.

[acoder]

'this' is the link that you're passing through, so foo is a link object. The second parameter to window.open should be a string.

In popup.html, you can call window.opener.popu() onload and keep the popu() function on the parent page.

I see that you want to open a new window each time. You still need to assign it to a variable so that you can access it:

var popup = null;
var currLink;
function popupwin(foo) {
  currLink = foo;
  popup = window.open('popup.html','foo', 'height=560,width=600,scrollbars=1,resizable=1,toolbar=1,location=1,status=1');
}
 
function popu() {
  popup.document.getElementById("picarea").innerHTML = "<img alt='photo' src='" +currLink.href+ "' />";
}