472,789 Members | 1,103 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,789 software developers and data experts.

Problem with resizable popup

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

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
'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
'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 =
'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'+
'<\/head><body onload="resizeWinTo();"'+(AutoClose?'
(document.layers?('<layer left="0" top="0">'):('<div
style="position:absolute;left:0px;top:0px;display: table;">'))+
'<img src='+imageURL+' alt="Loading image ..." title=""
if( imgWin.focus ) { imgWin.focus(); }
return false;

My html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<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

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
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
// 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
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;

<div align="center">
<p><a href="people-arkon.jpg" onClick="return
src="gumb-b&w-At-night.jpg" width="42" height="42" border="0"></a></p>
Jul 23 '05 #1
4 2369
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

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
web.dev wrote:
<a href="people-arkon.jpg" onClick="return

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
VR wrote:
All I get is this http://www.justfonts.com/tini/problem.html (thumbnail


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
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",
"<body "
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.
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: John | last post by:
I am having a problem with window.print in a popup window. I am creating 2 popup windows both with a print button in them, 1 works the other doesn't. Code runs in a javascript function on a...
by: riki | last post by:
Hi, i have a big problem...i'm using one jscript for resizing of all of my pics in popUp...in main html i'm having many little pics and clicking on them they open in popUp and resize to larger...
by: Merlin | last post by:
Hi there, I have a problem with opening new windows with JS. If the webpage did not complete loading due to any reason a click on a link which is supposed to open a small new other window loads...
by: Markus | last post by:
Hi, i have this problem: Sometimes, i can't reproduce, if i click on an small image on the website, the popup _AND_ an other Tab in firefox open. Here are the linkcode: <div...
by: ldan | last post by:
Hi everybody, I would not consider myself an expert in javascript - but so far whatever I know, helped me reaching my goals. Recently I started to experience a lot of javascript errors related...
by: Dan Pavel | last post by:
Hi, I have a little problem and I can't solve it. I have a webpage and in the aspx i have this code: if (exists) Response.Write("<td align='center' bgcolor=#0033ff...
by: Aahz | last post by:
I know this problem has been discussed before but still cannot work it out, here is my code: <span class="popup" onClick = javascript:window.open('fullimage.aspx?id=<%#...
by: sam.s.kong | last post by:
Hello! I opened a new window using 'resizable=no'. Can the child window make itself resizable even if it's opened with 'resizable=no'? For example: <body onload="javascript:...
by: johnsonholding | last post by:
Here is the script I have in my page : <!-- Begin function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "',...
by: Rina0 | last post by:
Cybersecurity engineering is a specialized field that focuses on the design, development, and implementation of systems, processes, and technologies that protect against cyber threats and...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

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.