homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Pop Up Window Won't Finish Loading
Pop Up Window Won't Finish Loading
Zaltek




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

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




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

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




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

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




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

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




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

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

rocknbil




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

<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">');

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved