Passing Height/width To Pop-up

son · December 29, 2008

I have a function to open a pop-pop. The current code:

function goWin(link) {var windowprops ="'width='+width+',height='+height+',top=50px,left=50px,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no";TheWin = window.open('','image',windowprops);TheWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">');TheWin.document.write('<head><title>Enlarged Photo<\/title><\/head><body style="overflow:hidden;margin:20px;background-color:#FFF;">');TheWin.document.write('<p><img src="' + link.href + '" width="600" height="450" alt="Holiday photo" title=" Holiday photo "><\/p>');TheWin.document.write('<div align="center"><a href=\"java script:void(0)\" onclick=\"window.close()\">Close window</a><\/div><\/body><\/html>');TheWin.document.close();TheWin.focus();}

is called via:onclick="goWin(this, 514, 720); return false;"I allowed 60 px either side for padding. Can I adjust the code, so I pass the image dimensions only (this, 394, 600), so I can add 120 to width and height of pop-up while also using the passed info for the image width and height itself? If yes, how do I add the 120px to var windowprops and use the passed info in:TheWin.document.write('<p><img src="' + link.href + '" width="600" height="450" alt="Holiday photo" title=" Holiday photo "><\/p>');?Son

tooldude · December 29, 2008

Is something like this what you are wanting? Pass the image's width and height, and also pass an amount of padding you want for the body. The padding will be doubled and added to the window's width and height:

<!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></title><script type="text/javascript">/*<![CDATA[*/function goWin(link, width, height, padAmt) {var xtraWidth = width+(padAmt*2);var xtraHeight = height+(padAmt*2);var windowprops ='width='+ xtraWidth +', height='+ xtraHeight +', top=50px, left=50px, toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no';TheWin = window.open('','image',windowprops);TheWin.document.write('<!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">');TheWin.document.write('<head><title>Enlarged Photo<\/title> <style type="text\/css">*{ padding:0; margin:0; }<\/style> <\/head><body style="overflow:hidden; padding:' + padAmt +'px;background-color:#FFF;">');TheWin.document.write('<p><img src="' + link.href + '" width="' + width + '" height="' + height + '" alt="Holiday photo" title=" Holiday photo " \/><\/p>');TheWin.document.write('<div align="center"><a href="#" onclick="self.close();">Close window</a><\/div><\/body><\/html>');TheWin.document.close();TheWin.focus();return false;}/*]]>*/</script></head><body><p><a href="images/1big.gif" onclick="return goWin(this, 450, 600, 60);"><img src="images/1th.gif" alt="1th.gif" title="Click for big pic" width="100" height="100" /></a></p></body></html>

son · December 29, 2008

That is exactly what I need, thanks.What stands the /*<![CDATA[*/bit for? Have never seen this syntax. Is the sth to do with XML?Also, can I adjust, so when a pop-up is already open it will close this one first? The image sizes vary and when you open a small one first and then a big one without closing the old one it does not show complete image. Just noticed...Son

tooldude · December 31, 2008

That is exactly what I need, thanks.What stands the /*<![CDATA[*/bit for? Have never seen this syntax. Is the sth to do with XML?Also, can I adjust, so when a pop-up is already open it will close this one first? The image sizes vary and when you open a small one first and then a big one without closing the old one it does not show complete image. Just noticed...Son

You're welcome!The CDATA opening tag: /*<![CDATA[*/ and closing tag: /*]]>*/ (they actually do need to be commented out) are needed inside of script tags that are on a xhtml page in order to validate with xhtml, as some of the special characters used in javascript such as < and > will throw validation errors with xhtml. Yes, it is to do with the XML basis of xhtml. As you see below, the opening and closing CDATA tags should contain all of the javascript.CDATA tags are not needed if the script tags are just an src link to an external .js file.CDATA tags are not needed inside of external .js files either.I did a little re-formatting of the code inside the function also. Rather than having so many document.write's, just build the string first, then do one document.write (shortens the code some this way). And then the declaration of the undefined global variable TheWin is necessary outside the function, in this case, and add an 'if' condition to close previous.

<!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></title><script type="text/javascript">/*<![CDATA[*///Always declare a global variable, (my bad, I should have done so in my previous post) if using any, //especially if it is going to be a window object, as it will be in this casevar TheWin;function goWin(link, width, height, padAmt) {	if (TheWin) {		TheWin.close();	}	var xtraWidth = width+(padAmt*2);	var xtraHeight = height+(padAmt*2);	var windowprops ='width='+ xtraWidth +', height='+ xtraHeight +', top=50px, left=50px,';	windowprops += ' toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no';	TheWin = window.open('','image',windowprops);	var htmlStr = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ';	htmlStr += '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">';	htmlStr += '<head><title>Enlarged Photo<\/title> <style type="text\/css">*{ padding:0; margin:0; }<\/style> <\/head>';	htmlStr += '<body style="overflow:hidden; padding:' + padAmt +'px;background-color:#FFF;">';	htmlStr += '<p><img src="' + link.href + '" width="' + width + '" height="' + height + '" alt="Holiday photo" title=" Holiday photo " \/><\/p>';	htmlStr += '<div align="center"><a href="#" onclick="self.close();">Close window<\/a><\/div><\/body><\/html>';	TheWin.document.write(htmlStr);	TheWin.document.close();	TheWin.focus();	return false;}/*]]>*/</script></head><body><p><a href="images/1big.gif" onclick="return goWin(this, 450, 600, 60);"><img src="images/1th.gif" alt="1th.gif" title="Click for big pic" width="100" height="100" /></a><a href="images/2big.gif" onclick="return goWin(this, 300, 500, 60);"><img src="images/2th.gif" alt="2th.gif" title="Click for big pic" width="100" height="100" /></a><a href="images/3big.gif" onclick="return goWin(this, 550, 700, 60);"><img src="images/3th.gif" alt="3th.gif" title="Click for big pic" width="100" height="100" /></a></p></body></html>

son · January 2, 2009

Thanks again for the great help. This seems to have speeded up things massively too. Great!Can I ask just one (probably stupid for someone who knows JavaScript) more question: Why does this only work when you open popUps on one page, but not when you open pop-up on a page, then go to the next page using same script and open one? Reference the script from external file (without the CDATA bit) in five files?Cheers,Son

tooldude · January 3, 2009

Why does this only work when you open popUps on one page, but not when you open pop-up on a page, then go to the next page using same script and open one

If by that you mean that when you go to another page of yours which also uses the same script that it will not close the popup window that was opened from the previous page, or the width's or height's are not right when you click to open another window (unless you close the window that was opened from the previous page first), that is normal expected behaviour. Each script runs independently on it's own page. The variables from one page do not transfer to another page even if they are using the same script. So each page has it's own ' TheWin ' variable. It is possible to send info via url from page to page, such as variable names and values, but once on another page there is no way to control a popup window that was opened on the previous page (at least that I am aware of, and I was curious about it so I tried a number of things, with no success at all).So I would suggest the alternative is to close TheWin when the page unloads. That way the user is assured a fresh new glistening clean popup window when they open another one from the next page! Insert a window.onunload function such as the following (on the page the popup windows are opened from):

window.onunload = function () {	if (TheWin && !TheWin.closed) {		TheWin.close();	}};

son · January 4, 2009

If by that you mean that when you go to another page of yours which also uses the same script that it will not close the popup window that was opened from the previous page, or the width's or height's are not right when you click to open another window (unless you close the window that was opened from the previous page first), that is normal expected behaviour. Each script runs independently on it's own page. The variables from one page do not transfer to another page even if they are using the same script. So each page has it's own ' TheWin ' variable. It is possible to send info via url from page to page, such as variable names and values, but once on another page there is no way to control a popup window that was opened on the previous page (at least that I am aware of, and I was curious about it so I tried a number of things, with no success at all).So I would suggest the alternative is to close TheWin when the page unloads. That way the user is assured a fresh new glistening clean popup window when they open another one from the next page! Insert a window.onunload function such as the following (on the page the popup windows are opened from):
window.onunload = function () {	if (TheWin && !TheWin.closed) {		TheWin.close();	}};

That is great! Exactly what I was after. Cheers. I assume the colon at end was unwanted, wasn't it? I left is out and works, as I do not know much about proper JavaScript (;-)) just want to check...Son

zppblood · January 5, 2009

Semi-colons are used to close statements, and can be omitted, but I think you should use them so you don't get into the habit of leaving them out if you were to go into other languages like PHP, C/C++, etc. that do require them.

son · January 5, 2009

Semi-colons are used to close statements, and can be omitted, but I think you should use them so you don't get into the habit of leaving them out if you were to go into other languages like PHP, C/C++, etc. that do require them.

I understand this, I just never saw it after a closing bracket...Thanks for your help. I really appreciate you took the time to explain me everything...Son

zppblood · January 5, 2009

Oh, I didn't see the ; after the }, I thought you were talking about statement, that was probably a typo.

tooldude · January 5, 2009

I assume the colon at end was unwanted, wasn't it? I left is out and works

No, it was there on purpose, and is proper syntax to have it there in this case, as it is finishing an assignment expresssion, much like a variable declaration when you say: something = something; <--- finish assignment expressions with semi-colon. It may work fine without it, but is actually improper and somewhat sloppy syntax without it, but best practice to include it.So to review:var someThing = anotherThing; //<---- always finish with semi-colonvar someThing = function () {//code in here that does neat stuff}; //<---- should be finished with semi-colonsomeObject.someMethod = function () {//do stuff}; //<---- should be finished with semi-colonfunction doSomeOtherThing () {//do stuff} //<---- no semi-colon

son · January 5, 2009

function doSomeOtherThing () {//do stuff} //<---- no semi-colon

Why is then on last one no semo-colon. Got your point, but was then confused about the difference...Son

Synook · January 6, 2009

Because the last one is a block of code. The previous ones are all (technically) one-line assignments, and lines end with semicolons.

son · January 7, 2009

Because the last one is a block of code. The previous ones are all (technically) one-line assignments, and lines end with semicolons.

Cheers,Son

Passing Height/width To Pop-up

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived