Tactical Panda Websites - Print Button and Password Protection Scripts
 
  Home Page •  About Us •  Search •  Contact Us •  Bookmark  
"Helping you to help yourself to the internet!"  
 
Contents
Colour
Forms
Free Stuff
Graphics
HTML
Javascripts
Cascading Style Sheets
Tables
Website Templates
 
In Brief...
 
Javascripts (6)

More about Javascripts

Print Button
Ever wanted a 'print this page' button somwehere on your site? Here's how you do it, and here is an example:

I bet you clicked it didn't you? Can't resist a button? Anyway, as you will have noticed the default print window popped up and you were invited to do the necessary. Hopefully you clicked 'Cancel' otherwise your printer is using a huge amount of ink printing all the red parts of this page!

Back to the script. You will need (as usual) a section of script for the <HEAD> section and one for the <BODY>, let's start with the <HEAD> - copy and paste the following:

<script language="JavaScript">
<!-- hiding
function varitext(text){
text=document
print(text)
}
// End -->
</script>

Then you should copy and paste the following few lines into the <BODY> of your page where you want the button to appear:

<div align="center">
<form>
<input name="print" type="button" value="Print this Document!" onclick="varitext()">
</form>
</div>

You can vary the wording from 'Print this document' to read whatever you want. That was easy!

Top

Password Protection
Everyone and his wife knows that using Javascript is not the most secure ways of password protecting a page. However, if you want to just keep out the casual observer, then it works really well. Many of my clients use a simple Javascript coding simply because their website hosting company ask for more money for hosting CGI scipts, or don't do them at all.

Anyway, for you and me, this script works very well. It looks complicated, but it's not a problem - honestly! The secret is that the password is the name of the page you are going to. So, if the page is called (for example) 'contact.htm' then the password is contact.

Have a go at this one and see how it works, remember the password is contact and the username is password, you should click on the 'back' button of your browser to get back here!

Staff only area
Username:
Password:
 
Now have a go at trying to login-in without entering a password or username. An alert pops up and tells you you got it wrong. Here's how it works.

First of all you will need to place the following into the <HEAD> section of you page:

<SCRIPT LANGUAGE="JavaScript">
<!--Begin
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if(username=="contact"&&password=="password"){
window.location="contact.htm";done=1;}
if(username=="contact2"&&password=="password"){
window.location="contact.htm";done=1;}
if(username=="contact3"&&password=="password"){
window.location="contact.htm";done=1;}
if(done==0){alert("Oops!\nYou got that wrong!\nPlease try again with a valid password or username\.\nIf you don\'t have one\, please e\.mail me for a password and username");}
}
//End-->
</script>

Done that? You will have noticed that I have coloured the variables (the bits you can change to read whatever you want) in red.

IMPORTANT! When you write an alert message, and you want the message to move onto a second line (like I have), you must place the backslash (\) followed by the letter n at the start of the next line otherwise it simply won't work!

In other words it looks like this: blah blah\nblah blah.

This also applies if you are using a comma (,) full-stop (.) (or period mark) and an apostrophe (') mark in the sentence.

You don't need a long message like I have used, you can make it as short or long as you want. But bear in mind the reader gets bored and only scans alert messages, so keep it short if you can.

Another thing you will no doubt have noticed is that this script has multiple logins and usernames. This way you can either change the destination page to reflect where you want the visitor to go to, or keep them all the same, as I have. You can also change the password and/or the username to reflect this too. It's up to you.

Back to the script (at last!). Place the following in the <BODY> where you want the login to appear:

<center><form name="login">
<table width="225" border="3" bordercolor="#000080" cellspacing="0" cellpadding="3">
<tr><td colspan="2"><center><font size="2"><b>Staff only area</b></font></center></td></tr>
<tr><td>Username:</td><td><input type="text" name="username"></td></tr>
<tr><td>Password:/td><td><input type="password" name="password"></td></tr>
<tr><td colspan="2" align="center"><input type="button" value="Login" onClick="Login()" onfocus="this.blur()"> <input type="reset" onfocus="this.blur()"></td></tr>
</table></form></center>

Once again I have highlighted the variables in red so you can make it look and read how you want.

How about a nice blending image slideshow script? Click here!

Top

[1] [2] [3] [4] [5] [6] [7] [8]

<<< Previous page
 
Home Page •  About Us •  Search •  Contact Us •  Bookmark
© Copyright 2004 Tactical Panda