Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts

    using getElementbyID with a popup window

    I'm trying to adapt an image gallery script detailed in Jeremey Keith's book to work with popup windows. The idea is a basic gallery has thumbnails and clicking on one shows a more detailed image in a new, popup window.

    The HTML on the gallery page is:
    Code:
    <table id="popupgallery">
    	<tr>
    		<td>Description 1</td>
    		<td>Description 2</td>
    		<td>Description 3</td>
    	</tr>
    	<tr>
    		<td><a href="/images/image1.jpg" title="image description"><img src="/images/image1_thumb.jpg" width="150" height="100" alt="image description" /></a></td>
    		<td><a href="/images/image2.jpg" title="image description"><img src="/images/image2_thumb.jpg" width="150" height="100" alt="image description" /></a></td>
    		<td><a href="/images/image3.jpg" title="image description"><img src="/images/image3_thumb.jpg" width="150" height="100" alt="image description" /></a></td>
    	</tr>
    </table>
    The js that creates an onload event and prepares the gallery is:
    Code:
    function addLoadEvent(func)	{
    	var oldonload = window.onload;
    	if (typeof window.onload != "function") {
    		window.onload = func;
    	} else {
    		window.onload = function() {
    			oldonload();
    			func();
    		}
    	}
    }
    
    function preparePopUp ()	{
    	if(!document.getElementsByTagName) return false;
    	if(!document.getElementById) return false;
    	if(!document.getElementById("popupgallery")) return false;
    	var gallery = document.getElementById("popupgallery");
    	var links = gallery.getElementsByTagName("a");
    	for (var i=0; i < links.length; i++) {
    		links[i].onclick = function() {
    			return popUp(this);
    		}
    	}
    }
    
    addLoadEvent(preparePopUp);
    Now, here's where I get stuck. I'd like to create my new window, assign it a name, and replace different attributes with references to the old window. I'm not sure how that works:

    Code:
    function popUp (whichpic) {
    	if(document.getElementById) {
    		newWin = window.open('popup.html','mywin', 'toolbar=no, scrollbars=no, resizable=no, menubar=no, status=no, directories=no, location=no, width=400, height=300');
    		newWin.document.getElementById('placeholder').src = whichpic.href;
    	  	if (whichpic.title) {
      	        newWin.document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    	  	} else {
                    newWin.document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    	  	}
    	  	return false;
    	} else {
    	return true;
    	}
    }
    popup.html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8">
    		<title>test</title>
    	</head>
    	<body>
                    <p id="desc">Description goes here</p>
                    <img id="placeholder" src="/images/placeholder.jpg" alt="" width="350" height="250" />
    	</body>
    </html>
    Running everything as-is gives me a "newWin.document.getElementById('placeholder').src has no properties" error which I am assuming is because the js gets fired before the popup is finished loading. But I can't figure out how to run the other half of that function after the page gets loaded. Am I taking the wrong approach here? Do I need a separate function in the new window?

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I suggest you set a global variable in the opener and then run the code the needs the document.getElementById() calls via the onload event handler for the child that checks for the global variable in the opener.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I'm sorry Kravvitz, I'm not following. (Keep in mind Javascript is essentially sorcery to me at this point) The part I can't wrap my head around is this:
    run the code the needs the document.getElementById() calls via the onload event handler for the child that checks for the global variable in the opener
    The popup function and the image display function all get called in the original page. If I understand you correctly I would need to put a global variable in the new window, and then wait to fire the script until the variable is loaded. (?) I like the sound of it but I don't know how to go about implementing it.

    --RM

  • #4
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's not what I said.

    I said the global variable goes in the opener, though on second though it could go in the child -- it doesn't matter. The function needs to be called via the onload event of the child.

    In popup() you would put something like
    Code:
    newWin.picToShow = whichpic;
    newWin.onload = function() {
      if(!document.getElementById) return;
      document.getElementById('placeholder').src = picToShow.href;
        if (picToShow.title) {
          document.getElementById('desc').childNodes[0].nodeValue = picToShow.title;
        } else {
        document.getElementById('desc').childNodes[0].nodeValue = picToShow.childNodes[0].nodeValue;
        }
    }
    http://www.quirksmode.org/js/croswin.html
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Thanks for the link and the help, Kravvitz!

    So after reading PPK's article and trying to combine everything I came up with this. It seems to me it's a bit bloated, but it lets me call everything from the parent page:

    Code:
    var newWin = '';
    
    function popUp (whichpic) {
    	if(document.getElementById) {
    		function doit() {
    			newWin.document.getElementById('placeholder').src = whichpic.href;
    			if (whichpic.title) {
    				newWin.document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    			} else {
    				newWin.document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    			}
    		}
    		if (!newWin.closed && newWin.location) {
    			newWin.focus();
    			doit();
    		} else {
    			newWin = window.open('popup.html','mywin', 'toolbar=no, scrollbars=no, resizable=no, menubar=no, status=no, directories=no, location=no, width=450, height=400');
    			newWin.focus();
    			newWin.onload = function() {
    				doit();
    			}
    		}
    		return false;
    	} else {
    		return true;
    	}
    }
    Essentially it first checks to see if the new window has opened. If it has, it gives the new window focus and runs the rest of the function. If it hasn't, it creates the new window, gives it focus, then waits until it has loaded until it runs the function.

    Is this a sane approach? I'm trying to learn this sort of thing the right way from the beginning so if anyone has any tips please let me know...

  • #6
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    One thing I would recommend is making sure "whichpic" is actually what you think it is.

    What if I pass in null, or 5 as the argument? whichpic.title will kill the script.

    Before accessing members of whichpic, either check for each individual one's existence:

    if (whichpic.title && whichpic.title = "title")

    OR, check for the type that whichpic is right at the beginning:

    if (typeof whichpic == 'Whatever type you want')

    That will make it more fault tolerant.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Beagle
    One thing I would recommend is making sure "whichpic" is actually what you think it is.
    Do I actually need the other arguments? I get "whichpic" from the function above:
    Code:
    function preparePopUp ()	{
    	if(!document.getElementsByTagName) return false;
    	if(!document.getElementById) return false;
    	if(!document.getElementById("popupgallery")) return false;
    	var gallery = document.getElementById("popupgallery");
    	var links = gallery.getElementsByTagName("a");
    	for (var i=0; i < links.length; i++) {
    		links[i].onclick = function() {
    			return popUp(this);
    		}
    	}
    }
    So I'm not sure how it's possible to get another value other than the link for "whichpic"; of course, this is why I ask these questions.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    So... on testing the script it seems it doesn't work in IE or Safari. The popup page gets loaded but the script never fires past the "newWin.onload" part. If I click on another thumbnail without closing the popup window first, the script does as it's supposed to.

    Any ideas on what I am doing wrong?

  • #9
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try changing
    Code:
    			newWin.onload = function() {
    				doit();
    			}
    to
    Code:
    			newWin.onload = function() {
    				window.opener.doit();
    			}
    and
    Code:
    function doit() {
    to
    Code:
    window.doit = function () {
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    That isn't working…I get a "window.opener' has no properties error.

    If I understand you correctly, this approach attempts to prevent the function from running from the child window, but I don't think that would be an issue as the function runs correctly when the window is already opened.

  • #11
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought it might have been a scope problem -- I was wrong.

    It looks like window.onload is being triggered after you set it.

    I suggest you use setTimeout() instead.
    Change:
    Code:
    			newWin.onload = function() {
    				doit();
    			}
    to
    Code:
    			setTimeout("doit();",500);
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #12
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I dare to suggest you another kind of approach. What if, instead of a popup, you would use a "layer", an element by default displayed 'none', but brought to 'block' with the proper function? Or an iframe?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, this is a client/designer request for the popup, not mine. The site is essentially a shopping cart; other pages within the site use the technique you mention(actually, the new image is targeted into an existing "placeholder" image)—implemented by a slightly different version of this script—and it's working fine. Only one page has the popup functionality requested.

    BTW, the timeout method gives me a "doit is not defined" error. Plus, using timeout seems to be sort of a hack—what if a visitor is on a slow/lagging connection?

  • #14
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops. It's not working because the doIt() was local to the other function. setTimeout() always executes from a global scope.

    I suggest you put the contents of the doIt() function in an event handler for window.onload in the popup file itself.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #15
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by rmedek
    Well, this is a client/designer request for the popup, not mine. The site is essentially a shopping cart; other pages within the site use the technique you mention(actually, the new image is targeted into an existing "placeholder" image)—implemented by a slightly different version of this script—and it's working fine. Only one page has the popup functionality requested.

    BTW, the timeout method gives me a "doit is not defined" error. Plus, using timeout seems to be sort of a hack—what if a visitor is on a slow/lagging connection?
    If well graphic designed, a layer might look exactly as a pop-up. Further more, I had a client which asked me exactly the same. I have build for him an iframe (whose content was mainly controlled by a server-side application) which looks exactly like a pop-up... ... I have told him about that only about after an year latter, when he was very happy about the fact that his business was extremely efficient due to its web pages...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •