JavaScript popUp interrupts HTML loading

peculiar event... Why is this happening?

[Gene]

Here's a curious javascript problem that I recently discovered...

I have an HTML page with a few photos and links on it. One link launches a small pop-up window for a sports schedule. The problem is that while the jpegs are loading on the HTML page, if the user clicks on the link for the pop-up, then the loading of the html page is interrupted.

So after the user is finished reading the pop-up and closes it, he's then looking at the html page with image files that are "partially" displayed.

I realize that hitting the reload button is one answer, but some users aren't that savvy. Besides, it's not very professional to have this happening.

I'm a newbie at javascript. Anybody have a suggestion?

Here's the code I used in the html page...

function newWindow() {
calWindow = window.open("schedule_volley.html", "calWin", "width=500,height=450,toolbar=0,location=0,status=0,directories=0,scrollbars=1,menubar=1,
resizable=1,fullscreen=0") }

And this is the popup link...

<A HREF="javascript:newWindow()">schedule</A>

[MaliciousDan]

Clicking a link in your browser causes it to stop loading the page. There is an exception to this, such as when a link opens a new window (using javascript the browser doesn't know it'll be in a new window until after the window is opened).

There are a few solutions... use <a href="..." target="_blank">...</a> instead of a javascript window, no control over window size but the rest of your page will load.

The second solution which may bring up a new window in addition to the javascript window is to put the target="calWin" , the theory is your browser opens a window named calWin, and then javascript takes over and changes the window (it's possible that it might happen the other way around, the javascript opens the window, then the browser opens a blank page, have to test it).

The final solution, which is more complex will definitely work, but is somewhat more difficult. When your page begins to load, open a new javascript window (open it minimized or as small as possible so it won't be noticable) named hiddenwindow, change your pop-up link to use target="hiddenwindow", your pop-up will open in calWin just fine, the last thing on your page just before </BODY> should close the hidden window. While this last one will work, I'm not sure if you can have a nearly invisible window (ie 1x1 pixels), you'd have to test this one too.

[Gene]

Dan,

Thanks for the suggestions. I tried your 2nd suggestion, using the "target" attribute. Unfortunately, it opens a blank page which you warned might happen.

I have found another solution, though I'm not 100% happy with it. I changed the link as follows...

<A HREF="CurrentPage.html" onClick="newWindow()">schedule</A>

This has the effect of reloading the current page that was previously interrupted, while also popping up the new window. The only minor annoyance is that the reload scrolls the page back to the top of the document.

But I guess we can't have everything. Thanks again for the help.

[mack]

i have had similar problems when using certain third party banner hosting companies... It seamed to wait for the banner to load before the page...does not make any sence from a webmasters poing of view but such is life.

You could try altering your placement of the code and try and get as much HTML to load as posible before the browser detects the scrpt. I have ghad limited effect with this ....but limited is always beter than none.

[tedster]

Gene, you could try defining a function that did two things: called location.reload(true) AND newWindow(). Then use that new function in the anchor tag.

I think that would return the reloaded page to its scrolled position (at least in IE. In Netscape it comes close.)

[IanKelley]

<a href="#uptoyou" onclick="

No reload

Strangely, I've never had the problem you describe when calling javascript popups from the href attribute. I actually just went and tested it at a couple of my sites, no problem at all.

You might also try appending ;return false to the javascript call.