|
|
This lesson will outline how to make a delayed popup window using javascript. Popup
windows can be useful in displaying news etc... to the visitors of your site. However
please bear in mind that if misused it can become an annoyance to the user.
Select all (Ctrl + A) the text script INSIDE
of this text box directly below and copy it to your clipboard
(Ctrl + C).
Open your webpage that you want your popup to load in a program such as Wordpad
or Notepad and paste the above text (Ctrl + V)
in between the HEAD Tags of the document.
The head of your webpage should now look like the code directly below. Edit the
RED text only to reflect the web address on the pop up window that will be displayed.
|
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT" >
function openSpawner(url,name) {
window.open('hidden_popup.htm','popper'
,'width=10,height=10,top=5000, left=5000,scrollbars=no,location=no,
directories=no,status=no,menubar=no,toolbar=no,resizable=no');
}
</SCRIPT>
</HEAD>
|
Now choose if you would like the popup window to display when your webpage opens
or closes. If you would like the popup to load when your website is FIRST visited
copy this line into the <BODY> tag of your document.
<Body onLoad="openSpawner();self.blur()" ENTERS
Page>
If you would like the popup to load when your website is LEFT by the visitor
copy this line into the <BODY> tag of your document.
<Body unLoad="openSpawner();self.blur()" EXITS
PAGE>
Now create a page called hidden_popup.html and paste the following
in between the Body tags of the document. The body tags are what tells the
web browser what the visitor can see:
As with the Head Code, Edit only the RED for your information that
you want the script to do.
|
<script language=javascript>
//### array setup - leave this alone
var pURL = new Array();
var pName = new Array();
var pPos = new Array();
var pDelay = new Array();
var pHeight = new Array();
var pWidth = new Array();
//### configure your popups here
//### URLs of the Popup Windows you can add as many as you want
//### start with [0] and increment up by one ([1], [2], etc...)
pURL[0] = "http://www.address1.com";
pURL[1] = "http://www.address2.com";
pURL[2] = "http://www.address3.com";
pURL[3] = "http://www.address4.com";
//### Name of the Popup Windows. If you choose the same name, it will
//### load in the same window. If you add URLs above you must add
//### corresponding name below
pName[0] = "pop1";
pName[1] = "pop2";
pName[2] = "pop3";
pName[3] = "pop4";
//### Height of popup
//### If you add URLs above you must add corresponding height in pixels below
pHeight[0] = "200";
pHeight[1] = "500";
pHeight[2] = "800";
pHeight[3] = "300";
//### Width of popup
//### If you add URLs above you must add corresponding width in pixels below
pWidth[0] = "600";
pWidth[2] = "700";
pWidth[3] = "300";
//###position of popup. Options: center, random, base (0,0)
//### If you add URLs above you must add corresponding position below
pPos[0] = "center"
pPos[1] = "random"
pPos[2] = "random"
pPos[3] = "base"
//### seconds that will lapse before window pops up
//### If you add URLs above you must add corresponding delay below
pDelay[0] = "5";
pDelay[1] = "10";
pDelay[2] = "15";
pDelay[3] = "20";
//<--- don't edit any code below --->//
var win=null;
function OpenWindow(url,id,w,h,scroll,pos,t,l){
if(pos=="random"){
Left=Math.floor(Math.random()*(screen.width-w));
Top=Math.floor(Math.random()*((screen.height-h)-75));
}
if(pos=="center"){
Left=(screen.width-w)/2;
Top=(screen.height-h)/2;
}
if(pos=="base"){
Left=0;
Top=0;
}
if(pos=="absolute"){
Left=t;
Top=l;
}
set='width='+w+',height='+h+',top='+Top+',left='+Left+',scrollbars='+scroll+'
,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
mywin=window.open(url,id,set);
mywin.focus();
}
for(var npop in pURL){
var st="OpenWindow('"+pURL[npop]+"','"+pName[npop]+"',"+pWidth[npop]+",
"+pHeight[npop]+",'yes','"+pPos[npop]+"',0,0)";
setTimeout(st,pDelay[npop]*1000);
}
</script>
|
After you have embedded the Head script into your page that you want to load
your hidden popup from and after you have created your hidden popup page and
edited your information, you are ready to upload your pages!
[
Back to Website Tools and Tutorials ]
|
