empty

The Gate Keeper
v1.0
by Joe Barta
PROFESSIONAL WEB DESIGN

The Gate Keeper is a little bit of JavaScript code that you can use to restrict access to some or all of your web pages without the need for any CGI scripting. Access is via password like so...

Click here for some real cool stuff!!

Unless you know the password, you can't access the document. Actually the password is the name of the document. If you make your password red_rose, then just name the target document red_rose.html. Easy!

By the way, the password for the previous example is serpico. Now that you see what it does, I'll show you how to easily add it to your pages. But, before I do, let me make something absolutely clear... this is a very low level security device. If you are a NSA employee, do not use this for hiding national secrets. If you are the President of MasterCard, do not put everyone's credit card numbers behind this thing. However, if you're a regular guy that has a page or two that you don't want every Tom, Dick and BlowHard visiting, then this should safely do the trick.


Here is how to add it to your pages:

What I'll do is have you build a small set of pages from scratch. You can then incorporate the appropriate elements into your pages.

(Note: Since this uses documents with the file extension .html, users of Windows3.x might have a little trouble. You might have to make a few alterations to the script.)

There are 3 documents that we must concern ourselves with...

   1. The starting page. (the one with the link)
   2. The Gate Keeper window.
   3. The target document.

...and one image. We'll use this one for starters. Create a new folder somewhere and save the following image as keeper.gif
keeper.gif

Next we'll make the starting page. Copy the following and save it as index.html

<HTML>
<HEAD>
<TITLE>My Page</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>


Then add the following to the HEAD tag. This is the JavaScript that opens the GateKeeper window when you click on the link.

<HTML>
<HEAD>
<TITLE>My Page</TITLE>

<SCRIPT LANGUAGE="javascript">
<!--- Hide from tired old browsers

var nifty_little_window = null;
function gateKeeper() {
nifty_little_window = window.open('gatekeep.html', 'theKeeper', 'width=350,height=200,resizable=1');
}

// End hiding --->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>


Now add the link:

<HTML>
<HEAD>
<TITLE>My Page</TITLE>

<SCRIPT LANGUAGE="javascript">
<!--- Hide from tired old browsers

var nifty_little_window = null;
function gateKeeper() {
nifty_little_window = window.open('gatekeep.html', 'theKeeper', 'width=350,height=200,resizable=1');
}

// End hiding --->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<A HREF="javascript:gateKeeper()">Click here</A> for some cool stuff!
</BODY>

</HTML>
That does it for the starting page. Now we'll make the document that appears in the Gate Keeper window.


Grab this document --> gatekeep.txt and save it as gatekeep.html.
(Internet Explorer users- Explorer will load this text document as a HTML document. Just save it as gatekeep.html. There are no surprises for Netscape users, it loads a text document the way it's supposed to... as a text document.)

By the way, for all you Explorer's out there who think that Internet Explorer is the best thing since Fried Rice, I spent about 1 hour writing the Gate Keeper script and another hour trying to get it to work with Explorer.

There are no modifications that you need to make to gatekeep.html.


The last thing to do is make the target document. All you need to know about this is that the password will be the name of the document. So, copy and save this as redrum.html.

<HTML>
<HEAD>
<TITLE>Da Target</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<H2 ALIGN=center>This is it!</H2>
</BODY>

</HTML>

Now load index.html in your browser. The password will be redrum.

I've included these 3 docs (and one image) in a self-contained zipfile if you need it.

Also there are 3 more images that you can use. Just pick the one you want and save it as keeper.gif. Of course you can make your own but be sure to make it at least 356 x 238. Why that size since we are only opening a window that is 350 x 200? Because when you ask Internet Explorer to open a window 350 x 200 it opens a window 346 x 228. Hmmm. We must again take Explorer's "issues" into consideration. So, I took 346 x 228, added 10 to each (to be on the safe side) and that is why the image needs to be 356 x 238.

If any of you out there in Internet Land make an image for the Gate Keeper that you would like to share with the world, send it to me (along with your homepage URL) and I'll post it with the others.

There is one more thing that you must make sure of or the whole thing falls flat on it's face. Wherever you keep redrum.html, you must also have a document named index.html. If you don't, whatever is in that directory is easy pickins. Once more because this is very important... Wherever you keep redrum.html, you must also have a document named index.html. I won't go into details, but if you know what I'm talking about then you know what I'm talking about.

One last thing before I wrap this up. It occurs to me that there might be a very low key individual out there who would rather that the Gate Keeper didn't have a picture or anything so I've made a utilitarian version for y'all.

...That's all folks! Have fun!


PROFESSIONAL WEB DESIGN