Friday, August 07, 2009
How To Disappear, But Not Completely
Blog Entry #153
In response to reader curiosity about pop-under ads, Joe has written up a "So, You Want A Pop-Under Window, Huh?" tutorial presenting a short script that first opens a new window and then promptly lowers that window below the opener window:
<script type="text/javascript">
function goNewWin( ) {
TheNewWin = window.open("popunderexample.html", "TheNewpop",
"toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1");
/* Yes, the window.open( ) command can contain line breaks if they're in the right place(s)! */
TheNewWin.blur( ); }
</script>Quick deconstruction
Upon calling the goNewWin( ) function, a window.open( ) command opens a new window whose object reference is TheNewWin and that holds a popunderexample.html document. The TheNewWin window features a full complement of 'bars' (address bar, bookmarks bar, etc.), is resizable, and has the width and height of the opener window*. Subsequently, the TheNewWin window is popped under the opener window via the blur( ) method of the window object.
(*
If the strWindowFeatures parameter is used and if no size features are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window,quoting Mozilla.)
The success of the script depends on default GUI behaviors that are easy to take for granted:
(1) If more than one window is open on the screen, then only one of those windows can have focus at a given time (in theory, there's no reason why the windows couldn't be active simultaneously).
(2) When a secondary new window is opened via the File menu's New Window command or via a window.open( ) JavaScript command, focus is given to the new window (in theory, there's no reason why focus couldn't remain with the primary window).
(3) If more than one window is open on the screen and if the active window is blurred, then the window to which focus is transferred comes to the screen foreground (in theory, there's no reason why a blurred window can't remain on top of other windows - indeed, there's a strWindowFeatures alwaysRaised feature that can produce this effect).
Calling goNewWin( ) and Joe's demo
In the tutorial's "The Effect Using onLoad" section, Joe stipulates that, à la an actual pop-under ad,
[y]ou want the effect to fire as soon as the page loads...using the onload event handler in the body [element start-]tag:
<body bgcolor="white" onload="goNewWin( );">
// Alternatively, the JavaScript equivalent is:
window.onload = goNewWin;Unfortunately, pop-up blocking stops onload-triggered window.open( ) calls dead in their tracks.
For providing a script demo, Joe for whatever reason decided to forgo the onload route and instead uses a push button to trigger the goNewWin( ) function:
<center><form>
<input type="button" name="" value="click me!" onclick="goNewWin( );" />
</form></center>On my computer, clicking the button pops up and immediately blurs a new TheNewWin window when using
(a) Firefox with pop-up blocking enabled,
(b) Safari with pop-up blocking enabled, or
(c) MSIE 5.2.3, which does not have a pop-up blocking facility.
(Opera behaves somewhat differently - see below.) The TheNewWin window does not load the intended popunderexample.html document but rather a "404 - File not found" page because, in the "So, You Want A Pop-Under Window, Huh?" source, the window.open( ) strUrl pathway to the popunderexample.html file, /beyond/legacy/javascript/popunderexample.html, is incorrect. Switching the /beyond/ and /legacy/ directories gives the correct strUrl value, /legacy/beyond/javascript/popunderexample.html.
So, let's give Joe's pop-under window demo another shot, shall we?
I've delayed the blurring action via a
window.setTimeout('popunderWindow.blur( );', 500); command to make it easier to see.September 2016 Update:
Unless you're using an older browser, you probably won't see a pop-under effect either here or at Joe's tutorial - the modern OS X browsers on my computer do not execute my
popunderWindow.blur( ); command whereas only Safari executes a corresponding window.focus( ); command - this is evidently another case of browser vendors stepping in and circumscribing the GUI in response to 'marketer abuse', if you get my drift.Joe's demo and Opera
If you're using Opera and if the "Pop-ups" selection list in the Preferences pane's "General" subpane is set to Block all pop-ups
then clicking the button doesn't open a new window; rather, the following message
will appear in the lower-right-hand corner of the screen. Per its instruction, clicking the message pops up, but does not blur, the TheNewWin window holding the 404 page, which sits on top of the tutorial window and has focus.
Opera's default "Pop-ups" menu setting is actually Block unwanted pop-ups; with this option, clicking the button pops up but again does not blur the TheNewWin window.
After a bit of experimentation, I find that I can indirectly blur pop-up windows with Opera via the following procedure:
(1) Go to the Preferences pane's "Advanced" subpane. Select the Content option in the menu on the left-hand side
and then click the button.
(2) In the JavaScript Options window that opens, check the Allow raising of windows checkbox and then click the button.
(3) Close the Preferences/Content subpane and then append the following line of code to the goNewWin( ) function:
if (navigator.userAgent.indexOf("Opera") != -1) window.setTimeout("window.focus( );", 500);In this case, the TheNewWin window is effectively blurred by returning focus to the opener window via the focus( ) method of the window object.
You may be wondering, "What about Opera's Allow lowering of windows JavaScript option? Can you use that option along with the TheNewWin.blur( ) command to blur the TheNewWin window?" I tried that: it didn't work.
We'll get to HTML Goodies' "The Same Size" tutorial next time.
reptile7
- posted by A. Peak @ 2:56 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)