Pop It Up

[molendijk]

1) CODE TITLE: Pop It Up

2) AUTHOR NAME: Arie Molendijk

3) DESCRIPTION:
Using iframes - instead of windows created via window.open - to show external content from a foreign domain has two big advantages: (i) iframes can be more easily customized than new windows created via window.open and (ii) popup blockers won't stop external content shown in an iframe from appearing.

But the advantage given in (ii) is only real when a new window is not explicitly requested (onload and onunload). The advantage is appearant only when the window's appearance is attached to an onclick event on a link. When the browser sees that a new window is actually requested, it won't allow popup blockers to do their job.

So preferring an iframe to window.open() is not always obvious. And there's a specific case in which iframes should not be used. If the page contained in it has links leading to other pages, each click on a link in the iframe adds an entry to the browser's history. This may lead to a situation where the browser's back button does not function properly anymore.

In modern browsers, window.open opens a new tab by default. But there may be cases in which we don't want a new tab. We would prefer the old fashioned new window when we want to explicitly show that an external page must be seen as an essential part of the existing main page.

With all of this in mind, I created a script that has the following features:
- the new window that is opened with the help of the script is automatically centered on the page (but see below);
- the new window closes an existing one when a new page is requested;
- the new window closes as soon as the visitor leaves the page;
- the new window is opened as a percentage of the monitor size;
- there's a 'once-per-session message' informing the visitor on what to do if there's no back button in the new window (new windows opened with Google Chrome don't have a back button).

The HTML, just an example:
<a href="javascript: void(0)" onclick="pop_it_up('http://www.google.com',70, 80)">Google</a>
In this example, the Google page opens in a (centered) new window that takes up 70% of the screen's width and 80% of the screen's height.

DEMO and explanations:
http://mesdomaines.nu/pop_it_up/pop_it_up.html

Notes:
- The script doesn't function properly when used locally (on the hard drive) with Internet Explorer and Google Chrome. But there's no problem on the internet.
- In Opera, the new window shows as a resized new tab, which does not prevent it from looking like a normal old fashioned new window.
- Also in Opera, the new window seems to be located too far away from the top of the screen. The reason is that Opera does its best to have as few overlap as possible between the new window (the new resized tab, actually) and the browser's bars on top.
- In Internet Explorer version 7, the new window is located too far away from the bottom of the screen. I don't feel inclined to correct this, as this browser will be dead soon.

4) URL TO CODE:
http://mesdomaines.nu/pop_it_up/pop_it_up.html

[djr33]

Seems to work well enough, although I'm not sure the popup situation is really one that needs to be fixed-- popup blockers can be a good thing, not a bad thing.

A couple notes:
1. Is it possible to not close the popup window when the main page is closed? Or perhaps a Javascript warning (though not an alert because alerts are annoying) for a few seconds before it closes.
In some cases (such as when the main window is acting like a 'program') I can see it being nice that all of the popups close. For example, if you have a music player 'embedded' within a bigger site. Or a chat window. But in many cases (arguably even those) users might be very annoyed by the fact that a window they might want open just closed-- that seems problematic to me.

2. One feature that would make this incredibly useful would be blocking the links from opening two times. I accidentally clicked twice on one of the links (something that isn't a problem with a regular link on a page-- it just loads the same page in the same window again), and two google window popups popped up. Could you block this? Could it only allow one instance of each pop up window? That would be great and very helpful, I think.
(As an expanded feature, you could make this [in the 'program' case] able to replace one window with a new link, such as having some extra windows floating around to help on a website-- maybe a 'help' menu that can be changed by links on either the main page or in the help menu window. This isn't as critical, but might be helpful too.)

[molendijk]

Seems to work well enough, although I'm not sure the popup situation is really one that needs to be fixed-- popup blockers can be a good thing, not a bad thing.

Yes, popup blockers are a good thing. What I ment to say is that web developers don't have to be afraid of using the window.open method, since popup blockers only work when the user does NOT give his explicit consent (= onclick) for opening a new window. I also warned against using iframes in certain situations (as replacements for new windows).

... Is it possible to not close the popup window when the main page is closed? Or perhaps a Javascript warning (though not an alert because alerts are annoying) for a few seconds before it closes.

Yes, that's possible. In the script there's a line var autoclose = true. If we replace that with var autoclose = false, the popup window minimizes when we go to a new page, but it does not close.

... One feature that would make this incredibly useful would be blocking the links from opening two times. I accidentally clicked twice on one of the links (something that isn't a problem with a regular link on a page-- it just loads the same page in the same window again), and two google window popups popped up. Could you block this? Could it only allow one instance of each pop up window? That would be great and very helpful, I think.

When we use the script online, clicking twice on a link should not produce two separate identical windows, but one single window appearing twice. I would like the window appearing once only, but I don't know how to do that yet.
===
Thanks for the comments,
Arie.

[jscheuer1]

What is it with you and Sibelius?

Just kidding. You do seem to be fond of resurrecting old things though. I like the music and am listening to one of your selections now.

Both iframes and popups are only required if your content isn't on your domain and/or not controlled by you on another domain, which sort of begs the question, why are you resorting to this?

Not you personally. I'm impressed by your work in general and, assuming you have either the rights to the content or it's such that you don't need the rights in order to do with it what you're doing, I approve of the use you're putting it to.

It's just that in the larger scope of things, there's really no reason not to just put the content on the page or alternatively fetch it via AJAX. You can even use a PHP assist with or without AJAX to fetch content from another domain, assuming you have the right to do so. Or (for some of what you're doing) just use a player with a playlist.

But, as I say - I'm impressed with what you do. You make it work for you.

The only real criticism I have of what you're putting forth here is that what you're saying about popup blockers isn't entirely true.

Their behavior is set in the browser. The consent = onclick formula is the most common and usually the default at installation. But lesser and more strict settings are available. For instance, all popups regardless of the interpreted intent of the user by the browser can be blocked. This can be set by the user after installation. Or it could be the default if the installation is made via an administrative or other package set to install the given browser(s) that way. And in the future it's quite possible it may become the default for some or all browsers. Remember that in the past all popups were allowed with no restrictions whatsoever over formatting things like scrolling, resizing, addressbar, etc. Now things are more restrictive and could become even more so.

About your two clicks scenario, I assume you've tried setting a var/property to true on the first click and if the second click finds it as true the second click will be ignored? This var/property could be set to false upon closing of the popup, and (more importantly) could also revert to false after a timeout expires.

[molendijk]

John, thanks for your comment. Up to the age of 8, the only music I'd heard was the music played on the church organ, the music played by the local harmony orchestra and popular songs. Then my parents bought a radio (they were not wealthy) and I heard what later turned out to be Chopin. I was stupified, the 'heavens opened to me'. From that moment on, my musical world is what it is now. It doesn't consist of only old things, though.
I've tried to do what I'm doing now via Ajax / PHP, but I haven't succeed yet in getting things work the way they are working for me right now.
Just using a player with a playlist isn't an option for me. My classicl music site contains lots of custom information (like the music titles, the starting point of individual movements of a piece, info on the performers / composers etc.) that isn't/cannot be provided by just using the player. Very often, the info comes from what I know myself about the music.
You're completely right about the popup blockers. When the time comes that onclick=consent doesn't hold anymore, I'll have to replace the new windows with new tabs.
And yes, I've tried what you suggest about the two clicks scenario. The problem is that a popup will always be set to the background when the user clicks on the main window. As far as I know, it cannot be made modal, in the sense of an IE dialogue box.
Thanks again,
Arie.

[jscheuer1]

My idea should work if executed properly. In it's most simple form:

window.popped = false;

function popwin(page, targ, specs){
	if(!window.popped){
		window.popped = true;
		window.open(page, targ, specs);
		setTimeout(function(){window.popped = false;}, 500);
	}
}

[molendijk]

Yes, that makes the link inactive if the popup is already there. But the user may not know where it has gone once it is minimized. Am I right or do I misunderstand your code?
Arie.

[jscheuer1]

Yes, but often that's just left up to the user to discover. In IE and Firefox you can give a popup focus:

window.popped = false;

function popwin(page, targ, specs){
	if(!window.popped){
		window.popped = true;
		window.win = window.open(page, targ, specs);
		setTimeout(function(){window.popped = false;}, 500);
	} else {
		window.win.focus();
	}
}

You may also have to put code on the page in the popup:

onload = function(){self.focus();};

This can and probably should be added in the the more advanced way of addEvent/attachEvent, or possibly be added like so at the bottom of the page in the popup:

<script type="text/javascript">
self.focus();
</script>

In any case, Chrome, Safari, and Opera all ignore this anyway. And according to standards, that's the correct thing to do (focus is only required to apply to form elements, link, and area tags, possibly iframe, but I don't think so). IE and Firefox both still allow it though. At least the last time I checked. It used to be default in all browsers.

[molendijk]

I already had some focus lines in my script. They work in every modern browser, even without lines in the popup.
Arie.

[jscheuer1]

That's not been my experience. But I haven't gone over your code at all. If it works, then it's your answer.

My thinking on also putting it on the page in the popup is a matter of timing. The line in the script that launches the popup might come too soon and the popup could lose focus again. If the popup itself takes focus onload, that would presumably be later.