473,836 Members | 1,434 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

passing values from parent window to child window dynamically

3 New Member
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="popupw in();"><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="popupw in();"><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:60 0px; height:550px;"> </div>
<div id="closebutton " style="width:60 0px; height:25px; padding-top:10px; text-align:center;"> <input type="button" value="Close Window" style="padding: 2px; font-size:14px; text-transform:upper case; font-weight:bold;" onclick="self.c lose();" /></div>[/HTML]
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. }
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
5 18189
16,027 Recognized Expert Moderator MVP
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
3 New Member
Thanks acoder:)

Any chance you could give me a code sample of what you have in mind?
Feb 4 '08 #3
16,027 Recognized Expert Moderator MVP
Sure, here's some example code:

In pic.html:
[HTML]<p><a href="images/pics/pic125.jpg" rel="external" onclick="popupw in(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:60 0px; 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
3 New Member
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:


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

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

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:60 0px; height:550px; background-color:pink;"></div>
<div id="closebutton " style="width:60 0px; 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:upper case; font-weight:bold;" onclick="self.c lose();" /></div>


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. }
  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
16,027 Recognized Expert Moderator MVP
'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.p opu() 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. }
  8. function popu() {
  9.   popup.document.getElementById("picarea").innerHTML = "<img alt='photo' src='" +currLink.href+ "' />";
  10. }
Feb 5 '08 #6

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

Similar topics

by: Vaughn | last post by:
In my MDI, I have a child form (frm_emp) that on a button click, displays another child form w/ a listview (frm_list). I had two questions: 1) Assuming I already have the emplcode the user clicked on frm_list, how would I be able to transfer that value back to frm_emp? 2) From within the double-clicked event in the frm_list, can I send the emplcode value to frm_emp *and* execute a public method in frm_emp. It'd be basically something...
by: Piotrek Stachowicz | last post by:
Hi, I've got two windows: main one (visible in task bar) and, the other one which is created by main (not visible in task bar). Now, how can I make the "child" window obey his parent, i.e. when main window is brought to front, child should also be brought to front, etc. Thx, Piotrek Stachowicz
by: ssrivani | last post by:
hi all, I have a parent window default.aspx which has a textbox(txtBox1) with multiline property and a button.when the button is clicked a child window pops up child.aspx. I have four textboxes in child.aspx and a submit button.What I want to happen is when I click the submit button all the values must be displayed in the multiline textbox in a table format with header and the values below or any formatted display with headers.
by: sangram | last post by:
Passing value from parent to child window created by Pop up
by: chytanya | last post by:
Hi, I have a link in a window; on click of this link a child window is opened; the child window has frames in it; when i try to refresh the parent window from any of the frames in the child window; i get an error message that the parent window is not found. Can any one please tell me how to refresh a parent window from a child window with frames in it. Thanks, Chaitanya.
by: backups2007 | last post by:
Say for example, i have rows of input textboxes and i would like to pass different data from a popup window. How should I do it?
by: backups2007 | last post by:
What I want to do is be able to open a popup window that may pass data to different rows of textboxes of its parent window. I want to pass data to different rows of textboxes and each row has a different set of values. How can I do it? Through a function? Through conditional statements? Through creating one popup window for each row of textboxes? I really need an answer ASAP. thanks.
by: Bhishm | last post by:
Hi, I have a window ( in which one iframe continuously runs. I open another window from that window ( which also runs an iframe continuously. Now the problem is that only one runs at a time the othere window just hangs. If I control the child from parent than after refreshing the parent
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.