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

Problem with resizable popup

P: n/a
VR
First, greetings to everyone :)

I'm doing a university seminar & I've encountered a problem. I have a
gallery with thumbnails linked on pictures. What I want is popup to be
opened with dimensions of linked picture after clicking on a thumbnail.
I found javascript which is compatible with IE, Firefox & Opera but I
can't get it to work.
All I get is this http://www.justfonts.com/tini/problem.html (thumbnail
dissapeared).

I dont't know where I'm wrong. Please help!
Original script is (http://www.howtocreate.co.uk/perfectPopups.html):

//really not important (the first two should be small for Opera's sake)
PositionX = 10;
PositionY = 10;
defaultWidth = 600;
defaultHeight = 400;

//kinda important
var AutoClose = true;

//don't touch
function popImage(imageURL,imageTitle){
var imgWin =
window.open('','_blank','scrollbars=no,resizable=1 ,width='+defaultWidth+',height='+defaultHeight+',l eft='+PositionX+',top='+PositionY);
if( !imgWin ) { return true; } //popup blockers should not cause errors
imgWin.document.write('<html><head><title>'+imageT itle+'<\/title><script
type="text\/javascript">\n'+
'function resizeWinTo() {\n'+
'if( !document.images.length ) { document.images[0] =
document.layers[0].images[0]; }'+
'var oH = document.images[0].height, oW = document.images[0].width;\n'+
'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are
disabled
'window.doneAlready = true;\n'+ //for Safari and Opera
'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
'var myW = 0, myH = 0, d = x.document.documentElement, b =
x.document.body;\n'+
'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
'else if( d && d.clientWidth ) { myW = d.clientWidth; myH =
d.clientHeight; }\n'+
'else if( b && b.clientWidth ) { myW = b.clientWidth; myH =
b.clientHeight; }\n'+
'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 )
- myH ) );\n'+
'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
'if( !window.opera ) {
x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
'}\n'+
'<\/script>'+
'<\/head><body onload="resizeWinTo();"'+(AutoClose?'
onblur="self.close();"':'')+'>'+
(document.layers?('<layer left="0" top="0">'):('<div
style="position:absolute;left:0px;top:0px;display: table;">'))+
'<img src='+imageURL+' alt="Loading image ..." title=""
onload="resizeWinTo();">'+
(document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
imgWin.document.close();
if( imgWin.focus ) { imgWin.focus(); }
return false;
}

My html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Untitled Document</title>
<script language="javascript">
function openPopup (imageURL, caption) {

/*
This routine creates a pop-up window, and ensures that it takes focus.
It is
intended to be called from an anchor tag. The new window will resize
itself to
the optimum size, so we make it as large as the largest required window to
overcome bugs in various manifestations of various browsers.

Author: John Gardner
Written: 8th November 2003
Updated: 27th January 2004

Calling sequence: <a href="a.jpg" onClick="return
openLargeImage('a.jpg','Caption');">

The first parameter is the URL of the image to be opened, and the second
parameter is the caption for the image which is displayed in the window
title
and in the alt property of the image tag.

Note that the calling sequence will simply open the image in the main
window if
JavaScript isn't enabled.

*/

// Constants - change these to suit your requirements Note that the
defaultWidth
// and defaultHeight variables should be set to more than your
largest image to
// overcome a bug in Mozilla (at least up to Firefox 0.9).

var windowTop = 100; // Top position of popup
var windowLeft = 100 // Left position of popup
var defaultWidth = 730; // Default width (for browsers
that cannot resize)
var defaultHeight = 532; // Default height (for browsers
that cannot resize)
var onLoseFocusExit = true; // Set if window to exit when it
loses focus
var undefined;

// Set up the window open options
var Options = "width=" + defaultWidth + ",height=" + defaultHeight +
",top=" + windowTop + ",left=" + windowLeft + ",resizable"

// Now write the HTML markup to the new window, ensuring that we
insert the
// parameter URL of the image and the parameter description of the
image in
// the right place.
var myScript = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01
Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n" +
"<html>\n" +
"<head>\n" +
"<title>" + caption + "\</title>\n" +
"<meta http-equiv=\"Content-Type\" content=\"text/html;
charset=ISO-8859-1\">\n" +
"<meta http-equiv=\"Content-Language\" content=\"en-gb\">\n" +
"<script language=\"JavaScript\" type=\"text/javascript\">\n" +
"function resizewindow () {\n" +
" var width = document.myimage.width;\n" +
" var height = document.myimage.height;\n";

// Netscape
if (navigator.appName.indexOf("Netscape") != -1) {
myScript = myScript + " window.innerHeight = height;\n
window.innerWidth = width;\n"
}

// Opera
else if (navigator.appName.indexOf("Opera") != -1) {
myScript = myScript + " window.resizeTo (width+12, height+31);\n"
}

// Microsoft
else if (navigator.appName.indexOf("Microsoft") != -1) {
myScript = myScript + " window.resizeTo (width+12, height+31);\n"
}

// Assume a frig factor for any other browsers
else {
myScript = myScript + " window.resizeTo (width+14, height+34);\n"
}

myScript = myScript + "}\n" + "window.onload = resizewindow;\n" +
"</script>\n</head>\n" + "<body ;

// If the window is required to close when it loses focus.
if (onLoseFocusExit) {myScript = myScript + onblur=\"self.close()\" ;}

myScript = myScript + style=\"margin: 0px; padding: 0px;\>\n" +
"<img src=\"" + imageURL + \ alt=\"" + caption + \ title=\"" +
caption + \ name=\"myimage\">\n" +
"</body>\n" + "</html>\n";

// Diagnostic - uncomment the next line if you wish to see the script
generated.
alert (myScript);

// Create the popup window
var imageWindow = window.open ("","imageWin",Options);
imageWindow.document.write (myScript)
imageWindow.document.close ();
if (window.focus) imageWindow.focus();
return false;
}
</script>
</head>

<body>
<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="people-arkon.jpg" onClick="return
openLargeImage('people-arkon.jpg','Caption');"><img
src="gumb-b&w-At-night.jpg" width="42" height="42" border="0"></a></p>
<p>&nbsp;</p>
</div>
</body>
</html>
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Hi VR,

:) It's a very easy problem to fix. There are 2 problems to fix from
what you've posted above.

Fix #1:
This is what you have right now:

myScript = myScript + "}\n" + "window.onload = resizewindow;\n" +
"</script>\n</head>\n" + "<body ;

Replace that with this:

myScript = myScript + "}\n" + "window.onload = resizewindow;\n" +
"<\/script>\n<\/head>\n" + "<body ";

Reason: Your page is displaying code because the script didn't escape
the '/' character.

Fix #2:

This is what you have now:

<a href="people-arkon.jpg" onClick="return
openLargeImage('people-arkon.j*pg','Caption');">

Replace it with this:

<a href="#" onClick="return openPopup('people-arkon.jpg','Caption');">

Reason: On the event of an onClick, it should be calling the function
called openPopup, simply because you don't have a function defined
openLargeImage. :) And as for the # link in the href, the link
doesn't go anywhere, so might as well link to current page.

Hope this helps. :)

Jul 23 '05 #2

P: n/a
web.dev wrote:
<a href="people-arkon.jpg" onClick="return
openLargeImage('people-arkon.j*pg','Caption');">

Replace it with this:

<a href="#" onClick="return openPopup('people-arkon.jpg','Caption');">


No, don't. Removing the graceful fallback for non-JS users is a bad idea.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 23 '05 #3

P: n/a
VR wrote:
All I get is this http://www.justfonts.com/tini/problem.html (thumbnail
dissapeared).


http://validator.w3.org/check?verbos...i/problem.html

Putting HTML inside a <script> block (even inside a comment or a
document.write) is problematic. Its possible to work around it, but you are
usually better off using an external script file then importing it with:

<script type="text/javascript" src="myScript.js"></script>

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 23 '05 #4

P: n/a
web.dev wrote:
[...]
This is what you have right now:

myScript = myScript + "}\n" + "window.onload = resizewindow;\n" +
"</script>\n</head>\n" + "<body ;

Replace that with this:

myScript = myScript + "}\n" + "window.onload = resizewindow;\n" +
"<\/script>\n<\/head>\n" + "<body ";
Yes, however a joined array would be more efficient:

myScript = [
myScript, "}\n",
"window.onload = resizewindow;\n",
"<\/script>\n",
"<\/head>\n",
"<body "
].join("");
Reason: Your page is displaying code because the script didn't escape
the '/' character.


No. It is the SGML End Tag Open (ETAGO) delimiter (`</') that was not
properly escaped. Including the backslash before the forward slash
"removes" the ETAGO for an SGML parser (or a more common "tag soup"
parser recognizing `</script>' or any unambiguous prefix of it) while
producing a string literal containing an unsupported escape sequence
for JS which in turn is evaluated by the script engine as if it were
not escaped.
PointedEars
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.