Site Development
Downloads
Help!!
Home
The Persistent WindowA persistent window is one that demands the viewer's attention. It cannot be resized, moved, or blurred (put into the background beneath other browser windows). Try out this example. Try moving the example. Try resizing it or getting this original, parent window to focus above it (blurring the child window). Won't work. These annoying ditties are a mainstay of many advertising pop ups. They have a useful role if you've got a genuine warning or some news you must have the viewer see. I've coded this window so you can easily close it without further distractions. I'd suggest you do so before continuing. Preventing BlurringBlurring occurs when the viewer clicks on another browser window and puts the current window in the background (beneath the active window). The active window is "focused" and the inactive window(s) are blurred. To prevent a window from being blurred, you must use the "onBlur" event in the window you want to keep open. This event is coded in the <body> tag. It is triggered anytime the window loses focus. Once the onBlur event is detected, a simple "window.focus()" or "self.focus()" JavaScript statement will refocus the window and keep it active and on top of the heap.Here's the simple working code for this: <body onBlur="window.focus()"> Preventing ResizingPreventing the viewer from resizing your window is a little more involved than focusing. The JavaScript event used is "onResize" and it is coded in the <body> tag as well. The onResize event is triggered whenever a viewer tries to resize the window with either the "restore" button or by dragging a corner or side. Once onResize is triggered, you just run JavaScript's "window.resizeTo(width in pixels, height in pixels)". Here's the working code: <body onBlur="window.focus()" onResize="window.resizeTo(200,200)"> Preventing MovingPreventing the viewer from moving your window requires the use of "setInterval()" as in the previous lesson. The setInterval() statement will run a JavaScript over and over at a set interval of time. What we need to do is to use setInterval() to continually position the window where we want it. The window is continually positioned using "window.moveTo()" We want this setInterval to begin as soon as the persistent window loads, so we can either use a function and onLoad event to hold the setInterval(), or just code the setInterval() outside of a function right between the <script> tags. In the example I've chosen the latter method of coding setInterval() outside of a function so the Interval begins just as soon as the page loads.
<script language="JavaScript"> We still have to code the "moveback()" function. That's the function that will reposition the window. Notice that I set an interval of 250 milliseconds (a quarter of a second). Very short intervals can cause "flickering". Long intervals may not accurately reposition the window before it has been moved. The "moveback()" function merely uses "window.moveTo()" to keep putting the window back in place whether it's been moved or not. You could add an IF statement to determine if the window has actually been moved, but it's not necessary since the result -- keeping the window in place -- is the same regardless. Here's the final code for keeping your window in place:
<script language="JavaScript"> Now the persistent window will be placed at 200,300 every quarter second. This has the effect of making the window impossible to drag to another position. "Behind The Scenes" WindowThis effect has become very popular with pop up advertisements. What happens is that a window opens in the background -- beneath the window you're viewing. Often the viewer doesn't even know the window is there until the main window is closed. I'm not sure if this effect is to annoy, like most marketing, or an ill attempt at being viewer-friendly. Either way, the window is coded by using the "onFocus" event. The onFocus event is the opposite of the onBlur event. It's triggered whenever you bring a window to the top of other windows making it the active window. An onFocus event is coded in the <body> tag. It will run a "window.blur()" or "self.blur()" JavaScript statement whenever run. Here's the working code: <body onFocus="window.blur()"> The above will cause the window to blur as the <body> tag is read by the browser. As an alternative, blurring can be coded in the page opening the "behind the scenes" window, the parent window. It would be coded after the "window.open()" statement. Summary & Exercises
Make a window that opens in the background. Note that they often pop up focused for a split second before being blurred. Don't sweat this. Try to make a window that will jump to another position if the mouse hovers over it (<body onMouseOver="">). That is really annoying.
|
You can make a window that stays on top of other browser windows by using the onBlur event and the "window.focus()" statement
To Next Advanced JavaScript Lesson
Back To Advanced JavaScript Index