Yet another collection of short, simple JavaScripts that do various useful things.
Pre-Load Images
If your page uses a lot of image rollovers, you will want to pre-load the "rolled-over" images so there will be no time lag between the first image being changed to the second image.
Source:
<div style="display:none">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://www.yoursite.com/images/image001.jpg",
"http://www.yoursite.com/images/image002.jpg",
"http://www.yoursite.com/images/image003.jpg"
)
//-->
</script>
</div>
Web page:
Nothing will be displayed on the web page because the images are pre-loaded into a div that is set to display:none.
This script can be placed anywhere in the body of your HTML doc.
Write Today's Date:
Source:
<div style="font: normal 14px/18px 'trebuchet ms', sans-serif">
<script language="JavaScript">
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(month + "/" + day + "/" + year);
</script>
</div>
Interactive Div
This one is useful for creating buttons or providing a larger target area for the user's cursor.
Source:
<div onmouseover="style.backgroundColor='#fff';" onmouseout="style.backgroundColor='#fed';" onclick="alert('Thanks for clicking.');" style="cursor:pointer; border: #789 solid 1px; padding: 30px; background: #fed; margin: 20px 20px 20px 20px; ">Click anywhere in this div to pop up an alert.</div>
<div onmouseover="style.backgroundColor='#fff';" onmouseout="style.backgroundColor='#def';" onclick="top.location.href='http://www.re-vision.com/webwork';" style="cursor:pointer; border: #789 solid 1px; padding: 30px; background: #def; margin: 20px 20px 20px 20px; ">Click anywhere in this div to load the Webwork Table of Contents.</div>
Web page:
Click anywhere in this div to pop up an alert.
Click anywhere in this div to load the Webwork Table of Contents.
"Mad-Libs" JavaScript Games
The Mad-Libs party game is one where words are collected to fill in the blanks in a pre-written story which is then read aloud. The results are (with luck) funny. Originally done with paper and pencil, Mad-Libs are well-suited to Javascript because of its ability to gather data from a form and present it back in whatever format the script-writer wants.
Here's a simple example based on Marc Antony's famous speech:
Head:
<script language="JavaScript">
function create(form) {
var start="go";
if (start=="go") {
text = ("<head><title>Marc Antony's Address from Julius Caesar</title>");
text += ("<style type='text/css' media='screen'> body { padding:20px } </style> ");
text += ("<p style='font: bold 14px/18px sans-serif; '> Marc Antony's Address from Act III, Scene II of <e>Julius Caesar</em> </p>");
text += ("<p style='font: normal 14px/18px sans-serif; '> Friends, Romans, " +form.input1.value+ " lend me your " +form.input2.value+ "... </p>");
text += ("<br /><br /><input type='button' value='close window' onclick='top.window.close()'>");
msgWindow=window.open("","displayWindow","toolbar=no,width=250,
height=200,directories=no,status=no,scrollbars=no,resize=no,menubar=no")
msgWindow.document.write(text)
msgWindow.document.close()
}
}
</script>
Body:
<form>
Plural Noun: <input type="text" name="input1" size=20>
Part of body (plural): <input type="text" name="input2" size=20>
<input type="button" value="Generate story" onclick="create(this.form)">
</form>
Click here for a more complex example.