1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:30 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Pop Up Window Won't Finish Loading

Pop Up Window Won't Finish Loading

         

Zaltek

4:54 am on Jan 11, 2011 (gmt 0)

10+ Year Member



Hi all, I've been trying to figure out for the past 4 hours why this JS pop up window function I wrote won't finish loading in Firefox. When you click the thumbnail image, it pops up a new window with the image enlarged. But for some reason, the Firefox page loading bar on the bottom right-hand side stops at about 25%, even after the image finishes loading. What is wrong with my code that I need to fix so the page shows that it loaded 100%? 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script language="javascript" type="text/javascript">
<!--
function pop_up_window (image, title, width, height, text, close_button, scroll_bars, bg)
{
 var l = (screen.width-width) / 2 - 6;
 var t = (screen.height-height) / 2 - 28;
 var pop_up = window.open('', '_blank', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars='+scroll_bars+',resizable=no,copyhistory=no,top='+t+',left='+l+',width='+width+',height='+height);

 pop_up.document.write ('<html>');
 pop_up.document.write ('<title>'+title+'</title>');
 window.name='main';
 if (bg == 'default')
  bg = '#FFFFFF';
 if (bg.charAt(0) == '#')
  pop_up.document.write ('<body bgcolor='+bg+' text=black link=blue vlink=purple alink=red>');
 else
  pop_up.document.write ('<body background="'+bg+'" text=black link=blue vlink=purple alink=red>');
 pop_up.document.write ('<style> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} </style>');
 if (image != ' ')
 {
  pop_up.document.write ('<center><img src="'+image+'"></center>');
 }
 if (text != ' ')
 {
  pop_up.document.write ('<center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="94%"><tr><td>');
  pop_up.document.write (''+text+'');
  pop_up.document.write ('</td></tr></table></center>');
 }
 if (close_button == 1)
 {
  pop_up.document.write ('<form name="closeit">');
  pop_up.document.write ('<center><input type="button" value="Close" onClick="window.close();"></center>');
  pop_up.document.write ('</form>');
 }
 pop_up.document.write ('</body>');
 pop_up.document.write ('</html>');
}
// -->
</script>

<title>Transformers Peterbilt Truck</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
 <a href="javascript:pop_up_window ('../images/customgallery/transformers_peterbilt_truck/DSC02061.jpg', 'Transformers', 623, 534, ' ', 1, 'no', 'default')" onMouseOver="window.status='Press to Enlarge'; return true">
 <img src="../images/customgallery/transformers_peterbilt_truck/DSC02061.jpg" width="150" height="113"></a>
</body>
</html>

astupidname

8:17 am on Jan 11, 2011 (gmt 0)

10+ Year Member



Usually this is because you have written to the document and not told it you are done writing in it. You tell it you are done by adding:
pop_up.document.close();

after the last thing written to the document via document.write.

Having answered that (hopefully), I strongly advise not using a popup window at all (let alone using document.write..... or the javascript: protocol... or using full size image scaled down as a thumb). It's gotten to the point where I can not stand clicking on a link and being surprised with a new window because the page's author thought that for some stupid reason I wanted to open a new window when such is usually never the case. HOW DARE YOU MAKE THAT ASSUMPTION FOR ME, CURSES!*&%$!

And now, having (hopefully) discouraged the use of those bad practices, you may ask what I would suggest otherwise... to which I would respond that there are many pre-built javascript photo galleries which use a sort of "modal" approach. And while it does not do everything quite right from a best practices/coding standpoint either (most don't anyhow..), perhaps look in to lightbox2, it is very popular.
To further explain my rant about popups, the gist of what I'm preaching is that we've had enough popups of new windows in the past, the here and now and future is that all "popups" must not be actual new windows, but rather on-page elements which are hidden and shown at will. But for the love of pete, keep those to a minimum also.... arghh. :)

Zaltek

6:09 pm on Jan 11, 2011 (gmt 0)

10+ Year Member



Hi, thanks for your response, it worked.
Just a couple of questions though, why not use document.write?
Also, what's wrong with the javascript: protocol and is there an alternative?

astupidname

9:45 am on Jan 13, 2011 (gmt 0)

10+ Year Member



why not use document.write?

Actually the manner in which you are using it is one of the accepted uses, being that you are using it to write to a new window's document, though it is generally considered a bad practice to use it within an actual page's content. Reason being the ideal of seperation of html and javascript code. This also applies to your inline javascript event handlers within the html code (including use of the javascript: protocol within links), generally bad practice, though who really cares for very small applications/sites. If it works and you're satisfied, fine, but there are better ways of doing things, which ultimately give greater versatility/portability/reusability.
Some research for you to do:

seperation of html and javascript code [google.com]

javascript event listeners [google.com]

Zaltek

6:16 pm on Jan 13, 2011 (gmt 0)

10+ Year Member



Cool, thanks for clearing that up.
I appreciate it.

rocknbil

6:11 pm on Jan 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<a href="javascript:pop_up_window"

I like to address this one like so: Javascript is not a URL. Javascript is not a URL. :-) The biggest problem here is it renders this link worthless to S.E.'s. Examine this bit.

<a href="link-to-accessible-content.html" onclick="return pop_up_window ('../images/customgallery/transformers_peterbilt_truck/DSC02061.jpg', 'Transformers', 623, 534, ' ', 1, 'no', 'default')" onMouseOver="window.status='Press to Enlarge'; return true">
<img src="../images/customgallery/transformers_peterbilt_truck/DSC02061.jpg" width="150" height="113" alt="Transformers"></a>


The main reason to avoid document.write, it's slow and difficult to maintain, and makes for rather bloated script files. The technical explanation for the document.close() is it flushes the buffer and outputs to the browser, prior to that it's all written to memory - which is another aspect of document.write, it consumes memory for larger writes (which this is not, really.)

Not to pick on you, but some other outdated/deprecated practices you may consider improving:

The important part: add return false to the end of your pop_up_window function. This will stop the link from navigating.

Also bolded: The alt attribute is a required attribute.


language="javascript" <-- Remove this for any doctype.

'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars='+scroll_bars+',resizable=no,copyhistory=no,top='+t+',left='+l+',width='+width+',height='+height

Two things here: 1) if you don't want an attribute, just leave it out.

'scrollbars='+scroll_bars+',top='+t+',left='+l+',width='+width+',height='+height

2) Akin to astupidname's complaints, if you must use pop ups, never assume your user's environment is what you see. What if their settings make the window too small in width to see all the content? Leave resizable in as an attribute.

These are all deprecated.

body bgcolor='+bg+' text=black link=blue vlink=purple alink=red (use styles)
<center><img src="'+image+'"></center> (use margin auto or text-align: center)
<table... (This layout is so simple tables are not required. Tables are for tabular data, use paragraphs or other semantic elements)

You can simplify your output by just adding a CSS reference in the head of it and styling everything with CSS (or extend your inline CSS. Much harder to maintain.)

document.write('<link rel="stylesheet" type="text/css" href="/linkto/yourcss.css">');
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:30 pm May 13, 2026