You don't need a Crystal Ball
Find Files without a crystal ball.

to Search for Files
SearchWin Home
Article Home
Web Forms
Borderless Windows
Cookies-Part One
Cookies-Part Two
About Span and Div.
Using CSS-Part 1
Using CSS-Part 2
Using CSS-Part 3
About DOCTYPE
Tables With XML
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Opening Borderless Secondary Browser Windows

Welcome to the first round of Web Page Corner - a place to share web page tips, tricks, ideas, how to's and anecdotes for shareware developers who maintain their own web pages. The topics discussed here are largely based on questions and suggestions presented in the ASP.Members news group. I would like to encourage anyone who has a question or topic suggestion to post to the news group or to email me.

This issue's topic is Opening Borderless HTML Windows.

I'm going to do a quick sidestep around the debate of the appropriateness of opening such windows as I think that is a matter for each web master to decide for their web pages. I think we've all stumbled on web sites who's use of this technique to open multiple windows and AD's is totally obnoxious. And some sites who's use is tastefully done, helpful and enhances the main web page that is open. I.M.H.O. two fundamental characteristics of a good use of this technique include: 1) the link should clearly indicate it opens a 'help / information' window and 2) the 'help / information window' provides a clear way to close itself. The example I discuss later demonstrates both of these characteristics.

In The Beginning ...

there was HTML (1st version I saw was 2.0 ??was there a 1.0??) - a markup language who's interpretation by various web browser was rather fast & loose. To further the confusion, browsers often introduced their own tags and elements independent of the html specification. Today, html is at ver. 4.01 ( http://www.w3.org/TR/REC-html40/ ), and is a sophisticated and powerful document model. Today, web browser's conformity to this model is also greatly improved and there are fewer private tags and elements. In addition to the actual html stuff, through use of a scripting language, browsers allow us to manipulate the framework that displays and interprets html. Scripting provides us with a web page object model. I mention this because recognizing this model and that a browser is an interpreter of that model has a lot to do with how to open another window. It also figures into some of Web Page Corner's future topics.

The Object Model - JavaScript's perspective

The basic objects of our web page model are:

navigator (the browser)
-- window (a visible instance of the browser)
-- -- document (the html document opened in this window)
-- -- -- all of the elements of the html document model (this browser supports)

(yes - there's more to the model but this is all we need for now)

As with all O.O.P. stuff each of the objects has various properties, methods, and events.

Now I'm sure some readers are thinking, 'yeah - of course, what's your point???'.

I started doing web pages with a list of html tags and using notepad as an editor. Later I 'advanced' to FLexEd32 which I thought was pretty neat because the editor had the html tags & their attributes built in. This served as my basis for thinking about web pages. Even after I started using Front Page my mental framework was still back in the 'tags era'. I didn't realize for some time that I was missing "worlds" about doing web pages - that html was one piece (object) of a collection, all of which could be manipulated. Understanding this object model allows us to do all sorts of interesting things with web pages: opening windows, DHTML, style sheets, maintaining cookies & "state" information to mention just a few.

The Window Object

Having said all that, it's probably obvious that we open a new window by using the window object - and it's open method: window.open(). Since we are creating an 'object', we can also specify it's properties (also know as window 'features') - how big it is, whether it has toolbars, statusbar, scroll bars, is re-sizable and so forth. There are a number of window properties and of course some variations between browsers. The ones I mention (as far as I can tell!) are common to all version 4+ browsers.

JavaScript in Web Pages

From time to time I've heard web page authors make comments about not using JavaScript in web pages because of compatibility issues. We've all visited pages with the infamous JavaScript error. Sometimes out of curiosity, I use the 'View Source' function of my browser to take a look at such pages. Most often the associated script is so complex I can't make head nor tails of it. I can't recall ever seeing a page with an error that didn't have some really involved script. I mention this because I don't believe these error pages are a good reason to shy away from using JavaScript. We each visit dozens of pages using script most often without even knowing it - because it does work.

My theory is as long as I use the K.I.S.S. model, the script I write & use will be fine. For those not familiar, the KISS model is 'Keep It Simple, Stupid' - many of the problems I have with my code are because I've stupidly not kept it simple when simple would have served.

I think we also need to keep in mind that some users will have their browser's scripting disabled . That means anything we've scripted is plain ignored, as though it isn't even there. For the open window example it's kind of a ‘so what' in that the information page is an ‘extra'. If the use of script is in some sense important or vital to a page, the page should detect scripting settings and let the user know that page will not work.


In-line script .vs. defined functions

JavaScript in a web page is pretty flexible - some might argue a little too flexible. Script can be formally declared in the <HEAD> section of a web page in the form of variables and functions. It can also be use 'on the fly' intermingled with html code. In general, I think formal declaration makes for best practice. It's cleaner and easier to debug. It also makes it possible to set up a JavaScript page that can be "included" in web pages allowing functions you've written to be shared among your web pages. There are a couple JavaScript events who's use 'on the fly' is both practical and clean. For instance, writing to the browser's status bar with onMouseOver & onMouseOut events can be used very effectively this way.


Description of the code below the article

The example shows an window.open example that has these characteristics: When the user moves the mouse over the link that will open the window, the browsers status bar tells them that will happen. Two window.open examples are provided. One shows using a function called from the href attribute of an anchor tag to open a 'big' window, the other opens a 'small' window. Clicking the links open two styles of windows: one a borderless information window, the other a default window. I've written the function so I can specify which window style to use and I pass the URL of the page I want opened. The new window includes a clearly identified way to 'close me'. In the ‘information page', I use an anchor's onClick event to close the window - rather that use an anchor, you could use a image. I use the onMouseOver and onMouseOut events of the anchor tags to display a message the browsers status bar that tells the user what happens when the links are clicked.

There are a lot of possible variations of this example depending on how you set up the windows properties. The are also other types of windows that can be opened, such as Modal windows, popup windows and Windows help files. These are more complicated to use because of variations of the calls with different browsers and different versions of browsers.

Error checking

I've included error checking in this script example that keeps the script from opening duplicate windows, from trying to close a window that hasn't been opened, and from accessing non-existent object properties. As a general rule, error checking is good practice, especially if scripting objects. The method I've used is only one way of doing this - there are other techniques.

For more information and other examples see:
Scripting ---
http://msdn.microsoft.com/scripting/
http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html
http://www.webreference.com/

html ---
http://p2p.wrox.com/content/html4db/
http://www.htmlhelp.com/

 

------------ Web Page Code ---------------

<!-- The Web Page that Opens Information Windows -->
<!-- Start here to Cut & Paste the first web page -->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Open Window Samples</title>

<SCRIPT>
<!-- hide script from old browsers
// a function to open a window where the window type and destination page are
// passed by the caller
// type is either 'big' or 'small'
// dest contains the URL to open
// mysample will contain the window object after the open call
// this object could be used in other script to manipulate the window object
// this sample will open one window or the other - but not both
//
var mysample
function fnOpen(type,dest){
// first check to see if the window was closed from the information window
if (mysample != null) {
if (mysample.closed == true ) {mysample = null;}
}
// and set it to null if it was closed so it can be re-opened
if (type=="big")
{
if (mysample == null) {
mysample=window.open(dest);
}
//
// open a window with no attributes specified = whatever the users default browser window setting currently are
}

if (type=="small")
{
// make sure the window is not already opened - keeps multiple windows from opening
if (mysample == null) {
mysample=window.open(dest,null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no");
}
//
// Other properties (features) include: top, left, directories, channelmode, fullscreen
// Syntax:
// oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace] )
}
}
// mysample is a window object -
function fnClose(){
// make sure the window is opened before trying to close it
if (mysample != null) {
mysample.close();
// this lets the user reopen the window if they wish; mysample still contains data after closing it
mysample = null;
}
}
// -->
</SCRIPT>
</head>

<body>
<p>This&nbsp; sample page shows several examples of opening windows.</p>
<p> everyone knows about
<!-- the 1st uses the href tag to call the script & open a 'big' sindow -->
<a href="JavaScript:fnOpen('big','sample.htm')"
onMouseOver="self.status='Click Here for Definition'; return true;"
onMouseOut="self.status=''; return true;"> whats-a-ma-jigs
</a> yada-yada - Open a Big Window
</p>
<p> everyone knows about
<!-- the 1st uses the href tag to call the script & open a 'small' sindow -->

<a href="JavaScript:fnOpen('small','sample.htm')"
onMouseOver="self.status='Click Here for Definition'; return true;"
onMouseOut="self.status=''; return true;"> whats-a-ma-jigs
</a> yada-yada - Open a Small Window
</p>

<p> We can also <a href="JavaScript:fnClose();"
onMouseOver="self.status='Click Here to close the window'; return true;"
onMouseOut="self.status=''; return true;"> whats-a-ma-jigs close the window
</a> from the
page that opened it.
</p>

</body>

</html>
<!-- End of first web page -->


<!-- Start of Information Page -->
<!-- Begin here to Cut and Paste -->

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">


<script>
<!-- hide script from old browsers
function fnClose(){
window.close();
}
// -->
</SCRIPT>

</head>

<body>
<h1>This is a Sample</h1>
<h2>Opened in a 'definition' Window</h2>


<p>
<!-- this demonstrates using the anchor tags onClick event to call a javascript function -->
<!-- the href attribute is required even if not used -->
<!-- don't use onClick to open new windows - it does funny things to the windows objects -->
<a href="" onclick="fnClose()"
onMouseOver="self.status='Click Here to close this window'; return true;"
onMouseOut="self.status=''; return true;"> Close Me
</a>
</p>


<p>&nbsp;</p>
</body>

</html>
<!-- End of information web page -->