<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- js.html - created by Eric Pence -->
<html>
<head>
<title>JavaScript - PENCELAND.com</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="penceland.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="viewport" content="initial-scale=1.0">
<style type="text/css">
a.idxmenu:link {font-family:arial;font-size:14px;font-weight: bold; color:white; text-decoration: underline;}
a.idxmenu:visited {font-family:arial;font-size:14px;font-weight: bold; color:white; text-decoration: underline;}
a.idxmenu:active {font-family:arial;font-size:14px;font-weight: bold; color:white; text-decoration: underline;}
a.idxmenu:hover {font-family:arial;font-size:14px;font-weight: bold; color:#8CDD81; text-decoration: underline; background-color: transparent;}
</style>
<!-- Determine the level of JavaScript supported by the browser. -->
<script type="text/javascript" language="JavaScript"> var jslevel = "1.0"</script>
<script type="text/javascript" language="JavaScript1.1"> jslevel = "1.1"</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
<!--
// Preload images
if (jslevel >= "1.1") {
homeOn = new Image(100,20); homeOn.src = "images/homei.gif";
homeOff = new Image(100,20); homeOff.src = "images/homeo.gif";
gbar = new Image(800,6); gbar.src = "images/grnbar1.gif";
ptitle = new Image(171,19); ptitle.src = "images/pentitle.gif";
image1 = new Image(100,20); image1.src = "images/image1.gif";
image2 = new Image(100,20); image2.src = "images/image2.gif";
image3 = new Image(100,20); image3.src = "images/image3.gif";
topOn = new Image(100,20); topOn.src = "images/topi.gif";
topOff = new Image(100,20); topOff.src = "images/topo.gif";
}
// Onload function
function loadFunctions() {
log_this_visit();
formatText();
}
// Use AJAX for perl call so webpage will not exit
function log_this_visit() { // non-IE browsers
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
if (XMLHttpRequestObject) {
var url = 'cgi-bin/log_visits.pl?webpage=js.html';
XMLHttpRequestObject.open('GET', url);
XMLHttpRequestObject.send(null);
}
}
// Format text containing date for link
function formatText() {
var today = new Date();
var yyyy = today.getYear();
if (yyyy < 1000) {
yyyy += 1900;
}
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var Month = montharray[today.getMonth()];
var dd = today.getDate();
document.getElementById('cnn_text').innerHTML = "Go to CNN.com on " + Month + " " + dd + ", " + yyyy;
}
// Switch On and Off button images
function imageSwap(imgID,imgName) {
if(jslevel >= "1.1") {
document.images[imgID].src = eval(imgName + ".src")
}
}
// Toggle between displaying or not-displaying message
function msgFunction() {
if (messageOn == false) {
messageOn = true
msg = msgText
scrollMsg()
}
else {
messageOn = false
window.status = " "
window.clearTimeout(timerID)
}
}
// Scroll message by shifting leading character of message text to end of text
function scrollMsg() {
window.status = msg
msg = msg.substring(1,msg.length) + msg.substring(0,1)
// recursive call to this function
timerID = setTimeout("scrollMsg()", delay)
}
// Go to the selected search engine with the input text
function Search() {
var site = document.Searchform.selection[document.Searchform.selection.selectedIndex].value;
var stext = document.Searchform.searchtext.value;
var len = stext.length;
// If string is phrase (bracketed by quotes) replace quotes with %22
if ((stext[0] == '"') & (stext[len-1] == '"')) {
var newstext = "%22" + stext.substring(1,len-1) + "%22";
stext = newstext;
len = len + 4;
}
// Replace embedded blanks with + signs
for (i=1; i<len; i++) {
if (stext[i] == " ") {
var newstext = stext.substring(0,i) + "+" + stext.substring(i+1,len);
stext = newstext;
}
}
// Format the URL and search string based on the selected search engine
if (site == 'Google') {var urlString = 'http://www.google.com/search?q=' + stext + '&meta=lr%3D%26hl%3Den&btnG=Google+Search'};
if (site == 'AllTheWeb') {var urlString = 'http://www.alltheweb.com/search?cat=web&cs=iso-8859-1&l=any&q=' + stext};
if (site == 'AltaVista') {var urlString = 'http://www.altavista.com/web/results?q=' + stext + '&search.x=66&search.y=9'};
if (site == 'Excite') {var urlString = 'http://msxml.excite.com/_1_SUSTRD03IGVIZ1__info.xcite/dog/results?otmpl=dog/webresults.htm&qcat=web&qkw=' + stext};
if (site == 'Lycos') {var urlString = 'http://search.lycos.com/default.asp?lpv=1&loc=searchbox&query=' + stext + '&x=35&y=9'};
if (site == 'Search.com') {var urlString = 'http://www.search.com/search?channel=1&tag=st.se.fd..sch&q=' + stext};
location = urlString;
}
function setCookie(name) {
var cookieText = document.myform.text.value;
if (cookieText != "") {
var today = new Date();
var oneYear = (1000 * 60 * 60 * 24 * 365);
var expDate = new Date(today.getTime() + oneYear);
document.cookie=name + "=" + escape(cookieText) + "; expires=" + expDate.toGMTString();
document.myform.text.value = "";
document.myform.text.focus();
}
}
function getCookie(name) {
var cookies = document.cookie.split("; ");
var cookieValue = " ";
for (var i=0; i < cookies.length; i++) {
values = cookies[i].split("=");
if (values[0] == name)
cookieValue = unescape(values[1]);
}
document.myform.text.value = cookieValue;
document.myform.text.focus();
}
function deleteCookie(name) {
var today = new Date();
var expDate = new Date(today.getTime() - 1);
document.cookie=name + "=; expires=" + expDate.toGMTString();
document.myform.text.value = "";
document.myform.text.focus();
}
// This runs when color choice radio button is clicked
function colorChoice(radiobutton) {
var value = radiobutton.value;
var bgColor = '';
// Define the background color corresponding to the clicked button
if (value == "white") {
bgColor = "#ffffff";
}
else if (value == "green") {
bgColor = "#66ffcc";
}
else if (value == "red") {
bgColor = "#ff3366";
}
else if (value == "blue") {
bgColor = "#99ccff";
}
else if (value == "yellow") {
bgColor = "#ffff99";
}
// Change the color of the table row, which is up 2 levels from the radio button
radiobutton.parentNode.style.backgroundColor = bgColor;
}
// This runs when a checkbox is clicked
function clickCheckbox(checkbox) {
if (checkbox.checked) {
// Determine selection and unselect others
var selected = checkbox.name;
if (selected == "A") {
checkboxform.B.checked = false;
checkboxform.C.checked = false;
}
else if (selected == "B") {
checkboxform.A.checked = false;
checkboxform.C.checked = false;
}
else if (selected == "C") {
checkboxform.A.checked = false;
checkboxform.B.checked = false;
}
}
}
// Prompt confirm before taking action
function promptConfirm(question,href) {
if (confirm(question)) {
window.location = href;
}
}
// Process the input text
function validateInput() {
var msgtext = document.msgform.msg.value;
if (!msgtext) {
alert( 'Please enter some text.');
return false;
}
else {
//if (window.event.keycode != 13) {
// Encode message
msgtext = escape(msgtext);
var thisurl = this.location.href;
var spliturl = thisurl.split('js.html');
// Set up parm in URL
var newurl = spliturl[0] + "message_parm.html?msg=" + msgtext;
window.location = newurl;
//}
}
}
function changeContent(webtext) {
document.getElementById('change').innerHTML=webtext;
}
function changeContentImage() {
document.getElementById('change').innerHTML='<img src="images/yinyang.gif" align=absmiddle> New text with icon . . .';
}
function fakeHoverOn(text) {
text.className = "fakehover";
document.body.style.cursor = 'pointer';
}
function fakeHoverOff(text) {
text.className = "fakelink";
document.body.style.cursor = 'default';
}
function noLinkMsg() {
alert("Fooled you!\n\nEven though this looks like a link it is not!\n\n");
}
function windowOpener(ref, target, parms) {
popupWindow=window.open(ref, target, parms);
popupWindow.focus();
}
function go_to_videos() {
self.location.href = document.getElementById('videos').value;
document.getElementById('videos').selectedIndex = 0; // reset to default for return to page
}
function go_to_selection() {
self.location.href = document.getElementById('dropdown').value;
document.getElementById('dropdown').selectedIndex = 0; // reset to default for return to page
}
function goto_ajax_page() {
self.location.href = document.ajax_form.ajax_pages.options[document.ajax_form.ajax_pages.selectedIndex].value;
document.getElementById('ajax_pages').selectedIndex = 0; // reset to default for return to page
}
function toggleDiv(divId) {
$(document).ready(function() {
$(divId).toggle();
});
}
// -->
</script>
</head>
<body onload="loadFunctions()" style="width:100%">
<a name="top"></a>
<!-- Insert the header from an external file -->
<script type="text/javascript" language="JavaScript" type="text/javascript" src="header.js"></script>
<table width="100%">
<tr>
<td align=left width="25%" nowrap>
<!--span title="JavaScript" class="pagetitle"><img align="absmiddle" src="images/jslogo1.gif" width="75" height="76" hspace="10"-->
<span title="JavaScript" class="pagetitle"><img align="absmiddle" src="images/js_logo.gif" width="59" height="75" hspace="10">
JavaScript</span>
</td>
<td width="50%" align="center" valign="top">
<span style="color:#686A6C;font-weight:bold;font-size:16px;font-style:italic">
<br>
(I retired in 2018 from computer programming and I am no longer updating this page so it may get outdated.)
</span>
</td>
<td align="right" valign="top" width="25%">
<table>
<tr>
<td align="right" valign="top">
See also my pages for:
</td>
<td valign="top">
<a href="onlinetips.html" class="green">Online Tips</a><br>
<a href="program.html" class="green">Programming</a><br>
<a href="windows.html" class="green">Windows</a>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<table width="100%" height="30" style="background-color:#2C5197"><tr>
<td style="font-family:arial;font-size:14px;color:white" align="middle" nowrap>
<a href="#links" class="idxmenu">Links</a> |
<a href="#tips" class="idxmenu">Tips</a> |
<a href="#newsgroups" class="idxmenu">Newsgroups</a>
</td>
</tr></table>
</center>
<img src="images/clearspacer.gif" height="10"><br>
<table>
<tr>
<td> </td>
<td>Webpages can be interactive with <i>JavaScript</i>, an <a href="program.html#oop" class="green">object-oriented</a>, event-driven, scripting
language developed by Netscape. It can be used with HTML to make a webpage dynamic and functional. (On the <a href="cgi-bin/print_source.pl?src=../js.html" class="green"
onClick="javascript:windowOpener(this.href,this.target,'width=1200,height=700,left=25,top=100,scrollbars=1');return false;">current page</a>, JavaScript code is between "<script " down to
"</script>".) On my website I use it to animate my buttons (see <a href="#rollover" class="green">Image rollover</a>), to load images faster on my webpages (see <a href=
"#preload" class="green">Preload images</a>), and for popup windows to show photos and videos (see <a href= "#popup" class="green">Popup windows</a>). I was a programmer until I retired in 2018 so this page has
gotten much less attention since then.
<p>
<i>JavaScript</i> has had a lot of changes since I started using it several years ago. Many of the things I describe here may have been improved, but all of my methods still work fine.
<p>
Don't confuse <i>JavaScript</i> with <i>Java</i>. (see <a href="https://www.guru99.com/difference-between-java-and-javascript.html">this article</a> for quick explanation). They have some things in common but while
<i>JavaScript</i> is a scripting language, <i>Java</i> is compiled, and much more robust. I used to be a <i>Java</i> programmer and coded only in <i>Java</i> and had a <a href= "java.html" class="green">Java</a> page on
this site. (I haven't worked on it in years so I don't now how functional it is now.) <i>Mozilla.org</i> explains the likeness between the languages this way, <i>"The basic
syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language."</i> </td>
</tr>
</table>
<table><tr><td height="30" valign="bottom" style="font-size:14px;font-weight:bold">Enabling JavaScript</td></tr></table>
<table>
<tr>
<td> </td>
<td>Some browsers have a setting to enable or disable <i>JavaScript</i>. If JavaScript is not enabled in your browser you
won't see my button animation, but with or without <i>JavaScript</i> enabled the buttons will still link to the intended
targets. Here is the location of this setting in several popular browsers. <i>(These may have changed since I listed them)</i>
<table cellspacing="0">
<tr><td><img src="images/clearspacer.gif" width="1" height="3"></td></tr>
<tr>
<td valign="top"> <img src="images/dot.gif" title="o" width="4" height="10"> </td>
<td valign="top"><i>Firefox</i></td>
<td valign="top"> - </td>
<td valign="top"><font color="#191970">Tools</font> » <font color="#191970">Options</font> » <font color="#191970">Content</font></td>
</tr>
<tr>
<td valign="top"> <img src="images/dot.gif" title="o" width="4" height="10"> </td>
<td valign="top"><i>Internet Explorer</i></td>
<td valign="top"> - </td>
<td valign="top"><font color="#191970">Tools</font> » <font color="#191970">Internet Options</font> » <font color="#191970">Security</font> » <font color="#191970">Custom Level</font><br>
Enable <b>Active Scripting</b> in the <b>Scripting</b> section.</td>
</tr>
<tr>
<td valign="top"> <img src="images/dot.gif" title="o" width="4" height="10"> </td>
<td valign="top"><i>Chrome</i></td>
<td valign="top"> - </td>
<td valign="top">On the <font color="#191970">Settings</font> menu in the <font color="#191970">Search settings</font> box type in<b>:</b> <font color="#191970"><b>javascript</b></font></td>
</tr>
<tr>
<td valign="top"> <img src="images/dot.gif" title="o" width="4" height="10"> </td>
<td valign="top"><i>Opera</i></td>
<td valign="top"> - </td>
<td valign="top"><font color="#19197">Tools</font> » <font color="#191970">Preferences</font> » <font color="#191970">Advanced</font> » <font color="#191970">Content</font></td>
</tr>
</table>
</td>
</tr>
</table>
<p>
<a name="links"></a>
<hr>
<img src="images/clearspacer.gif" height="10"><br>
<span style="font-size:18px;font-weight:bold">JavaScript links</span>
<img src="images/links.gif" align="absmiddle" hspace="15" width="71" height="27" title="Links"><br>
<img src="images/clearspacer.gif" height="10"><br>
<a href="http://www.javascript.com/"><img align="absmiddle" src="images/js_icon.gif" title="o" hspace="5" width="16" height="16" border="0">JavaScript.com</a><br>
<a href="https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript"><img align="absmiddle" src="images/w3_icon.gif" title="o" hspace="5" width="16" height="16" border="0">A Short History of JavaScript<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"><img align="absmiddle" src="images/mdn_icon.gif" title="o" hspace="5" width="16" height="16" border="0">JavaScript</a> – (Mozilla Developer Network)<br>
<img src="images/dot.gif" title="-" hspace="5" width="4" height="10"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Guide</a><br>
<img src="images/dot.gif" title="-" hspace="5" width="4" height="10"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">Reference</a><br>
<img src="images/dot.gif" title="-" hspace="5" width="4" height="10"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a><br>
<img src="images/dot.gif" title="-" hspace="5" width="4" height="10"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a><br>
<img src="images/dot.gif" title="-" hspace="5" width="4" height="10"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction">Introduction</a><br>
<img src="images/dot.gif" title="-" hspace="5" width="4" height="10"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><br>
<a href="http://kb.mozillazine.org/JavaScript"><img align="absmiddle" src="images/mozillazine_icon.gif" title="o" hspace="5" width="16" height="16" border="0">JavaScript FAQ Knowledge Base</a> – (mozillaZine)<br>
<a href="http://www.irt.org/articles/script.htm"><img align="absmiddle" src="images/irt_icon.gif" title="o" hspace="5" width="15" height="15" border="0">JavaScript Articles</a> – (irt.org)<br>
<a href="http://www.java-scripts.net/"><img align="absmiddle" src="images/jsnet_icon.gif" title="o" hspace="5" width="16" height="16" border="0">Java-Scripts.net/</a><br>
<a href="http://www.javascriptsource.com/"><img align="absmiddle" src="images/jsinternet_icon.gif" title="o" hspace="5" width="16" height="16" border="0">The JavaScript Source</a> – tons of "cut and paste" JavaScript examples<br>
<a href="http://wsabstract.com/"><img align="absmiddle" src="images/jskit_icon.gif" title="o" hspace="5" width="16" height="16" border="0">JavaScript Kit</a><br>
<a href="http://www.javascriptstation.com/"><img align="absmiddle" src="images/wbullet.gif" title="o" hspace="5" width="16" height="16" border="0">JavaScript Station</a><br>
<a href="http://www.js-examples.com/"><img align="absmiddle" src="images/js_examples_icon.gif" title="o" hspace="5" width="16" height="16" border="0">JavaScript Examples</a><br>
<a href="http://www.javascriptsearch.com/"><img align="absmiddle" src="images/wbullet.gif" title="o" hspace="5" width="16" height="16" border="0">JavaScript Search</a><br>
<!--a href="http://www.btinternet.com/~kurt.grigg/javascript/"><img align="absmiddle" src="images/wbullet.gif" title="o" hspace="5" width="16" height="16" border="0">Kurt's DHTML</a> – good examples from Kurt Grigg<br-->
<a href="http://www.htmlgoodies.com/beyond/javascript/js-ref/"><img align="absmiddle" src="images/hg_icon.gif" title="o" hspace="5" width="16" height="16" border="0">HTML Goodies: Javascript References</a><br>
<a href="http://www.howtocreate.co.uk/tutorials/javascript/combinedpage"><img align="absmiddle" src="images/htc_icon.gif" title="o" hspace="5" width="16" height="16" border="0">JavaScript tutorial</a> – (www.HowToCreate.co.uk)<br>
<a href="http://javascript.crockford.com/"><img align="absmiddle" src="images/doug_icon.gif" title="o" hspace="5" width="16" height="16" border="0">Douglas Crockford's Javascript</a><br>
<img src="images/dot.gif" title="-" hspace="5" width="4" height="10"><a href="http://www.crockford.com/javascript/javascript.html">JavaScript: The World's Most Misunderstood Programming Language</a><br>
<img src="images/dot.gif" title="-" hspace="5" width="4" height="10"><a href="http://javascript.crockford.com/code.html"> Code Conventions for the JavaScript Programming Language</a><br>
<a href="http://www.dannyg.com/works.html"><img align="absmiddle" src="images/wbullet.gif" title="o" hspace="5" width="16" height="16" border="0">Danny Goodman's Online Articles</a> – author of <i>JavaScript Bible</i><br>
<img src="images/clearspacer.gif" height="10"><br>
<a name="tips"></a>
<img src="images/grnbar1.gif" height="5" width="100%">
<a href="#top"><img src="images/top_of_page.gif" title="Top of page" width="30" height="30" align="right" hspace="10"></a>
<span style="font-size:18px;font-weight:bold">JavaScript tips</span>
<img src="images/howto.gif" align="absmiddle" hspace="15" vspace="15" width="35" height="36" title="JavaScript tips">
<table>
<tr>
<td> </td>
<td>Before I retired, in my job as web programmer I used a lot of JavaScript to enhance my Perl and HTML, and as I discover new things
worth sharing I will add them here. I started developing this page years ago, before I was using JavaScript
professionally, so some of the things offered here may be useful and functional while others may only seem clever
and cute.
</td>
</tr>
</table>
<ul style="line-height: 1.5">
<li><a href="#rollover" class="menu">Image rollover</a> – toggle images with the mouse
<li><a href="#preload" class="menu">Preload images</a> – more control of image display on a webpage
<li><a href="#header_footer" class="menu">Inserting page headers and footers</a> – cut down on repetitive code
<li><a href="#funcform" class="menu">Functions with forms</a>
<li><a href="#cookies" class="menu">Cookies</a> – create and use cookies
<li><a href="#dates" class="menu">Formatting dates</a>
<li><a href="#scrolling" class="menu">Scrolling text</a>
<li><a href="#clock" class="menu">Mousetrail clock</a> – PC clock info displayed in a nifty format
<li><a href="#return" class="menu">Return to the page you came from</a> – create a Back button
<li><a href="#changecolor" class="menu">Change background color</a> – use radio buttons to change the color of an area
<li><a href="#checkbox_radiobuttons" class="menu">Use checkboxes to simulate radio buttons</a> – they both have their advantages
<li><a href="#confirm" class="menu">Prompt confirm before action</a> – proceed based on response to question
<li><a href="#html_parm" class="menu">Pass information between webpages</a> – use CGI type parameters with JavaScript
<li><a href="#embed_video" class="menu">Embed a video dynamically in a webpage</a> – embed a video in a webpage
<li><a href="#link_text" class="menu">Format text for a link</a> – create web links dynamically
<li><a href="#view_tables" class="menu">View html tables</a> – show the layout of HTML tables in your browser
<li><a href="#dynamic_content" class="menu">Change web content dynamically</a> – change something on a webpage after it has displayed
<li><a href="#fake_link" class="menu">Emulate a link</a> – make text appear to function like a web link that isn't
<li><a href="#dropdown" class="menu">Drop-down menus</a> – a nice navigation method
<li><a href="#popup" class="menu">Popup windows</a> – a clever way to show web content
<li><a href="#file_input" class="menu">File input in HTML forms</a> – select a file from your PC or network
<li><a href="#ajax" class="menu">Ajax</a> – get and display new data without reloading webpage
<li><a href="#textedit" class="menu">Editing text strings</a> – using the substring method
<li><a href="#slideshow" class="menu">Slide show</a> – use a template to create a Slide show
<li><a href="#close_window" class="menu">Close current window</a> – close the current window from the webpage
<li><a href="#chars_in_space" class="menu">Adjust number of characters to fit variable width space</a> – calculate the number of characters to display in a space
<li><a href="#black_background" class="menu">Suppress black background in Firefox when displaying image</a> – I had to do something to compensate
<li><a href="#process_array" class="menu">Process file list in array</a> – build a slideshow from an array
<li><a href="#jquery_toggle" class="menu">Display sub-text on link with jQuery</a> – click to show and hide text
<li><a href="#blink" class="menu">Blinking text</a> – make text blink
</ul>
<center><hr width="92%"></center>
<ul>
<a name="rollover"></a>
<li><b>Image rollover</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
A popular JavaScript technique is image swapping in response to mouse events, which is sometimes referred to as
<b>rollover</b>. I use this to achieve the animated effect you see when you click on the navigation buttons I put
on my pages.
<p>
Click this button to see image swapping in action:
<p>
<a href="javascript:void(0)"
onMouseOver ="imageSwap('mouse_test','image2')"
onMouseDown = "imageSwap('mouse_test','image3')"
onMouseUp = "imageSwap('mouse_test','image2')"
onMouseOut = "imageSwap('mouse_test','image1')"
onClick = "return false">
<img src="images/image1.gif" title="Click to test" name="mouse_test" width="100" "height=20" border="0" align="absmiddle"></a>
<img src="images/left.gif" height="9" width="9" hspace="3" border="0"><i>click for demo</i>
<p>
This animation is produced from these 3 images:
<p>
<img src="images/image1.gif" align=bottom title="Image 1"> <img src="images/image2.gif" align=bottom title="Image 2"> <img src="images/image3.gif" align=bottom title="Image 3">
<p>
The default image is <b>Image 1</b>, and it responds to mouse movements in the following ways:
<ul>
<li>When you move the mouse over the button it is highlighted (<b>Image 2</b> replaces <b>Image 1</b>).
<li>When you click the button down it is depressed (<b>Image 3</b> replaces <b>Image 2</b>).
<li>When you release the mouse button with the mouse still over the button it returns to the highlighted state (<b>Image 2</b> replaces <b>Image 3</b>).
<li>When you move the mouse off the image it returns to its normal state (<b>Image 1</b> is restored).
</ul>
<p>
One of the standards in 3D visual programming is that the source of light is from the <i>upper-left</i>, so the
unpressed (protruding) button will have highlights on the top and left edges and shadows on the bottom and right,
which you can see on Image 1. When the button is pressed, the shadows move to the top and left and the highlights
move to the bottom and right, as in Image 3. To enhance the sense of movement when the button is clicked and the
image is swapped, the text on the depressed button image is offset slightly. I use the highlighted image
(Image 2) to catch the eye of the user when the mouse passes over it and show that it will receive focus by
clicking the mouse. Besides being cute and flashy, the usefulness of this highlighting technique is more obvious
in a menu setting, as in the column of buttons on my <a href="index.html" class="green">main</a> page, where it helps in
identifying which of the closely placed buttons will receive the mouse click.
<p>
Here is the code for the image swapping on this button.
<pre><div class="frame"><font color="#888888">// Preload the images to maximize performance</font><font color="#333399">
image1 = new Image(100,20); image1.src = "image1.gif";
image2 = new Image(100,20); image2.src = "image2.gif";
image3 = new Image(100,20); image3.src = "image3.gif";
</font><font color="#888888">
// Switch In, Out, and Highlight button images</font><font color="#333399">
function imageSwap(imgID,imgName) {
document.images[imgID].src = eval(imgName + ".src")
}
<font color="#888888">
<!-- Call the image swapping function from the mouse events. --></font><font color="#333399">
<a href="<i>target location here</i>" onMouseOver ="imageSwap('mouse_test','image2')"
onMouseDown = "imageSwap('mouse_test','image3')"
onMouseUp = "imageSwap('mouse_test','image2')"
onMouseOut = "imageSwap('mouse_test','image1')">
<img src="images/image1.gif" title="Click to test" name="mouse_test" width="100" height="20" border="0"></a></font></font></div></pre>
<a name="preload"></a>
<br><img src="images/clearspacer.gif" height="6"><br>
<li><b>Preload images</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
If you let the viewer's browser determine the timing sequence of image displays on your webpage the results may not be what you expected. This
sequence usually reflects the order images occur in the HTML, which is not always what you want, and there are exceptions to this that may be
even less desirable. For instance, I found that the image file I set for my website's background (configuring 'myback.gif' in CSS) was the last
thing that loaded, and so that on a slower loading page, one with lots of graphics, the browser's default background color remained during the
entire load and was only replaced with <i>my</i> specified background at the very end, which wasn't the way I wanted my pages to be presented.
You can override this order by defining JavaScript object variables for the images in the <head> section which will load them at the
beginning. To get the full benefit of image preloading in <i>Internet Explorer</i> (it works seamlessly in <i> Netscape</i>) you must set
your browser to check for newer versions of stored pages either "Every time you start Internet Explorer" or "Automatically." In Internet
Options, this is found under Temporary Internet files on the Settings screen.
<p>
Set it up this way on a page with lots of images.
<pre><div class="frame"><font color="#888888">// Put these in the <head> section</font><font color="#333399">
background = new Image(); background.src = "myback.gif";</font><font color="#888888">
... create objects with actual dimensions of images</font><font color="#333399">
title = new Image(325,50); title.src = "titleimage.gif";
button1 = new Image(100,20); button1.src = "button1.gif";
button2 = new Image(100,20); button2.src = "button2gif";
button3 = new Image(100,20); button3.src = "button3.gif";
</font><font color="#888888">
// Put these in the <body> section</font><font color="#333399">
<img src="images/titleimage.gif" width="325" height="50">
<img src="images/button1.gif" width="100" height="20">
<img src="images/button2.gif" width="100" height="20">
<img src="images/button3.gif" width="100" height="20"></font></div></pre>
<a name="header_footer"></a>
<br><img src="images/clearspacer.gif" height="12" border="0"><br>
<li><b>Inserting page headers and footers</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
On websites like mine, where the top (and bottom) of each page is identical, it makes sense to have this HTML stored in only one place,
separately from the web documents, instead of hard-coded repetitively on each page. You do this by creating a little text file containing the HTML code
and "importing" it into your webpages using JavaScript.
<p>
<ol>
<li>In a text editor create the HTML code you want to appear as your header (or footer).
<pre><div class="frame"><font color="#333399"> <table>
<tr valign="middle">
<td>
<a href="index.html" onMouseDown="imageSwap('home_btn','homeOn')"</font><font color="#888888">
. . . this goes on . . .</font></div></pre>
<p>
<li>Remove all the line breaks so the code appears on a single line (this is <i>important</i>).
<pre><div class="frame"><font color="#333399"><table><tr valign="middle"><td><a href="index.html" onMouseDown="imageSwap('home_btn','homeOn')"</font><font color="#888888"> . . .</font></div></pre>
<p>
<li>Enclose this line of HTML inside a document.write statement with parentheses and single quotes.
<pre><div class="frame"><font color="#333399">document.write('<table><tr valign="middle"><td><a href="index.html" onMouseDown="imageSwap('home_btn','homeOn')"</font><font color="#888888"> . . .</font><font color="#333399">')</font></div></pre>
<p>
<li>Escape any other single quotes in your code with a backslash (\), or JavaScript will terminate the string when it encounters the 2nd single quote.
<pre><div class="frame"><font color="#333399">document.write('<table><tr valign="middle"><td><a href="index.html" onMouseDown="imageSwap(</font><font color="#990066">\</font><font color="#333399">'home_btn</font><font color="#990066">\</font><font color="#333399">',</font><font color="#990066">\</font><font color="#333399">'homeOn</font><font color="#990066">\</font><font color="#333399">')"</font><font color="#888888"> . . .</font>')</font></div></pre>
<br><img src="images/clearspacer.gif" height="8"><br>
<li>Save this code in a text file with a name like 'header.js' (or 'footer.js'). Any name will do but '.js' is an appropriate extension since it contains only a JavaScript statement.
<br><img src="images/clearspacer.gif" height="14"><br>
<li>Insert the following JavaScript line at the location where you want this code to be placed in your webpage.
<pre><div class="frame"><font color="#333399"><script language="JavaScript" type="text/javascript" src="header.js"></script></font></div></pre>
</ol>
<p>
Here is an example of how my webpages <a href="header_footer.html" class="green">used to be constructed</a> before removing the
header and footer source code.
<a name="funcform"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Using functions with forms</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
With the <i>onClick</i> event for a button you can run a JavaScript function from a
form. Here is an example of using this method to access different search engines from a
single input form. I am using this technique on my <a href="index.html" class="green">Home</a> page.
<br><img src="images/clearspacer.gif" height="8" border="0"><br>
<form name="Searchform">
Search engine to use:
<select name="selection">
<option value="Google">Google</option>
<option value="AllTheWeb">AlltheWeb</option>
<option value="AltaVista">Altavista</option>
<option value="Excite">Excite</option>
<option value="Lycos">Lycos</option>
<option value="Search.com">Search.com</option>
</select>
Search for:
<input type="text" name="searchtext">
<input type="button" name="SearchButton" value="Search" onClick="Search()">
</form>
View the <a href="mysearch.html" class="green">source code</a>.
<a name="cookies"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Cookies</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
A cookie enables a website to store information on a PC for subsequent retrieval. If you do online shopping where
you add items to a shopping cart, they are placed in a cookie and retrieved when you go to the checkout.
<br><img src="images/clearspacer.gif" height="8"><br>
Here is an example that does three things with a cookie: <i>Create, Retrieve,</i> and <i>Delete</i>
<br><img src="images/clearspacer.gif" height="8" border="0"><br>
<form name="myform">
Enter some text:
<input type="text" name="text">
<input type="button" value="Set cookie" onClick="setCookie('jscookie')">
<input type="button" value="Get cookie" onClick="getCookie('jscookie')">
<input type="button" value="Delete it" onClick="deleteCookie('jscookie')">
</form>
<p>
Here is the code for this example.
<pre><div class="frame"><font color="#888888">// Create the cookie with the text keyed into the form</font><font color="#333399">
function setCookie(name) {
var cookieText = document.myform.text.value;
if (cookieText != "") {
var today = new Date(); </font><font color="#888888">// Set the cookie to</font><font color="#333399">
var oneYear = (1000 * 60 * 60 * 24 * 365); </font><font color="#888888">// expire in one</font><font color="#333399">
var expDate = new Date(today.getTime() + oneYear); </font><font color="#888888">// year from today</font><font color="#333399">
document.cookie=name + "=" + escape(cookieText) +
"; expires=" + expDate.toGMTString();
document.myform.text.value = ""; </font><font color="#888888">// Clear the form</font><font color="#333399">
}
}</font><font color="#888888">
// Retrieve the cookie text and display it in the form</font><font color="#333399">
function getCookie(name) {
var cookies = document.cookie.split("; "); </font><font color="#888888">// Get all cookies from file</font><font color="#333399">
var cookieValue = " ";
for (var i=0; i < cookies.length; i++) {
values = cookies[i].split("="); </font><font color="#888888">// Extract cookie name & value</font><font color="#333399">
if (values[0] == name) </font><font color="#888888">// If this cookie is found</font><font color="#333399">
cookieValue = unescape(values[1]); </font><font color="#888888">// save the value</font><font color="#333399">
}
}
document.myform.text.value = cookieValue; </font><font color="#888888">// Show cookie value on form</font><font color="#333399">
}</font><font color="#888888">
// "Delete" the cookie by expiring it</font><font color="#333399">
function deleteCookie(name) {
var today = new Date();
var expDate = new Date(today.getTime() - 1);
document.cookie=name + "=; expires=" + expDate.toGMTString();
document.myform.text.value = "";
}</font><font color="#888888">
// This goes in the <body> section</font><font color="#333399">
<form name="myform">
Enter some text:
<input type="text" name="text">
<input type="butto" value="Set cookie" onClick="setCookie('jscookie')">
<input type="button" value="Get cookie" onClick="getCookie('jscookie')">
<input type="button" value="Delete it" onClick="deleteCookie('jscookie')">
</form></font></div></pre>
<a name="dates"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Formatting dates</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<p>
<b>Showing today's date</b>
<br>
You can obtain the current date and manipulate it using JavaScript.
<br><img src="images/clearspacer.gif" height="8"><br>
The following code shows today's date as:
<b><font color="#333399">
<script type="text/javascript" language="JavaScript">
<!--
var today = new Date();
var yyyy = today.getYear();
if (yyyy < 1000) {
yyyy += 1900;
}
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var Month = montharray[today.getMonth()];
var dd = today.getDate();
document.write(Month + " " + dd + ", " + yyyy);
// -->
</script>
</font></b>
<pre><div class="frame"><font color="#333399"><script type="text/javascript" language="JavaScript">
<!--
var today = new Date();
var yyyy = today.getYear();
if (yyyy < 1000) {
yyyy += 1900;
}
var montharray=new Array("January","February","March","April","May","June","July",
"August","September","October","November","December")
var Month = montharray[today.getMonth()];
var dd = today.getDate();
document.write(Month + " " + dd + ", " + yyyy);
// -->
</script></font></div></pre>
<b>Showing the date a webpage was last changed</b>
<br>
The <i>lastModified</i> property of the <i>Document Object Model (DOM)</i> returns the date a webpage was last changed.
<br><img src="images/clearspacer.gif" height="8"><br>
The following code shows this page was last modified on:
<b><font color="#333399">
<script type="text/javascript" language="JavaScript">
<!--
update = new Date(document.lastModified)
mm = update.getMonth() + 1
dd = update.getDate()
yr = update.getYear()
if (yr < 1000) {
yr += 1900;
}
document.write(mm + "/" + dd + "/" + yr)
// -->
</script>
</font></b>
<pre><div class="frame"><font color="#333399"><script type="text/javascript" language="JavaScript"></font><font color="#888888">
<!-- </font><font color="#333399">
update = new Date(document.lastModified)
mm = update.getMonth() + 1
dd = update.getDate()
yr = update.getYear()
if (yr < 1000) {
yr += 1900;
}
document.write(mm + "/" + dd + "/" + yr)</font><font color="#888888">
// --></font><font color="#333399">
</script></font></div></pre>
Using this property you can create a bookmark to see the date a webpage you are viewing
was last changed.<br>Give it a name like <b>Date modified</b> and in the URL property put
<br><img src="images/clearspacer.gif" height="6"><br>
<pre><div class="frame"><font color="#333399"> javascript:alert(document.lastModified)</font></div></pre>
<a name="scrolling"></a>
<br><img src="images/clearspacer.gif" height="15"><br>
<li><b>Scrolling text in the status bar</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br>
<form>
<input type = "button" value = "Press me" onClick = "msgFunction()">
and look at the message area of the browser window . . . (does not work in Firefox)
</form>
The following code produces this scrolling effect.
<pre><div class="frame"><font color="#333399">var msgText = " ... Click the button again to clear this message ... "
var msg = " "
var delay = 150
var timerID = null
var messageOn = false
<font color="#888888">
// Toggle between displaying or not-displaying message</font><font color="#333399">
function msgFunction() {
if (messageOn == false) {
messageOn = true
msg = msgText
scrollMsg()
}
else {
messageOn = false
window.status = " "
window.clearTimeout(timerID)
}
}
</font><font color="#888888">
// Scroll message by shifting leading character of message text to end of text</font><font color="#333399">
function scrollMsg() {
window.status = msg
msg = msg.substring(1,msg.length) + msg.substring(0,1)
// recursive call to this function
timerID = setTimeout("scrollMsg()", delay)
}
<form>
<input type = "button" value = "Press me" onClick = "msgFunction()">
and look at the message area at the bottom of the browser window . . .
</form></font></font></div></pre>
<a name="clock"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>A swirling mouse trail clock</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
I didn't write this original code (I found it on <a href="http://www.dynamicdrive.com/dynamicindex6/analog3.htm" class="blueulb">Kurt Grigg's DHTML site</a>) but I have modified it some. I find it very dazzling.
<br>
<a href="clock.html"><img src="images/jsclock1.gif" width=33 height=33 vspace=10 hspace="5" align="absmiddle" border="0" title="JavaScript clock"></a>
<img src="images/left.gif" height="9" width="9" hspace="3" border="0">click to see
<a name="return"></a>
<br><img src="images/clearspacer.gif" height="6"><br>
<li><b>Return to the previous browser location</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
Clicking on this button will mimic the Back button of the browser, i.e., it will return you to the last anchored browser location
(not necessarily on a separate page).
<br><img src="images/clearspacer.gif" height="10"><br>
<input type="button" value="<< Back" onClick="history.go(-1)">
<br><img src="images/clearspacer.gif" height="10"><br>
Here's the code.
<pre><div class="frame"><font color="#333399"><input type="button" value="<< Back" onClick="history.go(-1)"></font></div></pre>
<a name="changecolor"></a>
<br><img src="images/clearspacer.gif" height="6"><br>
<li><b>Change the background color of a table cell</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
Click on your color choice, or click another color to change.
<form name="colorform">
<table border="2" cellpadding="5">
<tr>
<td bgcolor="#ffffff">
White<input type="radio" name="colorbutton" value="white" onClick="javascript:colorChoice(this)" checked>
Green<input type="radio" name="colorbutton" value="green" onClick="javascript:colorChoice(this)">
Red<input type="radio" name="colorbutton" value="red" onClick="javascript:colorChoice(this)">
Blue<input type="radio" name="colorbutton" value="blue" onClick="javascript:colorChoice(this)">
Yellow<input type="radio" name="colorbutton" value="yellow" onClick="javascript:colorChoice(this)">
</td>
</tr>
</table>
</form>
<img src="images/clearspacer.gif" height="6"><br>
Here's the code that does this.
<pre><div class="frame"><font color="#888888">// Put this code in the <head> section</font><font color="#333399">
function colorChoice(radiobutton) {
var value = radiobutton.value;
var bgColor = '';
</font><font color="#888888">// Define the background color corresponding to the clicked button</font><font color="#333399">
if (value == "white") {
bgColor = "#ffffff";
}
else if (value == "green") {
bgColor = "#66ffcc";
}
else if (value == "red") {
bgColor = "#ff3366";
}
else if (value == "blue") {
bgColor = "#99ccff";
}
else if (value == "yellow") {
bgColor = "#ffff99";
}
</font><font color="#888888">// Change the color of the table cell</font><font color="#333399">
radiobutton.parentNode.style.backgroundColor = bgColor;
}</font><font color="#888888">
// Put this code in the body section</font><font color="#333399">
<form name="colorform">
<table border="2" cellpadding="5">
<tr>
<td bgcolor="#ffffff">
White<input type="radio" name="colorbutton" value="white" onClick="javascript:colorChoice(this)" checked>
Green<input type="radio" name="colorbutton" value="green" onClick="javascript:colorChoice(this)">
Red<input type="radio" name="colorbutton" value="red" onClick="javascript:colorChoice(this)">
Blue<input type="radio" name="colorbutton" value="blue" onClick="javascript:colorChoice(this)">
Yellow<input type="radio" name="colorbutton" value="yellow" onClick="javascript:colorChoice(this)">
</td>
</tr>
</table>
</form>
</font></div></pre>
<a name="checkbox_radiobuttons"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Use checkboxes to simulate radio buttons</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
Radio buttons have one feature that distinquishes them from checkboxes—only one in a group can be selected at a time.
Checkboxes have one feature that radio buttons lack—you can unselect them. If you want the functionality of radio buttons but
you need the ability to uncheck selections, you can do it with checkboxes using JavaScript. Here is an example of simulating radio buttons
(single-selection) with checkboxes (un-selectable).
<br><img src="images/clearspacer.gif" height="15"><br>
<table width="500">
<tr>
<td width="50%" align="center">C H E C K B O X E S</td>
<td width="50%" align="center">R A D I O B U T T O N S</td>
</tr>
</table>
<table width="500">
<tr>
<td width="50%" align="center" valign="top">
<form name="checkboxform">
<table border="2" cellpadding="10" width="90%">
<tr align="center">
<td width="100%">
A <input type="checkbox" name="A" onClick="javascript:clickCheckbox(this)">
B <input type="checkbox" name="B" onClick="javascript:clickCheckbox(this)">
C <input type="checkbox" name="C" onClick="javascript:clickCheckbox(this)">
</td>
</tr>
</table>
</form>
</td>
<td width="50%" align="center" valign="top">
<table border="2" cellpadding="10" width="90%">
<tr align="center" >
<td width="100%">
A<input type="radio" name="name" checked>
B<input type="radio" name="name">
C<input type="radio" name="name">
</td>
</tr>
</table>
</td>
</tr>
</table>
<img src="images/clearspacer.gif" height="6"><br>
Here's the code that does the radio button simulation.
<pre><div class="frame"><font color="#888888">// Put this code in the <head> section</font><font color="#333399">
function clickCheckbox(checkbox) {
if (checkbox.checked) {
<font color="#888888">// Determine selection and unselect others</font><font color="#333399">
var selected = checkbox.name;
if (selected == "A") {
checkboxform.B.checked = false;
checkboxform.C.checked = false;
}
else if (selected == "B") {
checkboxform.A.checked = false;
checkboxform.C.checked = false;
}
else if (selected == "C") {
checkboxform.A.checked = false;
checkboxform.B.checked = false;
}
}
}</font><font color="#888888">
// Put this code in the body section</font><font color="#333399">
<form name="checkboxform">
A <input type="checkbox" name="A" onClick="javascript:clickCheckbox(this)">
B <input type="checkbox" name="B" onClick="javascript:clickCheckbox(this)">
C <input type="checkbox" name="C" onClick="javascript:clickCheckbox(this)">
</form>
</font></font></div></pre>
<a name="confirm"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Prompt confirm before action</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
Here is how to use a confirm dialog to ask a question, and either take an action, or not, based on the response. This is a technique I find useful
in some of the web applications I have created at work.
<br><img src="images/clearspacer.gif" height="12"><br>
<a href="#tips" onClick="Javascript:return confirm('Are you sure this is what you want to do?')"><font color="#302EAF"><b>Go to tips list</b></font></a> <-- uses one line of code
<br><img src="images/clearspacer.gif" height="12"><br>
<a href="javascript:void(0)" onClick="return promptConfirm('Are you sure this is what you want to do?','#tips')"><font color="#302EAF"><b>Go to tips list</b></font></a> <-- uses JavaScript function
<pre><div class="frame"><font color="#888888">// This is with one line of code</font><font color="#333399">
<a href="#tips" onClick="Javascript:return confirm('Are you sure this is what you want to do?')">Go to tips list</a></font><font color="#888888">
// This is using a function</font><font color="#333399">
<a href="javascript:void(0)"
onClick="return promptConfirm('Are you sure this is what you want to do?','#tips')">Go to tips list</a>
function promptConfirm(question,href) {
if (confirm(question)) {
window.location = href;
}
}</font></div></pre>
<a name="html_parm"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Pass information between webpages</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
You can transfer information from one webpage to another using CGI GET type parameters (key=value) in the URL. In this example a
text string is input here and parmed to another webpage where it is extracted from the URL with JavaScript and displayed. If the
user clicks on the <font color=#666666><b>Display message</b></font> button the <font color=#0000ff> validateInput()</font>
function will format the URL containing the parm. When you use a form for input it will automatically be submitted to what is set
in <font color= #0000ff>action="?"</font> when the Enter key is pressed. You can <a href=
"http://www.cs.tut.fi/~jkorpela/forms/enter.html" class="green">disable</a> this if you want the user to be required to click a button to
process the form, but if you do want to allow this Enter key submit you <i>must</i> put the attribute <font color=#0000ff>method="get"
</font> on the form so the submitted URL will be in the GET format. In this example I also added <font color="#0000ff">
onSubmit="return validateInput()"</font> to confirm that text was entered (if <i>false</i> is returned from this function
the submit does not take place). One other note, to be CGI compliant when you have multiple parameters the first key is
prefaced with a <font color="#0000ff">"?"</font> and subsequent keys are prefaced with <font color="#0000ff">"&"</font>
<br>(i.e., <font color="#0000ff">"name.html?key1=value1&key2=value2"</font>).
<br><img src="images/clearspacer.gif" height="6"><br>
<form name="msgform" action="message_parm.html" method="get" onSubmit="return validateInput()">
Type in some text to display:
<input type="text" name="msg" size="50">
<input type="button" value="Display message" onClick="validateInput();return false;">
</form>
<img src="images/clearspacer.gif" height="3"><br>
On the following page that displays, to see the formatted parm look at the URL before clicking the OK button on the message.
<br><img src="images/clearspacer.gif" height="15"><br>
This is the code on the sending webpage for this example.
<pre><div class="frame"><font color="#888888">// Create a form to input the message; the action, method, and onSubmit attributes are only used by the Enter key submit</font><font color="#333399">
<form name="msgform" action="message_parm.html" method="get" onSubmit="return validateInput()">
Type in some text to display:
<input type="text" name="msg" size="50">
<input type="button" value="Display message" onClick="validateInput();return false;">
</form></font><font color="#888888">
// Format a URL containing a '?msg=' parm</font><font color="#333399">
function validateInput() {</font><font color="#888888">
// Get the keyed in text from the form</font><font color="#333399">
var msgtext = document.msgform.msg.value;
if (!msgtext) {
alert( 'Please enter some text.');
return false;
}
else {</font><font color="#888888">
// Encode the message to allow it to contain spaces</font><font color="#333399">
msgtext = escape(msgtext);</font><font color="#888888">
// Get the path to the current page and format the new URL</font><font color="#333399">
var thisurl = this.location.href;
var spliturl = thisurl.split('js.html');
var newurl = spliturl[0] + "message_parm.html?msg=" + msgtext;</font><font color="#888888">
// Display the new page</font><font color="#333399">
window.location = newurl;
}
}</font></div></pre>
<img src="images/clearspacer.gif" height="8"><br>
This is the code on the receiving webpage to display the message.
<pre><div class="frame"><font color="#888888">// Put function call in page load to extract parmed value</font><font color="#333399">
<body onLoad="messageCheck(location.href)"><font color="#888888">
// Extract the message from the URL string</font><font color="#333399">
function messageCheck(thisurl) {</font><font color="#888888">
// Unencode the URL, which was encoded in my example to allow the message to contain spaces</font><font color="#333399">
thisurl = unescape(thisurl);</font><font color="#888888">
// Extract the message from the parm in the URL</font><font color="#333399">
var spliturl = thisurl.split('?msg=');
var msg = spliturl[1];
if (msg) {</font><font color="#888888">
// Redisplay page without message parm in URL</font><font color="#333399">
window.location = newurl[0];</font><font color="#888888">
// Display the message</font><font color="#333399">
alert(msg);
}
}</font></font></div></pre>
<a name="embed_video"></a>
<img src="images/clearspacer.gif" height="10"><br>
<li><b>Embed a video dynamically in a webpage</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
On my website I used to play videos in popups using <a href= "program.html#showvideos" class="green">Perl</a>, which required one to be on a
webpage and click on a link to the video to view it, and sharing the URL to the video was impossible.<br>To overcome those limitations I created
a webpage template that I can parm any video to and play it there using JavaScript.
<p>
Now each video plays on an individual webpage with an easy to share URL you can get from the address bar when the video is playing.
<br><img src="images/clearspacer.gif" height="5"><br>
<table>
<tr>
<td colspan="3" style="font-weight: bold; font-size: 12px" height="20" valign="top"> On my server</td>
</tr>
<tr>
<td width="30"></td>
<td align="center">
<a href="play_video.html?video=divebombing.flv" class="blueulb">
<img src="images/divebombing_bird.jpg" width="96" height"70" border="0"></a>
</td>
<td valign="top">
<br><img src="images/clearspacer.gif" height="10"><br>
URL = <a href="play_video.html?video=divebombing.flv" class="blueul">http://www.penceland.com/play_video.html?video=divebombing.flv</a> (just video, no title)
</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td width="30"></td>
<td align="center">
<a href="play_video.html?video=divebombing.flv&title=Divebombing%20bird" class="blueulb">
<img src="images/divebombing_bird.jpg" width="96" height"70" border="0"><br>
Divebombing bird</a>
</td>
<td valign="top">
<br><img src="images/clearspacer.gif" height="10"><br>
URL = <a href="play_video.html?video=divebombing.flv&title=Divebombing%20bird" class="blueul">http://www.penceland.com/play_video.html?video=divebombing.flv&title=Divebombing%20bird</a> (includes optional title)
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td colspan="3" style="font-weight: bold; font-size: 12px" height="20" valign="top"> On a remote server</td>
</tr>
<tr>
<td width="30"></td>
<td align="center">
<a href="play_video.html?video=http://www.youtube.com/v/JdMbJ-gFlHU&autoplay=1&rel=0&title=Divebombing%20bird" class="blueulb">
<img src="images/divebombing_bird.jpg" width="96" height"70" border="0"><br>
Divebombing bird</a>
</td>
<td valign="top">
<br><img src="images/clearspacer.gif" height="10"><br>
URL = <a href="play_video.html?video=http://www.youtube.com/v/JdMbJ-gFlHU&autoplay=1&rel=0&title=Divebombing%20bird" class="blueul">http://www.penceland.com/play_video.html?video=http://www.youtube.com/v/JdMbJ-gFlHU&autoplay=1&rel=0&title=Divebombing%20bird</a>
</td>
</tr>
</table>
<img src="images/clearspacer.gif" height="5"><br>
<table>
<tr>
<td valign="top"><img align="top" src="images/wbullet.gif" title="o" width="16" height="16"></td>
<td valign="top"><a href="cgi-bin/print_source.pl?src=../play_video.html" class="blueulbul" onClick="javascript:windowOpener(this.href,this.target,'width=875,height=700,left=25,top=100,scrollbars=1');return false;"><span title="view source">play_video.html</span></a>
<td valign="top">-</td>
<td>My template shows how to play videos and display titles on remote servers like YouTube.<br>
To see my videos using this template play a video from one of these locations:
<select id="videos" onChange="go_to_videos()" style="width: 90px" class="drop_down">
<option selected value="">Select...</option>
<option value="music.html#music_videos">Music</option>
<option value="cool.html#video">Amusing</option>
<option value="humor.html#funny_videos">Humor</option>
<option value="humor.html#python">Monty Python</option>
<option value="humor.html#politicalsatire">Political satire</option>
</select>
</td>
</tr>
</table>
<p>
Here's how to parm a video to a webpage.
<pre><div class="frame"><font color="#888888">Format the link for the video.</font><font color="#333399">
<hr style="border: 1px dotted #999" /><a href="play_video.html?video=name-of-video.flv">
--- IMAGE or TEXT to click on ---
</a></font><font color="#888888">
On the page to display the video:
<hr style="border: 1px dotted #999" />// Put function call in page load to parse the URL</font><font color="#333399">
<body onLoad="getVideo(location.href)"></font><font color="#888888">
// Extract the video name from the URL string</font><font color="#333399">
function getVideo(thisurl) {
var spliturl = thisurl.split('?video=');
var flv_file = spliturl[1];</font><font color="#888888">
// Format the <object> tag to play a local video using a video player on the server (remote videos use their own players)
// Please note: in <a href="cgi-bin/print_source.pl?src=../play_video.html" class="green"
onClick="javascript:windowOpener(this.href,this.target,'width=1000,height=700,left=25,top=100,scrollbars=1');return false;">play_video.html</a> I use all double-quotes (some escaped) so song names can contain apostrophes (single-quotes)</font><font color="#333399">
var content = '<object type="application/x-shockwave-flash" width="500" height="375" wmode="transparent" data="video/flvplayer.swf?file=' +
flv_file + '&autostart=true"><param name="movie" value="video/flvplayer.swf?file=' +
flv_file + '&autostart=true" /><param name="wmode" value="transparent" /></object>';</font><font color="#888888">
// Update the webpage with the new <object> tag</font><font color="#333399">
document.getElementById('video').innerHTML = content;
}</font><font color="#888888">
// The video displays here:</font><font color="#333399">
<div id="video">
</div></font><font color="#888888">
To display title and play remote videos requires a little more sophisticated coding on the webpage with the links.
<hr style="border: 1px dotted #999" />For a video on my server:</font><font color="#333399">
<a href="play_video.html?video=name-of-video.flv&title=Title text goes here">
--- IMAGE or TEXT to click on ---
</a>
</font><font color="#888888">If the URL to a video on a remote server has CGI characters (which would be confused with my usage) I replace ? with | (pipe) and & with ` (backtick)
and they will be restored in <a href="cgi-bin/print_source.pl?src=../play_video.html" class="green"
onClick="javascript:windowOpener(this.href,this.target,'width=1000,height=700,left=25,top=100,scrollbars=1');return false;">play_video.html</a>.</font><font color="#888888">
A link to: <font color="#333399">http://www.youtube.com/swf/l.swf?video_id=5QFRSjWVTmY&autoplay=1</font><font color="#888888">
Becomes: <font color="#333399">http://www.youtube.com/swf/l.swf|video_id=5QFRSjWVTmY`autoplay=1</font><font color="#888888">
Now the link looks like this:</font><font color="#333399">
<a href="play_video.html?video=play_video.html?video=http://www.youtube.com/swf/l.swf|video_id=5QFRSjWVTmY`autoplay=1&title=Title text goes here">
--- IMAGE or TEXT to click on ---
</a></font>
</font></div></pre></font></font>
<a name="link_text"></a>
<img src="images/clearspacer.gif" height="10"><br>
<li><b>Format text for a link</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
If you want the text showing in a link to change dynamically, format the link text with JavaScript and subsititute it in the link using
the id="<i>name</i>" attribute of the anchor tag. Use <span id="<i>name</i>"> if you only want to replace part of the link text.
<br><img src="images/clearspacer.gif" height="12"><br>
The following code formats this link with today's date: <a href="http://www.cnn.com/" id="cnn_text">xxx</a> (check tomorrow and see a different date here)
<br><img src="images/clearspacer.gif" height="6"><br>
<pre><div class="frame"><font color="#888888">// This function must run on page load (<body onload="formatText()>).</font><font color="#333399">
function formatText() {
var today = new Date();
var yyyy = today.getYear();
if (yyyy < 1000) {
yyyy += 1900;
}
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var Month = montharray[today.getMonth()];
var dd = today.getDate();
document.getElementById('cnn_text').innerHTML = "Go to CNN.com on " + Month + " " + dd + ", " + yyyy;
}
</font><font color="#888888">
// 'xxx' in this link will be replaced by the contents of cnn_text (text to be replaced cannot be null)</font><font color="#333399">
<a href="http://www.cnn.com/" id="cnn_text">xxx</a></font></div></pre>
<img src="images/clearspacer.gif" height="15"><br>
<a name="view_tables"></a>
<li><b>View HTML tables</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
This is a really useful tool when you are working on a webpage. I am sometimes trying to duplicate something in Perl that originated as a static HTML webpage,
and this can be very helpful to help analyze my HTML output and compare it to the original.
<br><img src="images/clearspacer.gif" height="8"><br>
Create a <b>show_tables.css</b> file with this code.
<pre><div class="frame"><font color="#333399">table { border: 1px solid red ! important; }
table td { border: 1px dotted blue ! important; }
table table { border: 1px solid green ! important; }
table table td { border: 1px dotted green ! important; }
table table table { border: 1px solid red ! important; }
table table table td { border: 1px dotted orange ! important; }
/* more deeply nested tables will also be red/orange */</font></div></pre>
Create a bookmark in your browser and call it something like <b>Show tables</b>. Copy & paste the following JavaScript into the URL property. When you click it you can see the table layouts on the current page
in your browser.
<br><img src="images/clearspacer.gif" height="6"><br>
<div class="frame"><font color="#333399">javascript:(function(){var%20newSS;%20newSS=document.createElement("link");%20newSS.rel="stylesheet";%20newSS.type="text/css";%20newSS.href%20=%20"show_tables.css";%20document.getElementsByTagName("head")[0].appendChild(newSS);%20})%20()
</font></div>
<a name="dynamic_content"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Change web content dynamically</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
With the <i>getElementById</i> method's <i>innerHTML</i> property you can modify the content on a webpage after it has displayed without refreshing the page.
<p>
<table>
<tr>
<td height="25">
<font color="006060"><b><span id="change">Original content</span></b></font>
</td>
</tr>
</table>
<p>
<input type="button" value=" Change text " onClick="changeContent('The text has changed...')">
<input type="button" value="Change text + image" onClick="changeContentImage()">
<input type="button" value=" Reset " onClick="changeContent('Original content')">
<br><img src="images/clearspacer.gif" height="6"><br>
<pre><div class="frame"></font><font color="#888888">// This function replaces the content with a parmed string</font><font color="#333399">
function changeContent(webtext) {
document.getElementById('change').innerHTML=webtext;
}
</font><font color="#888888">
// Same as changeContent() without parm; handles extra quotes for image in string without syntax problems</font><font color="#333399">
function changeContentImage() {
document.getElementById('change').innerHTML='<img src="images/yinyang.gif" align=absmiddle> New text with icon . . .';
}
<span id="change">Original content</span>
<input type="button" value="Change text" onClick="changeContent('The text has changed...')"gt;
<input type="button" value="Change content" onClick="changeContentImage()">
<input type="button" value="Reset" onClick="changeContent('Original content')">
</font></div></pre>
<a name="fake_link"></a>
<img src="images/clearspacer.gif" height="10"><br>
<li><b>Emulate a link</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
Now why would you want to emulate a link, you say?. Here is one reason. For years I had playable MP3s on my <a class="green" href="music.html#songs">Music</a> page, then
I was forced to remove them (read about this there), but after I deleted the MP3s, rather than just deleting the links from the webpage, for historical
reasons I made it look like they were still there but not playable. I did this with JavaScript and style-sheet classes.
<br><img src="images/clearspacer.gif" height="15"><br>
<span class="fakelink" onMouseOver="fakeHoverOn(this)" onMouseOut="fakeHoverOff(this)" onClick="noLinkMsg()">Test this fake link with the mouse</span>
<br><img src="images/clearspacer.gif" height="15"><br>
For my links on this website I use several <a href="onlinetips.html#stylesheets" class="green">classes</a>, the most common one being one that is <span class="fakelink" title="This is not a link">blue and underlined</span>
that changes to <font color="#990033">red and non-underlined</font> when the mouse moves over it.
I created 2 classes in my CSS (style-sheet) file to emulate this action, <font color="#333399"><b>fakelink</b></font> and <font color="#333399"><b>fakehover</b></font>.
<br><img src="images/clearspacer.gif" height="8"><br>
I wrapped the "link text" in a <span> tag to be able to apply a class to it and to be able to call JavaScript functions on actions over it.
<br><img src="images/clearspacer.gif" height="6"><br>
<pre><div class="frame"></font><font color="#888888">// This class makes the text appear to be a clickable (underlined) link</font><font color="#333399">
.fakelink {font-style: normal; font-weight: normal; color: #333399; text-decoration: underline;}</font><font color="#888888">
// This class makes the text change color when the mouse hovers over it</font><font color="#333399">
.fakehover {font-size: 100%; font-style: normal; font-weight: normal; color: #990033; text-decoration: none; background-color: transparent;}
</font>
<font color="#888888">// This function, called on the mouseOver event, changes the color of the text and changes the shape of the mouse pointer to a hand (line a link would)</font><font color="#333399">
function fakeHoverOn(text) {
text.className = "fakehover";
document.body.style.cursor = 'pointer';
}
</font><font color="#888888">
// This function restores the look of a link (underlined text) when the mouse moves off the text and restores the shape of the mouse pointer</font><font color="#333399">
function fakeHoverOff(text) {
text.className = "fakelink";
document.body.style.cursor = 'default';
}
</font><font color="#888888">
// This function displays a message when the "link" is clicked on</font><font color="#333399">
function noLinkMsg() {
alert("Fooled you!\n\nEven though this looks like a link it is not!\n\n");
}
</font><font color="#888888">
// This is the "link"</font><font color="#333399">
<span class="fakelink" onMouseOver="fakeHoverOn(this)" onMouseOut="fakeHoverOff(this)" onClick="noLinkMsg()">Test this fake link with the mouse</span>
</font></div></pre>
<a name="dropdown"></a>
<img src="images/clearspacer.gif" height="10"><br>
<li><b>Drop-down menus</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
This is a nice and intuitive method to present links (see my <i>Site index</i> at the upper-right corner of each page). I also use this as a way to show content in popups (see examples under
<a href="cool.html#video" class="green">Amusing videos</a>).
<br><img src="images/clearspacer.gif" height="6"><br>
Here is a drop-down menu to branch to different areas of this page.
<form name="menuform">
<select id="dropdown" onChange="go_to_selection()" style="width: 90px" class="drop_down">
<option selected value="">Sections...</option>
<option value="#links">Links</option>
<option value="#tips">Tips</option>
<option value="#newsgroups">Newsgroups</option>
</select>
</form>
Here's the code to produce this.
<pre><div class="frame"><font color="#888888">// This function executes the menu selection</font><font color="#333399">
function go_to_selection() {
self.location.href = document.getElementById('dropdown').value;
document.getElementById('dropdown').selectedIndex = 0; </font><font color="#888888">// reset to default for return to page</font><font color="#333399">
}
</font><font color="#888888">// This creates the drop-down menu</font><font color="#333399">
<form id="menuform">
<select name="dropdown" onChange="go_to_selection()" style="width: 90px" class="drop_down">
<option selected value="">Sections...</option>
<option value="#links">Links</option>
<option value="#tips">Tips</option>
<option value="#newsgroups">Newsgroups</option>
</select>
</form>
</font></div></pre>
<a name="popup"></a>
<img src="images/clearspacer.gif" height="10"><br>
<li><b>Popup windows</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
You can show anything in a popup window that can be displayed in a webpage. It is sometimes the best way to show an image, and is usually the appropriate way to show a video.<br>
To make a popup I use a Javascript function to create the window object and I call it with the arguments for the window.open method.
<br><img src="images/clearspacer.gif" height="6"><br>
<table>
<tr>
<td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td><a href="video/AmazingJugglingFinale.swf" target="AmazingJuggling" onClick="javascript:windowOpener(this.href,
this.target,'width=400,height=300,left=300,top=200,resizable=1');return false;">Amazing Juggling Finale</a><span class="footnote">*</span></td>
<td><img src="images/left.gif" height="9" width="9" hspace="3" align="absmiddle" border="0"> a video on my website – make sure you can hear the music for this one</td>
</tr>
<tr>
<td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td><a href="images/ViewoftheWorldfrom9thAvenue.gif" target="NinthAvenue" onClick="javascript:windowOpener(this.href,
this.target,'width=330,height=450,left=10,top=10');return false;">View of the World from 9th Avenue</a></td>
<td><img src="images/left.gif" height="9" width="9" hspace="3" align="absmiddle" border="0"> an image on my website – Saul Steinberg's classic <i>New Yorker</i> cartoon</td>
</tr>
<tr>
<td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td><a href="http://en.wikipedia.org/wiki/Leonard_P._Zakim_Bunker_Hill_Memorial_Bridge" target="Zakim" onClick="javascript:windowOpener(this.href,
this.target,'width=750,height=480,left=200,top=100,scrollbars');return false;">The Zakim Bridge</a></td>
<td><img src="images/left.gif" height="9" width="9" hspace="3" align="absmiddle" border="0"> a webpage on a remote website (<i>Wikipedia</i>)</td>
</tr>
<tr>
<td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td><a href="http://www.youtube.com/v/Ye3Lk9C-4VA" target="Clarke" onClick="javascript:windowOpener(this.href,
this.target,'width=450,height=360,left=100,top=100,resizable=1');return false;">Stanley Clarke - School Days</a><span class="footnote">*</span></td>
<td><img src="images/left.gif" height="9" width="9" hspace="3" align="absmiddle" border="0"> a webpage on a remote website (<i>YouTube</i>)</td>
</tr>
<tr>
<td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td><a href="boca_slideshow.html" onClick="javascript:windowOpener(this.href,this.target,'width=660,height=530,left=100,top=100,resizable=no,scroolbar=no,status=no');return false;"
class="green">Boca Bridge photos</a>
<td><img src="images/left.gif" height="9" width="9" hspace="3" align="absmiddle" border="0"> a slide show of vacation photos</td>
</tr>
</table>
<img src="images/clearspacer.gif" height="6"><br>
<span class="footnote">*</span>
this works in <a href="http://www.mozilla.com/" class="blueulb"><i>Firefox</i></a> and <a href="http://www.opera.com/" class="blueulb"><i>Opera</i></a> but is quirky in IE
<br><img src="images/clearspacer.gif" height="12"><br>
<table>
<tr>
<td>
<form name="videoform">
<select id="videos" onChange="go_to_videos()" style="width: 90px" class="drop_down">
<option selected value="">See videos...</option-->
<option value="cool.html#video">Amusing</option>
<option value="humor.html#funny_videos">Humor</option>
<option value="humor.html#python">Monty Python</option>
<option value="humor.html#politicalsatire">Political satire</option>
<option value="music.html#music_videos">Music</option>
</select>
</form>
</td>
<td valign="top">
On my website I like to show Flash videos in popups by generating webpages in <a href="program.html#showvideos" class="green">Perl</a> that embed a player.
</td>
</tr>
</table>
<img src="images/clearspacer.gif" height="6"><br>
Here's the code for creating popups.
<pre><div class="frame"><font color="#888888">// This creates the window object and shows what is in the href argument</font><font color="#333399">
function windowOpener(ref, target, parms) {
popupWindow=window.open(ref, target, parms);
popupWindow.focus();
}
</font><font color="#888888">
// Call the windowOpener function for the video example above</font><font color="#333399">
<a href="video/AmazingJugglingFinale.swf" target="AmazingJuggling" onClick="javascript:windowOpener(this.href,
this.target,'width=400,height=300,left=300,top=200,resizable=1');return false;">Amazing Juggling Finale</a>
</font><font color="#888888">
// Call the windowOpener function for the image example above</font><font color="#333399">
<a href="images/ViewoftheWorldfrom9thAvenue.gif" target="NinthAvenue" onClick="javascript:windowOpener(this.href,
this.target,'width=330,height=450,left=10,top=10');return false;">View of the World from 9th Avenue</a>
</font><font color="#888888">
// Call the windowOpener function for the webpage example above</font><font color="#333399">
<a href="http://www.boston.com/traffic/bigdig/special/galleries/bridge/intro.htm" target="Zakim" onClick="javascript:windowOpener(this.href,
this.target,'width=750,height=480,left=200,top=100');return false;">The Zakim Bridge</a>
</font><font color="#888888">
// Call the windowOpener function for the remote video example above (uses the FLV player on YouTube)</font><font color="#333399">
<a href="http://www.youtube.com/v/Ye3Lk9C-4VA" target="Clarke" onClick="javascript:windowOpener(this.href,
this.target,'width=450,height=360,left=100,top=100,resizable=1');return false;">Stanley Clarke - School Days</a>
</font></div></pre>
<a name="file_input"></a>
<img src="images/clearspacer.gif" height="10"><br>
<li><b>File input in HTML forms</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
Here is how to select a file from your PC or network and include it into a form. Clicking the Browse button will display the Open dialog.
This is an <i>input</i> element, so if you want to do any editing that may result in showing the selected file in the form you will have to use
<a href="#ajax" class="green">Ajax</a> on your form submit to keep the file displayed while you process it.
<br><img src="images/clearspacer.gif" height="15"><br>
<form>
Select a file: <input type="file" size="40"> <span title="Form submit button"><input type="button" value="Do something with file . . ." onclick="javascript:alert('File submitted for processing...')"></span>
</form>
<img src="images/clearspacer.gif" height="10"><br>
The code for this is pretty simple.
<pre><div class="frame"><font color="#333399"><form>
Select a file: <input type="file" size="40"> </font><font color="#888888"> [ fake submit button here in the example ]</font><font color="#333399">
</form></font></div></pre>
<a name="ajax"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Ajax</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
<form name="ajax_form">
Normally, in web applications, when you want to show new content you must load a new page or reload the current page to present it. Using <a
href="http://java.sun.com/developer/technicalArticles/J2EE/AJAX/" class="blueulb">Ajax</a> (Asynchronous JavaScript and XML) you can
get data from the server and load it into the current webpage dynamically, which makes a web application appear more like a desktop application.
<br><img src="images/clearspacer.gif" height="8"><br>
You use Ajax to access the server from the current webpage to grab a document or run a script that returns something to display. I am using
it to perform these functions on several of my webpages. These all use Ajax to format the content when the page initially loads, but some will
also reformat the page content after the user interacts with it (for instance, <a href="dog_walks.html" class="green">Dog walks</a> and <a
href="mypics.html" class="green">Mypics</a>).<br>
<select id="ajax_pages" onChange="goto_ajax_page()" style="font-size: 9pt; width: 110px" class="drop_down">
<option selected value="#ajax">Ajax pages...</option>
<option value="dog_walks.html">Dog walks</option>
<option value="my_songs.html">My songs</option>
<option value="ebooks.html">My eBooks</option>
<option value="gallery.html#photography">My photography pages</option>
<option value="show_perl.html?run=cgi-bin/skip.pl">Class reunion photos</option>
<option value="aerials.html">Aerial photos</option>
<option value="awcrap.html">Things that make you say, "AW Crap!!!"</option>
<option value="cranes_at_work.html">Truck cranes at work</option>
<option value="seen_it_all.html">Maybe you haven't seen it all</option>
<option value="good_ideas.html">Just when you thought all the good ideas were taken...</option>
<option value="time_on_hands.html">Too much time on your hands?</option>
<option value="imagination.html">Some people have incredible imagination</option>
<option value="europe_photos.html">Europe photos</option>
</select>
</form>
<img src="images/clearspacer.gif" height="2"><br>
I have several pages that use Ajax to create thumbnails to click on to see fullsize images. When you click the <i>Back</i> button to return to
the page with thumbnails, the browser will reload that page. If your page has more than one script that can be run for content (I do) you want
to make sure the correct script is run when the page reloads. You have to maintain the state of your page to do this (see my code <a href=
"#ajax_state" class="green">below</a>).
<br><img src="images/clearspacer.gif" height="8"><br>
In the following code example I am displaying the output from the request by changing the content of a DIV.
<pre><div class="frame"><font color="#888888">// The Ajax Javascript functions</font><font color="#333399">
function getData(url) {
</font><font color="#888888">// Create the XMLHttpRequest object</font><font color="#333399">
if (window.XMLHttpRequest) { </font><font color="#888888">// Non-IE browsers</font><font color="#333399">
http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { </font><font color="#888888">// IE</font><font color="#333399">
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
</font><font color="#888888">// Make the request</font><font color="#333399">
http_request.onreadystatechange = processRequest;
http_request.open('GET', url, true);
http_request.send(null);
}
function processRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) { </font><font color="#888888">// process the response after the server has completed the request</font><font color="#333399">
var someXML = http_request.responseText; </font><font color="#888888">// the request expects XML to be returned, so you may want to parse it</font><font color="#333399">
document.getElementById('PageContent').innerHTML = someXML; </font><font color="#888888">// change the content of the DIV</font><font color="#333399">
}
else {
alert('There was a problem with the request.');
}
}
}
</font><font color="#888888">// On the webpage . . .</font><font color="#333399">
<input type="button" value="Get some data" onClick="getData('<i>someURL</i>')"> </font><font color="#888888">// value of '<i>someURL</i>' could contain the name of a document or a script to run</font><font color="#333399">
<div id="PageContent"><div class="frame"></font>
<font color="#888888">The content of this section will be changed in the processRequest() function.</font><br>
</div><font color="#333399"></div></font></div></pre>
<a name="ajax_state"></a>
<img src="images/clearspacer.gif" height="5"><br>
Use a hidden input variable to maintain state in Ajax
<pre><div class="frame"><font color="#888888">// Call this function when the page loads</font><font color="#333399">
function load_content() {
var last_content = document.getElementById('cur_content').value;
if (last_content == '') {
replace_content('<i>default-content</i>');<font color="#888888"> // Load default content on initial display of page</font><font color="#333399">
}
else {
replace_content(last_content);<font color="#888888"> // If hidden variable has saved value redisplay this content</font><font color="#333399">
}
}
function replace_content(request) {
document.getElementById('cur_content').value = request;<font color="#888888"> // Save request value to be detected by browser on next page load
(...rest of replace_content function here...)</font><font color="#333399">
}
<body onLoad="load_content()">
<input type="hidden" id="cur_content" value="">
</div></pre></font><font color="#000000">
<img src="images/clearspacer.gif" height="5"><br>
I also created an Ajax page that extracts the perl script to call from the URL. I am using this on my website to show some
<a href="show_perl.html?run=cgi-bin/skip.pl" class="green">class reunion photos</a> (notice the URL when you click this).
<pre><div class="frame"><font color="#888888">// Call this function when the page loads</font><font color="#333399">
function start_here(thisurl) {
</font><font color="#888888">// Extract perl script to run</font><font color="#333399">
thisurl = unescape(thisurl);
var spliturl = thisurl.split('?run=');
var script = spliturl[1];
replace_content(script)
}
function replace_content(script_to_run) {
if (window.XMLHttpRequest) { </font><font color="#888888">// Non-IE browsers</font><font color="#333399">
http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { </font><font color="#888888">// IE</font><font color="#333399">
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
http_request.onreadystatechange = processRequest;
http_request.open('GET', script_to_run, true);
http_request.send(null);
}
function processRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
document.getElementById('PageContent').innerHTML = http_request.responseText;
}
}
}
</font><font color="#888888">// On the webpage . . .</font><font color="#333399">
<body onLoad="start_here(location.href)">
<div id="PageContent"><div class="frame"></font>
<font color="#888888">The content of this section will be changed in the processRequest() function.</font><br>
</div><font color="#333399"></div></font></div></pre>
<a name="textedit"></a>
<img src="images/clearspacer.gif" height="10" border="0"><br>
<li><b>Editing text strings</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
One thing I have always enjoyed doing, in a variety of languages, is editing strings of text. The JavaScript <i>substring</i> method is a
typical function for this where you work with characters in a string by specifying a <i>starting position</i> and an <i>offset</i> number of
characters. One quirky thing about using this method is that the offset value (2nd parameter) is one greater position than the postion of the
last character you want, because the offset starts at 1 rather than 0 (like the first postion of the string).
<p>
<pre><div class="frame"><font color="#888888">// Extract text into a variable </font><br><font color="#333399">var variable-name = string-of-text.substring(starting-position,offset) </font></div></pre>
<p>
I had a task in a project where I work to emulate a check writing process, i.e. formatting the entered amount with punctuation and also creating
a text version of the amount the way it is on a check.
<p>
<table>
<tr><td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td valign="top"><a href="dollar_format.html" class="green">Formatting dollars for a check</a></td>
</tr>
</table>
<a name="slideshow"></a>
<img src="images/clearspacer.gif" height="10" border="0"><br>
<li><b>Slide show</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
I had a sequence of photos from a Florida vacation that I wanted to present in a slide show. After Googling how to do this and seeing software
packages to download, and JavaScript that was huge, I created it myself in a <a href="cgi-bin/print_source.pl?src=../boca_slideshow.html" class=
"green" onClick= "javascript:windowOpener(this.href,this.target,'width=1000,height=700,left=25,top=100,scrollbars=1');return false;">template</a>
that displays in a <a href="boca_slideshow.html" onClick=
"javascript:windowOpener(this.href,this.target,'width=660,height=530,left=100,top=100,resizable=no,scroolbar=no,status=no');return false;"
class="green">popup</a>.
<p>
One way to show slideshows is to use 2 buttons over or under the photo<br>
<input type="button" value="<< Previous "> || <input type="button" value=" Next >> ">
<p>
Another way is with a series of boxes under the photo with numbers representing the different photos<br>
<table><tr><td height='30' width='30' bgcolor='#999999' align='center' style='color: #ffffff;background-color:#999999;text-decoration: none'><<</td>
<td width='30' align='center' style='color: #ffffff;background-color:#444444'>1</td>
<td width='30' align='center' style='color: #ffffff;background-color:#999999'>2</td>
<td width='30' align='center' style='color: #ffffff;background-color:#999999'>3</td>
<td width='30' align='center' style='color: #ffffff;background-color:#999999'>4</td>
<td width='30' align='center' style='color: #ffffff;background-color:#999999'>5</td>
<td width='30' align='center' style='color: #ffffff;background-color:#999999;text-decoration: none'>>></td></tr></table>
<p>
<table>
<tr><td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td valign="top"><a href="boca_slideshow.html" onClick=
"javascript:windowOpener(this.href,this.target,'width=660,height=530,left=100,top=100,resizable=no,scroolbar=no,status=no');return false;"
class="green">Boca Bridge photos</a>
</td>
<td valign="top">–</td>
<td valign="top">in a popup (2 buttons - A below)</td>
</tr>
<tr><td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td valign="top"><a href="leons_bentley.html" class="green">Leon's Bentley</a></td>
<td>–</td>
<td>on a webpage (boxes - B below)</td>
</tr>
<tr><td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td valign="top"><a href="grove_isle_hotel.html" class="green">Grove Isle hotel</a></td>
<td>–</td>
<td>slide show with captions (<a href= "cgi-bin/print_source.pl?src=../grove_isle_hotel.html" class="green" onClick=
"javascript:windowOpener(this.href,this.target,'width=1000,height=700,left=25,top=100,scrollbars=1');return false;">view source</a> on page to see how this's done)
</td>
</tr>
<tr><td><img src="images/dot.gif" title="-" hspace="5" width="4" height="10"></td>
<td valign="top"><a href="fan_pier.html" class="green">Fan Pier</a></td>
<td>–</td>
<td>a little fancier with the button labels</td>
</tr>
</table>
<img src="images/clearspacer.gif" height="15"><br>
Here's the code for the slide show using 2 buttons.
<pre><div class="frame"><font color="#888888">// Toggle 10 photos with this function</font><font color="#333399">
function show_pic(thispic) {
var nextpic = '';
var prevpic = '';
</font><font color="#888888">// The first and last photo are hard-coded</font><font color="#333399">
if (thispic == '1') {
nextpic = '2';
prevpic = '10';
}
else if (thispic == '10') {
nextpic = '1';
prevpic = '9';
}
else { </font><font color="#888888">// All the rest of the photos use this logic</font><font color="#333399">
var thisNbr = parseFloat(thispic); </font><font color="#888888">// Convert to numeric for incrementing or decrementing</font><font color="#333399">
nextpic = thisNbr + 1;
prevpic = thisNbr - 1;
</font><font color="#888888">// Convert back to strings</font><font color="#333399">
nextpic += '';
prevpic += '';
}
</font><font color="#888888">// Use either of these 2 methods (A or B) to show the photos. The </font><font color="#008B45">green code</font><font color="#888888"> needs to be on 1 line but wrapped here for the display
// A - this is the 2-button technique</font><font color="#008B45">
var slide_show = "<img src=\"<i>path-to-pic</i>/" + thispic + ".jpg\"><p>
<input type=\"button\" value=\"<< Previous\" onClick=\"javascript:show_pic('" + prevpic + "')\"> ||
<input type=\"button\" value=\" Next >> \" onClick=\"javascript:show_pic('" + nextpic + "')>";</font>
<font color="#888888">// B - this is the boxes underneath technique (also wrapped here)</font><font color="#008B45">
var slide_show = "<img src='pics/bentley/" + thispic + ".jpg' width='640' height='480'>
<table><tr><td height='30' width='30' bgcolor='#999999'
align='center'><a href=\"javascript:show_pic('" + prevpic + "')\"
style=\"color: #ffffff; text-decoration: none\">&lt;&lt;</a></td>";</font><font color="#333399">
var i=1;
for (i=1; i<=6; i++) {
color_style = 'style=\"background-color:#999999\"';
if (i == thispic) {
color_style = 'style=\"background-color:#666666\"';
}
</font><font color="#888888">// (this is one line but wrapped here)</font><font color="#008B45">
slide_show += "<td width='30' align='center'" + color_style + "><a href='javascript:show_pic(\"" + i + "\")'
style=\"color: #ffffff; text-decoration: none\">" + i + "</a></td>";
</font><font color="#333399">}
</font><font color="#888888">// (this is one line but wrapped here)</font><font color="#008B45">
slide_show += "<td width='30' bgcolor='#999999' align='center'><a href=\"javascript:show_pic('" + nextpic + "')\"
style=\"color: #ffffff; text-decoration: none\">&gt;&gt;</a></td></tr></table>";</font><font color="#333399">
document.getElementById('slideshow').innerHTML = slide_show;
}
<body onLoad="show_pic('1')">
<div id="slideshow" align="center"><div class="short_frame"></font>
<font color="#888888">Output from show_pic() displays here.</font><br>
</div><font color="#333399"></div></font>
</div></pre>
<a name="close_window"></a>
<img src="images/clearspacer.gif" height="10"><br>
<li><b>Close current window</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
You can close the current window from a webpage, even on a new tab, without a warning.
<span style="vertical-align:middle">
<input type="button" value="See it in action" onClick="javascript:windowOpener('window_close.html',this.target,'width=400,height=300,left=300,top=200,resizable=1')">
</span>
<br><img src="images/clearspacer.gif" height="10"><br>
Run this function on the page.
<pre><div class="frame"><font color="#333399">function close_window() {
window.open('','_self','');
window.close();
}</font>
</div></pre>
<a name="chars_in_space"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Adjust number of characters to fit variable width space</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
<span style="vertical-align:middle">On my webpage for <input type="button" value="ASCII Art" onClick="window.location='ascii.html'"></span> I
have sections of the page divided by dashed separators that might vary based on the window width of the browser. Here is the code to create this:
<br><img src="images/clearspacer.gif" height="10"><br>
<pre><div class="frame"><font color="#888888">// Create divs where you want the output to appear on the page (I have 4 on this page)</font><font color="#333399">
<div id="dashes1" style="display:inline"></div>
<div id="dashes2" style="display:inline"></div>
</font><font color="#888888">// Run this when the page loads</font><font color="#333399">
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
var screen_width = w.innerWidth || e.clientWidth || g.clientWidth;
var nbr_chars = parseInt(screen_width / 6.3); </font><font color="#888888">// Let's use a ratio of 200 chars in a 1280px display</font><font color="#333399">
nbr_chars = nbr_chars - 28; </font><font color="#888888">// Subtract consistent set of leading characters on line</font><font color="#333399">
var dashes = '';
for (i = 0; i < nbr_chars; i++) {
dashes += "=";
}
document.getElementById('dashes1').innerHTML = dashes;
document.getElementById('dashes2').innerHTML = dashes;</font>
</div></pre>
<a name="black_background"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Suppress black background in Firefox when displaying image</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
I think this might be a bug, but I noticed when you display an image only, like a .jpg or .gif file, in the Firefox browser it ignores your
background color setting and makes it black. I wanted to override this so I created a <a href= "cgi-bin/print_source.pl?src=../picture.html"
class="blueulbul" onClick= "javascript:windowOpener(this.href,this.target,'width=875,height=700,left=25,top=100,scrollbars=1');return false;"><span
title="view source"> template</span></a> to display images. I made it so I could parm text to be displayed above and below the image. Besides
suppressing the black background it is nice to be able to comment the images when you display them.
<p>
You can see this being used all over the place on my <a href="gallery.html" class="green">Gallery</a> and <a href="payette.html" class="green">Payette</a> webpages.
<br><img src="images/clearspacer.gif" height="10"><br>
<pre><div class="frame"><font color="#888888">// Instead of using this code for an image link...</font><font color="#333399">
<a href="dir/image_name.jpg">
</font><font color="#888888">// Make it look like this...</font><font color="#333399">
<a href="picture.html?image=dir/image_name.jpg">
<a href="picture.html?image=dir/image_name.jpg&topcap=Words to put above of image"> </font><font color="#888888">// Add words above image</font><font color="#333399">
<a href="picture.html?image=dir/image_name.jpg&topcap=Words to put above of image&comment=Words to put below image"> </font><font color="#888888">// Add words below image</font>
</div></pre>
<a name="process_array"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Process file list in array</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
I wanted to create a slideshow from photos in a directory that could change over time. I use perl to build a list of the current files in the
directory, and return the list to javascript, where I put it into an array for processing.
<p>
You can see this being used on my <a href="talbot_slideshow.html" class="green">Remodeling photos</a> page.
<br><img src="images/clearspacer.gif" height="10"><br>
<pre><div class="frame"><font color="#888888">// The files are in a list here...</font><font color="#333399">
var filelist = http_request.responseText; </font><font color="#888888">// This is the result of a perl call; view source of example above to see how this is done with <a href="#ajax" style="color:#666666">Ajax</a>.</font><font color="#333399">
var file_array = response.split('|'); </font><font color="#888888">// Format is filename|filename|filename
// Now I have an array consisting of the file names</font><font color="#333399">
for (i = 0; i < file_array.length; i++) {
var filename = file_array[i];</font><font color="#888888">
// Do something here with file name
<b>. . .
. . .
. . .</b></font><font color="#000000">
}
</div></pre>
<a name="jquery_toggle"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Display sub-text on link with jQuery</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a>
<br><img src="images/clearspacer.gif" height="8"><br>
I created an FAQ webpage that displayed a list of topics that you clicked on to view more information. I used the jQuery 'toggle' method to achieve this.<br>
I'm using jQuery from Google here ( <i>src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"</i> ) but you might prefer it to be located on your local server.
<p>
<ol>
<li><a href="javascript:toggleDiv('#aaa');" style="font-weight:bold;color:#3B6AA0;text-decoration:none">Click here to read information about topic</a>
<div id="aaa" style="display:none">
<table><tr><td>
This is the information that displays about topic 1.<br>
This is the information that displays about topic 1.<br>
This is the information that displays about topic 1.
</td></tr></table>
</div>
<p>
<li><a href="javascript:toggleDiv('#bbb');" style="font-weight:bold;color:#3B6AA0;text-decoration:none">Click here to read information about topic</a>
<div id="bbb" style="display:none">
<table><tr><td>
This is the information that displays about topic 2.<br>
This is the information that displays about topic 2.<br>
This is the information that displays about topic 2.
</td></tr></table>
</div>
<p>
<li><a href="javascript:toggleDiv('#ccc');" style="font-weight:bold;color:#3B6AA0;text-decoration:none">Click here to read information about topic</a>
<div id="ccc" style="display:none">
<table><tr><td>
This is the information that displays about topic 3.<br>
This is the information that displays about topic 3.<br>
This is the information that displays about topic 3.
</td></tr></table>
</div>
<p>
<li><a href="javascript:toggleDiv('#ddd');" style="font-weight:bold;color:#3B6AA0;text-decoration:none">Click here to read information about topic</a>
<div id="ddd" style="display:none">
<table><tr><td>
This is the information that displays about topic 4.<br>
This is the information that displays about topic 4.<br>
This is the information that displays about topic 4.
</td></tr></table>
</div>
<p>
<li><a href="javascript:toggleDiv('#eee');" style="font-weight:bold;color:#3B6AA0;text-decoration:none">Click here to read information about topic</a>
<div id="eee" style="display:none">
<table><tr><td>
This is the information that displays about topic 5.<br>
This is the information that displays about topic 5.<br>
This is the information that displays about topic 5.
</td></tr></table>
</div>
</ol>
<img src="images/clearspacer.gif" height="10"><br>
<pre><div class="frame"><font color="#888888">// Load access to jQuery in the <head> section.</font><font color="#333399">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></font><font color="#888888">
// Create a javascript funtion containing the jQuery method to run when the link is clicked.</font><font color="#333399">
function toggleDiv(divId) {
$(document).ready(function() {
$(divId).toggle();
});
}</font><font color="#888888">
// This is the html code - it won't display the table until clicked.</font><font color="#333399">
<ol>
<li><a href="javascript:toggleDiv('#aaa');" style="font-weight:bold;color:#3B6AA0;text-decoration:none">Click here to read information about this topic</a>
<div id="aaa" style="display:none">
<table><tr></td>
This is the information that displays about topic 1.
This is the information that displays about topic 1.
This is the information that displays about topic 1.
</td></tr></table>
</div>
<p>
<li><a href="javascript:toggleDiv('#bbb');" style="font-weight:bold;color:#3B6AA0;text-decoration:none">Click here to read information about this topic</a>
<div id="bbb" style="display:none">
<table><tr></td>
This is the information that displays about topic 2.
This is the information that displays about topic 2.
This is the information that displays about topic 2.
</td></tr></table>
</div>
etc<b>...</b>
etc<b>...</b>
etc<b>...</b>
</ol>
</div></pre>
<font color="black">
<a name="blink"></a>
<br><img src="images/clearspacer.gif" height="12"><br>
<li><b>Blinking text</b> <a href="#tips"><img src="images/up_arrow.jpg" align="absmiddle" width="15" height="15" hspace="4" border="0" title="Go to tips list"></a><br>
Here's how to make blinking text in Javascript.
<br><img src="images/clear.gif" height="5"><br>
Create a subroutine and invoke it when the page loads.
<br><img src="images/clear.gif" height="5"><br>
<span style="font-weight:bold;color:#3B6AA0">
function onload() {<br>
JSBlink();<br>
}<br>
function JSBlink() {<br>
var blinks = document.getElementsByTagName('JSBlink');<br>
for (var i = blinks.length - 1; i >= 0; i--) {<br>
var s = blinks[i];<br>
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';<br>
}<br>
window.setTimeout(JSBlink, 1000);</span> <img src="images/left.gif"> set speed of blinking<br>
}
<br><img src="images/clear.gif" height="10"><br>
Put the new <span style="font-weight:bold;color:#3B6AA0"><JSBllink></span> tag where you want the text to blink.<br>
<span style="font-weight:bold;color:#3B6AA0">
<JSBlink>This text will blink</JSBlink>
</span>
<br><img src="images/clear.gif" height="5"><br>
</ul>
<hr>
<a name="newsgroups"></a>
<p>
<span style="font-size:18px;font-weight:bold">JavaScript newsgroups</span><img src="images/discussion.gif" align="absmiddle" hspace=15 width=41 height=31 title="Newgroups">
<!-- using table to indent -->
<table>
<tr><td> </td>
<td>I used to have several JavaScript usenet groups listed here but they don't seem to function in browsers anymore, so I am just providing a link to
Google Groups, where they are offered in a web format.
</td>
</tr>
</table>
<img src="images/clearspacer.gif" height="8"><br>
<a href="http://groups.google.com/group/comp.lang.javascript/topics"><img align="top" src="images/google_groups_icon.gif" title="o" hspace="5" vspace=1 width="16" height="16" border="0">comp.lang.javascript</a>
<p>
There are more newsgroups on my <a href="program.html#newsgroups" class="green"><b>Programming</b></a> page.
<p>
<!-- Insert the footer from an external file -->
<script type="text/javascript" language="JavaScript" type="text/javascript" src="footer.js"></script>
</body>
</html>