I
decided to let everyone that has enjoyed the pages that I have put together
to view my code and add a some of the neat tricks on my own page to yours.
S
o I guess I 'll start by telling you that all you need is Window's
Notepad to make any of the scripts work. Editors will not always
copy the code correctly and there may be errors if scripts are not edited
in notepad. Ok....here is a list of all of the neat things I have
done and you can just copy the code!!! Use the quick links to browse the
files.
Mouse Over Images
You may wonder how the heck can a button change when the mouse goes
over it. Well, it is very simple: use the mouseover command.
The menu to the left is a good example of this. So all you have to
do are these things.
Make two images. The first image will be the one that is always displayed
on your screen and the second image is the one that you want to appear
when your mouse goes over it. Be careful to ensure that their dimensions
are alike when you create the image. I like to use Paint Shop Pro.
Be sure to save the images into the same location as your web page that
you are placing the script in. ie...C:\Mydocuments
Copy this portion of the code into the top of
your page, and copy this code into the areas that
you would like images to appear. All you have to do is change the
variables that are in italics to your specifications. If you want
to add additional images, all you have to do is copy and add the portions
of code that are in bold. The image definitions are imageon/off 1,2,3,4.....and
the tags where it says <a href>.
Page Update
You can have your page automatically show when its last update was by
adding this script. Simply copy this code
into your web page.
Password Using Forms
Protect your pages with a password that is nearly impossible to crack. Sorry
this script currently only works for IE users. Here is a demonstration (the password is "dude"):
To make this work do the following things:
Create a page that visitors go to when the password is wrong, and call
it "invalid.htm".
Paste this code into a new notepad document.
Change the name for the correct page to whatever page you want visitors
to see if the password is correct. Save this page as "script.js",
and select All Files.
If you would like to have the screen fade in and out when a page is
loaded, like this page. Simply copy this code
and place it near the top of your document, below the </head> tag.
Load Frames according to Browser
If your frames pages look different in Navigator and Explorer, get
around it using this script. You only change
the properties in Italics. Then on your frames page the only html
that you need to define after the </head> is the pages themselves.
i.e.
<FRAME NAME="_top" SRC="yourframename1.htm">
<FRAME NAME="Main" SRC="yourframename2.htm">
Determine if a frames page is actually being viewed in frames
Sometimes a frames page is indexed by a search engine to itself, when
it has to be viewed in frames. Well this
script will automatically take a person to the main frames page, if
the page is not currently in frames. All you have to do is modify
the text that is in italics to change the location to the frames page that
the person is being re-directed.
You may wonder why load a new page? Well, what if you had a page
called "mypage.htm," and you renamed it "newpage.htm". Someone may
have bookmarked the old page, and when they go to the old page it is not
there. So in order to redirect the person simply
place this code in the body of the page.
If you would like to tell a viewer something when viewing a particular
page, use this script to bring up a message type
box.
Drop down text box to load into a framed page
In order for this to work you have to place the drop down box in the
frame that you want to have links, buttons, or whatever. Once an option
is selected the page will load into the dependent frame (usually the biggest
frame) and leave the parent or independent frame intact.
Here is what you have to do:
Build a frames page that has two pages within it, and name the dependent
frame "Main"
Place this code into the parent or independent
frame, and change the links to suit your page (links in italics).
Place this code in the area that you would
like your drop down box positioned. Change the names that you will
see in the box by replacing the text in italics. Note that you can
add to the list, and names so long as there are an equal number of links
for each of the names. Also the first name is reserved for the title
of the box.
Drop down box that goes to another web page
Simple change the links, and their names (I have placed them in italics)
in order to use this script. Paste this portion
underneath the </head> tag. Then, paste
this portion of the script wherever you want the box to be viewed.
Navigation buttons
Here is an example of how you can use javascripts to load a page:
Copy this script to the place that you would like to place the button,
and change the text in italics to suit your needs. Make sure that
the page you want to link to is in the same directory as the page with
this script.
If you are placing this on a frame page, replace location.href with
parent.framename.location.
If you want to call a javascript that is on the current page enter this:
OnClick="javascriptfunctionname()" into the script.
Or, you can display an alert on the push of a button. Here is an example:
You probably see a watermark in the lower right hand corner of the page
right now. How the hell did I do it? To use this watermark follow these instructions:
If you would like to have a calculator on your page, you can copy this
scientific calculator that I have found, and modified for my own purposes.
Simply paste this code into the head of the document.
Then paste this portion into the body of your page.
If you want your visitors to have access to a notepad that saves
information to their hard drive that is specific to your site, this is
a cool script to use. Simply copy this code
into its own web page and you are set. Then link to the page simply
by using this html to open a new window:
You can also use the above script to open a window for any link you
desire.
Write text into a document based on brower type
Here is an example:
If you want your visitors to to see text or html features based on
browser id, Simply copy this code into the area you want it to appear
and change the text within the (' ') tags. You can add any html, or text
you want...cool huh?
I hope that these scripts will come in handy for you, as they have for
me :). If you are looking for that killer link, I totally recommend Builder.com
as it has the coolest tools for designing your own scripts. Enjoy!
Copy this code into the top of your html page, just below the </head> document.
<script>
if (document.images) {
image1on = new Image(); image1on.src = "aboutb.gif";
image2on = new Image(); image2on.src = "excelb.gif";
image1off = new Image(); image1off.src = "about.gif";
image2off = new Image(); image2off.src = "excel.gif";
}
function turnOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "on.src");
}
}
function turnOff(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "off.src");
}
}
Copy this code anywhere you would like the field to appear:
<form name="forma">
<input name="passwordinput" type="text">
<input type="button" value="Verify Password" onClick="verify()">
</form>
<script LANGUAGE="Javascript" SRC="script1.js">
Copy this into the area you want the box to be viewed:
<form name="form1">
<select name="menu1" onChange="go(this, 1, false)">
<option>Name of drop down box to whatever you want <option>Change this to the name you want to appear for the first
link <option>second link name <option>third link name <option>fourth link name <option>fifth link name </select>
</form>
Copy this to the area you would like to see the box appear. Be sure to change the names of your links so
that they match correctly. The first name is reserved for the title
that appears by default.
Simply paste this code wherever you want to a button to display an alert:
<form>
<input type = "button" value="Button Title" OnClick ="alert('Here
you type your text and you can place here whatever warning you want!!!!!!!')">
</form>
markW = 39; // enter how
many pixels wide your image is markH = 64; // enter
how many pixels high your image is markX = 100; // percent right
markY = 100; // percent down
markRefresh = 20; // milliseconds
// set common object reference
if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark;
wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; // Nav DOM flag
function setVals() {
barW = 0; // scrollbar compensation for PC Nav
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth - markW)-barW) * (markX/100);
posY = ((innerHeight - markH)-barH) * (markY/100);
}
Paste everything into a new blank notepad document and Save As "notepad.htm"
<HTML>
<HEAD>
<TITLE>notepad</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function nameDefined(c,n) {
var s=removeBlanks(c)
var pairs=s.split(";")
for(var i=0;i<pairs.length;++i) {
var pairSplit=pairs[i].split("=")
if(pairSplit[0]==n) return true
}
return false
}
function removeBlanks(s) {
var temp=""
for(var i=0;i<s.length;++i) {
var c=s.charAt(i)
if(c!=" ") temp += c
}
return temp
}
function getCookieValue(c,n) {
var s=removeBlanks(c)
var pairs=s.split(";")
for(var i=0;i<pairs.length;++i) {
var pairSplit=pairs[i].split("=")
if(pairSplit[0]==n) return pairSplit[1]
}
return ""
}
<!--
// -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!--
function loadNotes() {
var cookie=document.cookie
if(nameDefined(cookie,"Notes")) {
notes=getCookieValue(cookie,"Notes")
notes=decode(notes)
}else notes=""
document.forms[0].notesArea.value=notes
}
function saveNotes() {
notes=window.document.forms[0].notesArea.value
notes=encode(notes)
var newCookie = "Notes="+notes+"; expires="
newCookie += "Tuesday, 08-Nov-10 23:12:40 GMT"
document.cookie=newCookie
}
function encode(s) {
t=""
for(var i=0;i<s.length;++i) {
ch=s.charAt(i)
if(ch=="/") t += "//"
else if(ch==" ") t += "/b"
else if(ch==",") t += "/."
else if(ch==";") t += "/:"
else if(ch=="\n") t += "/n"
else if(ch=="\r") t += "/r"
else if(ch=="\t") t += "/t"
else if(ch=="\b") t += "/b"
else t += ch
}
return t
}
function decode(s) {
// Decode the encoded cookie value
t=""
if(s==null) return t
for(var i=0;i<s.length;++i) {
var ch=s.charAt(i)
if(ch=="/") {
++i
if(i</SCRIPT>
</HEAD>
<BODY>
<FORM>
<P>Write some notes down that you may want to use at a later date.
These notes will be saved as a cookie on your hard drive.
</P>
<CENTER>
<INPUT NAME="save" TYPE="BUTTON" VALUE="Save Notes Now!" ONCLICK="saveNotes()">
</CENTER>
<TEXTAREA NAME="notesArea" ROWS="12" COLS="45">
</FORM>
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
</BODY>
</HTML>
Copy this script to the area that you would like and change the text within the (' ') tags only.
<script>
bVer = parseInt( navigator.appVersion );
if( navigator.appName == "Netscape" && bVer >= 3 )
{
document.write ('You are using your Netscape Verion ' + bVer);
document.write ('<P><HR>Type text or html in right here!</P>');
document.write ('<P><img src="document.gif"></P>');
}
else if( navigator.appName == "Microsoft Internet Explorer" && bVer >= 4)
{
document.write ('You have Internet Explorer ' + bVer)
document.write ('<P><HR>Type text or html in right here!</P>');
document.write ('<P><img src="clip.gif"></P>');
}
else
document.write ('I have now idea what browser you are using!!!')
</script>
