popup window: mozilla error online only [Archive]

Click to See Complete Forum and Search --> : popup window: mozilla error online only

jhaber31

12-27-2003, 11:47 AM

I've got a script to display captions to images in a popup window. It runs in IE5 and Netscape 4, it tests ok offline in Mozilla, and on top of that I've seen others report having it work in Mozilla. But when I upload my files and test live, it doesn't work for me. The Mozilla Tools/Web Developer/JavaScript Console reports

popup1.document has no properties, line 26

While this message vanishes from the console when I leave the page, I then see only repeated error reports about element not having properties in a chrome file line 128.

A typical page is
http://www.haberarts.com/greco2.htm

This references the script in the html head:

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

This invokes the script:
<a href="javascript:popcap('title', 'artist', '(source, year)')"></a>

Finally, here's the whole caption.js script file:



FWIW, another script, used for a search engine (see my Browse by Artist page) works ok in Mozilla, so I know I've scripts enabled.

Thanks so much for your help!

ray326

12-27-2003, 12:31 PM

Works fine for me in Moz 1.5.

fredmv

12-27-2003, 02:08 PM

Do you have server-side scripting available? You could do something like this so easily in PHP.

jhaber31

12-27-2003, 02:30 PM

To be honest, I don't know php yet, although I hope to learn. (I can't promise my domain host, Earthlink, allows server-side scripting, but you never know. I can always move.)

Still, I bet I can sort this out. I tried taking the last semi out, after the last line and before the close curly brace. I wonder if I wasn't using a particularly unforgiving build of Mozilla, as now I'm seeing the popups, and of course others already were.

I can't promise that's it, though. I dont yet understand the JavaScript Console tool in Mozilla (v1.2.1), and I can still see the element has no properties errors each time, with reference to line 128 in a site I don't recognize. (Obviously my files don't even have that many lines.)

Any hints, of course, gratefully recieved, and thanks!

fredmv

12-27-2003, 02:44 PM

I see. I believe what was wrong with your previous code was that it was trying to write to the new window's document before the window existed. I just completely rewrote your function, it now stores all of the code in a variable then only makes one call to the new window's document.write method which will save resources and as a result execute faster. It also checks to see if the window exists and hasn't been closed before writing to it in order to prevent possible errors.

Here's the new function:<script type="text/javascript">
//<![CDATA[
function popCap(title, artist, source)
{
var win = window.open('', 'cap', 'width=300,height=115,left=330,top=250');
var code = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"';
code += '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
code += '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"';
code += '<head><title>' + artist + '</title><meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /></head>';
code += '<body><p align="center"><strong>' + artist + ': <cite>' + title + '</cite><br /><small>' + source + '</strong></small></p>';
code += '<div align="right"><form action="#"><input type="button" value="close" onclick="self.close();" />';
code += '</form></div></body></html>';

if(typeof win != 'undefined' && !win.closed)
{
with(win.document)
{
write(code);
close();
}
win.focus();
}
}
//]]>
</script>Example usage of this function would be:<a href="#" onclick="popCap('title', 'artist', 'source');">foo</a>

jhaber31

12-27-2003, 03:27 PM

I appreciate it. I apologize if I don't reply in more detail. You're using syntax new to me. (I remember seeing CDATA when I was reading about DTD in xml, but there are many other things as well.) I'll digest it all soon, I hope.

John

fredmv

12-27-2003, 03:52 PM

You're quite welcome John. You're correct, as you said, a CDATA section is XML syntax. I've actually described this to someone else which you can see in this thread (http://www.webxpertz.net/forums/showthread.php3?s=&threadid=27224). You really only need it if you want the code to be embedded on the page and you're using an XHTML DOCTYPE. Otherwise, you can just include it without the CDATA section or simply make it reference an external JavaScript source file.

jhaber31

12-27-2003, 03:53 PM

Actually, not to beat a dead horse, but isn't the line above the write statements sufficient to ensure that a window is open before it's written to:

popup1=window.open("", "popup1", windowvars);

For that matter, could my mistake be using the same name on both sides of this equation? I have to admit that, if that's the case, with browsers just being forgiving, then if I change to, say,

popup1=window.open("", "popup2", windowvars);

I wouldn't actually know whether the write statments then should read

popup1.document.write

or

popup2.document.write

Sorry I'm so lame at the syntax here.

John
jhaber@haberarts.com

fredmv

12-27-2003, 03:58 PM

It would seem like that, however, it may be still loading the document (even if it's blank) when you write to the new window. This may or may not have been the actual problem, since I didn't thoroughly test and look over your current code, however, I looked over it and that could have been one of the possible reasons. You also forgot to close the stream after writing to it which could have also been causing you problems. Also, to answer your first question, your first guess is correct. You reference the window based on the variable in which it resides in; the name you give the window simply allows other windows to open in it should you want them to.

jhaber31

12-27-2003, 05:40 PM

Not to discount your good advice about taking a whole other tact, putting the code in a variable before writing. But you know, just inserting

popup1.document.close();

before the focus seems to have accomplished something. While (after the removing of a semi before) I had it working, the popup window loaded with a curious delay in Mozilla (though not in IE); now it's instantaneous (faster, in fact, than in IE).

If I go into the (still mysterious to me) JavaScript Console, I still see the errors referring to l. 128 in a chrome (rather than local file or http) file, but I have a feeling I've some learning to do about Mozilla itself in that regard.

And you were right that I intend to work within an xhtml document type with CSS. Best, John

ray326

12-27-2003, 10:44 PM

If I go into the (still mysterious to me) JavaScript Console, I still see the errors referring to l. 128 in a chrome (rather than local file or http) file, but I have a feeling I've some learning to do about Mozilla itself in that regard.
Those are internal Mozilla UI errors. Just clear them out before you do an troubleshooting since they don't apply to your own code and you probably can't do anything about them anyway. I get a bunch of them ever since I installed the Web Developer Tools.

jhaber31

12-28-2003, 10:56 AM

Oh, probably a truly tired and naive question, but the code for my popup window suggested here uses

<a href="#" onClick="function(vars);">

instead of

<a href="javascript:function(vars)">

What's the difference (and advantages or disadvantages) thereof? (Interesting I don't have to identify it as javascript in any explicit way, too.) Also, is the semi needed?

I can see that I could do an easy global search to make this change, without a day or more of manual editing and checking.

Thanks, John

fredmv

12-28-2003, 11:30 AM

Originally posted by jhaber31
Oh, probably a truly tired and naive question, but the code for my popup window suggested here uses

<a href="#" onClick="function(vars);">

instead of

<a href="javascript:function(vars)">

What's the difference (and advantages or disadvantages) thereof?What it really comes down to is that the first one is correct and the second one is incorrect. Some reasons for this I've listed in this thread (http://www.webxpertz.net/forums/showthread.php3?s=&threadid=27049).Originally posted by jhaber31
(Interesting I don't have to identify it as javascript in any explicit way, too.)That's because all event handlers are, by default, JavaScript event handlers.Originally posted by jhaber31
Also, is the semi needed? I assume you meant colon (as opposed to semi-colon)? When using the JavaScript pseudo-protocol? Yes.

jhaber31

12-28-2003, 12:42 PM

Fair enough (and actually, I meant the semi at the end of the <a href="#" onClick="function();">). nteresting to learn, and thanks! I've made global replaces of both
sides, first replacing first the

javascript:

with

#" onClick="

and then searching for

')"><img

to insert the semi. I'm looking now on each instance of the replace to proof before uploading.

But it seems to introduce a problem, as I test it. Each time someone clicks on an image, it moves the underlying page to page top. So you lose your place. Ouch. -- John

fredmv

12-28-2003, 12:47 PM

That shouldn't have introduced any problems. All you're changing is the attributes of the tag (which, mind you, have nothing to do with how it is rendered unless you change its physical location in the source code or alter it with CSS), so I'm assuming there is something else that changed which is causing your problem.

jhaber31

12-28-2003, 01:01 PM

You sure that href="#" isn't interpreted as the TOP of the current page? Here, for instance, is a typical example of an image reference I have after the search and replace. (The proofing, now done, verifies that the searches changed ONLY these paired link/image tags.)

<a href="#" onClick="popcap('Stag at Sharkey’s', 'George Bellows', '(Cleveland Museum of Art, 1905)');"><img src="bellows.jpg" width="290" height="218" hspace="10" vspace="10" border="0" align="right" alt="Bellows's Stag at Sharkey's (Cleveland Museum of Art, 1905)" title="Bellows's Stag at Sharkey's (Cleveland Museum of Art, 1905)" /></a>

BTW, correctness and backward compatibility aside, I do love one aspect of the change: no longer seeing the inane JavaScript on the status bar during a mouseover!

John

jhaber31

12-28-2003, 01:05 PM

Also, I did a test. I took a word near the bottom of a document and linked it simply with <a href="#">word</a>, and it did indeed seem to take me to the document top in a test.

fredmv

12-28-2003, 01:12 PM

Ah, I didn't know you were referring to that! Very sorry for the misunderstanding. :D

You'll have to add one more thing to prevent it from doing that: simply making your event handler return a false Boolean value resulting in canceling the normal event (following the href attribute of the link). For example:onclick="popcap('Stag at Sharkey’s', 'George Bellows', '(Cleveland Museum of Art, 1905)');return false;"That should fix it. ;)

jhaber31

12-28-2003, 01:18 PM

Ah, in a test thus far, that extra

return false;

seems to do the trick. I'll do another global search and proofing later before uploading the changed site. Thanks! John

ray326

12-28-2003, 06:24 PM

Originally posted by jhaber31

But it seems to introduce a problem, as I test it. Each time someone clicks on an image, it moves the underlying page to page top. So you lose your place. Ouch. -- John
That's a side effect of the # href. Your handler must return false to prevent the execution of the link.

jhaber31

12-29-2003, 04:57 PM

BTW, besides thanking you all, I should say I didn't take you seriously enough! Today I got to work, with a different version of Mozilla (1.5), and again it didn't run my script. After yesterday appeasing 1.2.1 by closing the document, I still hadn't opened the document, and that was all it took today.

Thanks for this place. It's just so hard to find the same info in book form. I was reading the books in the O'Reilly and Bible series yesterday, and you'd never find clearly stated (for just one example) how "return false;" within the value of the event handler would not cancel the function call but would cancel the href. Or to use an event handler instead of a pretend URL. (They may or may not make clear the difference between opening/closing a document and a window.) This has been a great tutorial in just the logic of JavaScript itself.