By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,916 Members | 1,286 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,916 IT Pros & Developers. It's quick & easy.

passing values from parent window to child window dynamically

P: 3
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:
Expand|Select|Wrap|Line Numbers
  1. function popupwin() {
  2. var popone = document.getElementsByTagName("a");
  3. for (var i=0; i<popone.length; i++) {
  4. var picpop = popone[i];
  5. if (picpop.getAttribute("rel") == "external")
  6. window.open('popup.html','foo','height=560,width=600,scrollbars=1,resizable=1,toolbar=1,location=1,s tatus=1');
  7. }
  8. }
  9.  
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.
Feb 4 '08 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN!

When you create the child window, you should keep a reference to it:
Expand|Select|Wrap|Line Numbers
  1. 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.
Feb 4 '08 #2

P: 3
Thanks acoder:)

Any chance you could give me a code sample of what you have in mind?
Feb 4 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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:
Expand|Select|Wrap|Line Numbers
  1. var popup = null;
  2. function popupwin(link) {
  3.   if (popup == null || popup.closed) {
  4.     popup = window.open('popup.html','foo', 'height=560,width=600,scrollbars=1,resizable=1,toolbar=1,location=1,status=1');
  5.     // you may want to open to the image by passing the image in the URL
  6.   } else {
  7.       popup.document.getElementById("image").src = link.href;
  8.   }
  9. }
Feb 4 '08 #4

P: 3
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:

Expand|Select|Wrap|Line Numbers
  1. function popupwin(foo) {
  2. window.open('popup.html',foo,'height=560,width=600,scrollbars=1,resizable=1,toolbar=1,location=1,status=1');
  3.     var popone = document.getElementsByTagName("a");
  4.     for (var i=0; i<popone.length; i++) {
  5.         var picpop = popone[i];
  6.         if (picpop.getAttribute("rel") == "external")
  7.         popu();    
  8.     }
  9. }
  10.  
  11.  
  12. function popu() {
  13. window.document.getElementById("picarea").innerHTML = "<img alt='photo' src='" +foo+ "' />";
  14. }

Please let me know if there are any further thoughts. More code samples would be greatly appreciated. Thanks.
Feb 4 '08 #5

acoder
Expert Mod 15k+
P: 16,027
'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:
Expand|Select|Wrap|Line Numbers
  1. var popup = null;
  2. var currLink;
  3. function popupwin(foo) {
  4.   currLink = foo;
  5.   popup = window.open('popup.html','foo', 'height=560,width=600,scrollbars=1,resizable=1,toolbar=1,location=1,status=1');
  6. }
  7.  
  8. function popu() {
  9.   popup.document.getElementById("picarea").innerHTML = "<img alt='photo' src='" +currLink.href+ "' />";
  10. }
Feb 5 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.