 |
 |
|
|
||
Today I will show you how to integrate the content of a popup into the JavaScript code itself. No URL to a separate web page file is required. Loading the popup can be faster when the content is integrated into the JavaScript code instead of requiring the browser to retrieve the content from somewhere else. I'll show you how to launch the popup automatically, either immediately or after a specific delay. And I'll show you how to let your visitor launch the popup with a link. Do you maybe not really care how it works and just want to get some popup code to copy and paste? Well, WillMaster Possibilities subscribers have access to Master Pop-Window Generator through the "Subscribers Only" section at the web site. Master Pop-Window Generator is an easy to use, sophisticated JavaScript code generator for popups and pop-unders. Popup window content can be automatically integrated into the code or a URL can be provided for the content. Specify your preferences on the form and click the button. That's all there's to it. Master Pop-Window Generator is at http://willmaster.com/possibilities/members/ A comprehensive example of content integrated with JavaScript code for a popup window is near the end of this article. How does it work? Instead of a URL in the window.open() function, a null string is used. Then, writeln() is used to print the content to the popup window. writeln() uses the value returned by the window.open() function so the browser knows it should print to the popup instead of to the current window. Something like this:
<script language="JavaScript">
<!-- Copyright 2001 Bontrager Connection, LLC
var properties = 'height=100,width=150';
var W = window.open("","",properties);
W.document.writeln('<html><body>');
W.document.writeln('H E L L O');
W.document.writeln('</body></html>');
//-->
</script>
In the example at the end of this article, you'll notice several lines defining the popup's properties — whether or not the new window shall be resizable, the new window's height, whether scrollbars are okay, and so forth. These properties are presented in the "Popup Basics" article, which should be read if you're unsure about the subject. The article is at http://willmaster.com/a/11/pl.pl?pb Probably the easiest way to create the ...writeln... lines (other then using Master Pop-Window Generator) is to first create your web page. Once your page is created, do these six steps to the source code, in order:
Now, your web page source code is ready to place into the JavaScript code below the line with the window.open() function. In the example at the end of this article, at the third line from the bottom, you'll find:
setTimeout("WF()",3000);
That line causes the popup to launch after a delay of 3 seconds (3000 milliseconds). You can change that number to whatever is good for you. Or, if you prefer to launch the popup without delay, replace that line with: WF(); If you do not want the popup to launch automatically, letting your visitor click on a link instead, remove the line third from the bottom of the example ("setTimeout..."). Then, put this on your page wherever you want the link: <a href="javascript:WF()">Click me</a> You can change "Click me" to whatever you prefer. It can be any text or an image. Another option: If you prefer to launch a normal browser window instead of a popup with control of size and other properties, find the line
var W = window.open("","",properties);
in the example. Then, replace that line with:
var W = window.open("");
Here is the example:
<script language="JavaScript">
<!-- Copyright 2001 Bontrager Connection, LLC
function WF() {
var height = '150';
var width = '300';
var menubar = 'yes';
var toolbar = 'yes';
var locationbar = 'yes';
var personalbar = 'yes';
var directories = 'yes';
var statusbar = 'yes';
var scrollbars = 'yes';
var resizable = 'yes';
var properties = 'height=' + height +
',width=' + width +
',menubar=' + menubar +
',toolbar=' + toolbar +
',locationbar=' + locationbar +
',personalbar=' + personalbar +
',directories=' + directories +
',statusbar=' + statusbar +
',scrollbars=' + scrollbars +
',resizable=' + resizable;
var W = window.open("","",properties);
W.document.writeln('<html><head>');
W.document.writeln('<title>My Title</title>');
W.document.writeln('</head><body bgcolor="white">');
W.document.writeln('<p>Hello, I\'m Will.</p>');
W.document.writeln('<p>Where there is a Will, ');
W.document.writeln('there <b>is</b> a way.</p>');
W.document.writeln('<p align="center"><form>');
W.document.writeln('<input type="button" ');
W.document.writeln('onClick="window.close()" ');
W.document.writeln('value="Close Window">');
W.document.writeln('</form></p>');
W.document.writeln('</body></html>');
}
setTimeout("WF()",3000);
//-->
</script>
Popups almost always load faster when the content is integrated into the JavaScript code rather than retrieved with a URL. If the popup has many or large images, the difference might not be as dramatic. The reason the load can be faster is because there is one less file that the browser needs to retrieve. Now you know how to create your own. Oh, one more option: If you want to make a pop-under instead of a popup, put the line self.focus(); below the last ...writeln... line and above the curly brace on a line by itself. By: Will Bontrager Copyright 2001 Bontrager Connection, LLC
| ||