Pop up box problem in Firefox

ianswindale

11-23-2012, 07:54 AM

I got the following script for creating pop up boxes from the Internet -- the guy was offering it free, I didn't steal it. I am having a Firefox related problem with it. I ran it through the Firefox web console and it didn't report any problems. I'm hoping someone here might be able to help.

Basically I am using the same code for three different types of pop up boxes on my website. The first contains information, the second type contains a .gif or a .jpg of an archaeological site plan and the third type contains an embedded YouTube video. The first two open and stay on top. If I open one of these first and then open the pop up box with the embedded video it, too, stays on top. But if I open the pop up box with the embedded video first, then the pop up box opens but as soon as the video starts to load it disappears behind the browser. I need to get it to stay on top. Below I am including the javascript that I got off the guy's webpage. Then below that I am including that javascript with the changes I made. Basically I added <img src="video_icon.jpg" class="icon" border="0"> in place of words like the "Click me" in the original javascript because I wanted the link to be an icon not words. Also I added title="Click here to see video clip" so that anyone hovering over the icon can see this message. Finally I have put the part of the code between the script tags in the head part of the page, while I have put the ahref part at the appropriate point in the body. It doesn't make any difference if I move the script part to the body with the ahref part as the problem persists.

This link will take you to a page with links to all three pop up boxes. The video pop up box has a video camera icon. Please click this one first to see the problem. If you click one of the others first the problem won't appear.

http://www.uk.digiserve.com/mentor/minoan/pseira.htm

His javascript:

<script type="text/JavaScript">

function popjack()
{ window.open('misc/poppy2.html','popjack','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,cop yhistory=no,scrollbars=yes,width=480,height=480');
}

</script>

<a href="JavaScript: popjack()" onMouseOver="window.status='Status Bar Message';
return true" onMouseOut="window.status=''; return true">
Click Me<a>

My changed version of the javascript:

<script type="text/JavaScript">

function videobox()
{
window.open('pseira_video.htm','videobox','toolbar=no,location=no,directories=no,status=no,menubar=n o,resizable=yes,copyhistory=no,scrollbars=yes,width=900,height=500');
}

</script>

<a href="JavaScript: videobox()" title="Click here to see video clip" onMouseOver="window.status='Status Bar Message';
return true" onMouseOut="window.status=''; return true"> <img src="video_icon.jpg" class="icon" border="0"> </a>

Thanks

Ian Swindale

Old Pedant

11-23-2012, 08:00 PM

Well, first of all, that code you used for creating a pop up better be free, seeing as how it's what is used by likely half the popups on the internet.

The code is a little dated. Using href="JavaScript: xxx" is perhaps good 1997 code, not so good 2012 code.

But it still works.

And, yes, your problem only occurs with FireFox, for some reason. Were I *guessing*, I'd say it might be because of the <ifame> used in that popup. But, really, the reason doesn't matter.

A couple of things you could try. Try this one first:

var videoPop;
function videobox()
{
var videoPop = window.open('pseira_video.htm',
'videobox',
'toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,scrollbars= yes,width=900,height=500'
);
setTimeout( "videoPop.focus()", 1000 ); // force it to front after one second

}

Old Pedant

11-23-2012, 08:10 PM

Plesee don't ask me to explain why, but this worked:

<html>
<head>
<script type="text/javascript">
function videoPop( )
{
var videoPop = window.open('','videobox',
'toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,scrollbars= yes,width=900,height=500');
}
</script>
</head>

<body>
<a href="http://www.uk.digiserve.com/mentor/minoan/pseira_video.htm"
target="videobox" onclick="videoPop()"
>CLICK ME</a>
</body>
</html>

felgall

11-23-2012, 08:17 PM

The code is a little dated. Using href="JavaScript: xxx" is perhaps good 1997 code, not so good 2012 code.

My understanding is that placing JavaScript in the href attribute was considered to be atrocious coding even in 1997 - it only worked if the code being called wasn't expecting to be triggered by an event such as clicking on a link.

The only reason that you can attach JavaScript like that is so people can right click on the link and save the JavaScript into their bookmarks menu to run whenever they want. It was never intended to be used for scripts to be run straight away.

Old Pedant

11-23-2012, 09:15 PM

It's been many many years, but I vaguely recall that at least one version of Netscape had problems with using code such as:

<a href="#" onclick="someJsCode(); return false;"> zzz </a>

in that it would not obey the return false and would jump to the top of the page (because of the "#") anyway.

I remember that I learned to use the above in MSIE 4 and then at one point HAD to use
<a href="javascript: someJsCode();"> zzz </a>

in some project to make it work in some NS browser. (Or possibly it was some other early browser? Though I'd swear it was NS. 3.5 or so.)

This was in 1998, give or take a year. And because I was working for a company that was integrating Java (Java, not JS) into various browsers, it may have even been a pre-release product.

Needless to say, as soon as the bug was fixed I went back to the standard way.

But it's possible that indeed the "legend" of needing to use href="javascript: xxx()" appeared about that time.

ianswindale

11-24-2012, 06:47 AM

Thank you both for taking the trouble to reply. I tried the first piece of code provided by Old Pedant but in my Firefox browser, when I clicked on the words "click me" I still had the same problem -- the pop up box opened but as soon as the video started to load the pop up box disappeared behind the browser. The code for forcing it to the front didn't seem to work. I had cleared recent history, closed Firefox, run CCleaner to make sure there was no trace of a previously open pop up box. As I said before, if you open one of the other pop up boxes and then open the video one it stays on top. It only disappears if it is the first to be opened, presumably meaning the first in the whole browsing session.

The second piece of code from Old Pedant works but basically it opens the video in a full screen new tab rather than a pop up box. As far as I know I can do that without using javascript at all. And I don't really want it to open in a new tab in all browsers just because of the problems in Firefox.

As you say, the reason for the problem has to be something to do with the code for opening the embedded video as this is what marks the pop up box for the video out from the other two pop up boxes that work OK. What baffles me is why the problem doesn't happen every time, but only when the video pop up box is the first one to open.

Perhaps I should just leave things as they are and hope that the 30% of my visitors who use Firefox open one of the other pop up boxes before they open the video pop up box. Then they won't have a problem.

Old Pedant

11-25-2012, 11:12 PM

Aaarrgghh.

It seems to have something to do with what windows are already open.

You know, the version with the setTimeout( ) *should* work, but you may need to increase the timeout.

ianswindale

11-27-2012, 06:52 AM

I got my brother to open the video pop up window on his computer and he reported that it opened and stayed on top so it looks like it's a setting in my Firefox browser. I've tried turning off all the add-ons that might affect the pop up window, but it didn't make any difference. I'm going to get a few more friends to try it on their computers and if they all report that the window opens and stays on top then I'm done (as you Americans say).

Old Pedant

11-27-2012, 10:36 PM

ONE MORE THING to try...

In your pop page itself (http://www.uk.digiserve.com/mentor/minoan/pseira_video.htm) simply add in an onload event for the <body>:

<body bgcolor="#FFFFFF" text="#000000" onload="window.focus();">

*OR* you could try

<iframe width="853" height="480" onload="window.focus();"
src="http://www.youtube.com/embed/6KvPy0yhR5k" frameborder="0" allowfullscreen></iframe>