JavaScript - PENCELAND.com

Image rollover

A popular JavaScript technique is image swapping in response to mouse events, which is sometimes referred to as rollover. I use this to achieve the animated effect you see when you click on the navigation buttons I put on my pages.

Click this button to see image swapping in action:

click for demo

This animation is produced from these 3 images:

The default image is Image 1, and it responds to mouse movements in the following ways:

When you move the mouse over the button it is highlighted (Image 2 replaces Image 1).
When you click the button down it is depressed (Image 3 replaces Image 2).
When you release the mouse button with the mouse still over the button it returns to the highlighted state (Image 2 replaces Image 3).
When you move the mouse off the image it returns to its normal state (Image 1 is restored).

One of the standards in 3D visual programming is that the source of light is from the upper-left, 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 main page, where it helps in identifying which of the closely placed buttons will receive the mouse click.

Here is the code for the image swapping on this button.

// Preload the images to maximize performance
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";

// Switch In, Out, and Highlight button images
function imageSwap(imgID,imgName) {
  document.images[imgID].src = eval(imgName + ".src")
}

<!-- Call the image swapping function from the mouse events. -->
<a href="target location here" 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>

Preload images

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 my 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 Internet Explorer (it works seamlessly in Netscape) 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.

Set it up this way on a page with lots of images.

// Put these in the <head> section
background = new Image();        background.src = "myback.gif";
   ... create objects with actual dimensions of images
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";

// Put these in the <body> section
<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">

Inserting page headers and footers

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.

In a text editor create the HTML code you want to appear as your header (or footer).

 <table>
    <tr valign="middle">
      <td>
        <a href="index.html" onMouseDown="imageSwap('home_btn','homeOn')"
        . . . this goes on . . .

Remove all the line breaks so the code appears on a single line (this is important).

<table><tr valign="middle"><td><a href="index.html" onMouseDown="imageSwap('home_btn','homeOn')" . . .

Enclose this line of HTML inside a document.write statement with parentheses and single quotes.

document.write('<table><tr valign="middle"><td><a href="index.html" onMouseDown="imageSwap('home_btn','homeOn')" . . .')

Escape any other single quotes in your code with a backslash (\), or JavaScript will terminate the string when it encounters the 2nd single quote.
```
document.write('<table><tr valign="middle"><td><a href="index.html" onMouseDown="imageSwap(\'home_btn\',\'homeOn\')" . . .')
```
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.
Insert the following JavaScript line at the location where you want this code to be placed in your webpage.
```
<script language="JavaScript" type="text/javascript" src="header.js"></script>
```

Here is an example of how my webpages used to be constructed before removing the header and footer source code.

Using functions with forms

With the onClick 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 Home page.

View the source code.

Cookies

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.

Here is an example that does three things with a cookie: Create, Retrieve, and Delete

Here is the code for this example.

// Create the cookie with the text keyed into the form
function setCookie(name) {
  var cookieText = document.myform.text.value;
  if (cookieText != "") {
    var today = new Date();                             // Set the cookie to
    var oneYear = (1000 * 60 * 60 * 24 * 365);          //   expire in one
    var expDate = new Date(today.getTime() + oneYear);  //   year from today
    document.cookie=name + "=" + escape(cookieText) +
                  "; expires=" + expDate.toGMTString();
    document.myform.text.value = "";                    // Clear the form
  }
}

// Retrieve the cookie text and display it in the form
function getCookie(name) {
  var cookies = document.cookie.split("; ");            // Get all cookies from file
  var cookieValue = " ";
  for (var i=0; i < cookies.length; i++) {
    values = cookies[i].split("=");                     // Extract cookie name & value
    if (values[0] == name)                              // If this cookie is found
      cookieValue = unescape(values[1]);                //   save the value
    }
  }
  document.myform.text.value = cookieValue;             // Show cookie value on form
}

// "Delete" the cookie by expiring it
function deleteCookie(name) {
  var today = new Date();
  var expDate = new Date(today.getTime() - 1);
  document.cookie=name + "=; expires=" + expDate.toGMTString();
  document.myform.text.value = "";
}

// This goes in the <body> section
<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>

Formatting dates

Showing today's date
You can obtain the current date and manipulate it using JavaScript.

The following code shows today's date as:

<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>

Showing the date a webpage was last changed
The lastModified property of the Document Object Model (DOM) returns the date a webpage was last changed.

The following code shows this page was last modified on:

<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>

Using this property you can create a bookmark to see the date a webpage you are viewing was last changed.
Give it a name like Date modified and in the URL property put

 javascript:alert(document.lastModified)

Scrolling text in the status bar

The following code produces this scrolling effect.

var msgText = "      ... Click the button again to clear this message ...     "
var msg = " "
var delay = 150
var timerID = null
var messageOn = false

// 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)
}

<form>
<input type = "button" value = "Press me" onClick = "msgFunction()">
and look at the message area at the bottom of the browser window . . .
</form>

A swirling mouse trail clock

I didn't write this original code (I found it on Kurt Grigg's DHTML site) but I have modified it some. I find it very dazzling.

click to see

Return to the previous browser location

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).

Here's the code.

<input type="button" value="<< Back" onClick="history.go(-1)">

Change the background color of a table cell

Click on your color choice, or click another color to change.

Here's the code that does this.

// Put this code in the <head> section
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 cell
  radiobutton.parentNode.style.backgroundColor = bgColor;
}

// Put this code in the body section
<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>

Use checkboxes to simulate radio buttons

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).

C H E C K B O X E S

R A D I O B U T T O N S

A B C

Here's the code that does the radio button simulation.

// Put this code in the <head> section
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;
    }
  }
}

// Put this code in the body section
<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>

Prompt confirm before action

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.

Go to tips list <-- uses one line of code

Go to tips list <-- uses JavaScript function

// This is with one line of code
<a href="#tips" onClick="Javascript:return confirm('Are you sure this is what you want to do?')">Go to tips list</a>


// This is using a function
<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;
  }
}

Pass information between webpages

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 Display message button the validateInput() 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 action="?" when the Enter key is pressed. You can disable 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 must put the attribute method="get" on the form so the submitted URL will be in the GET format. In this example I also added onSubmit="return validateInput()" to confirm that text was entered (if false 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 "?" and subsequent keys are prefaced with "&"
(i.e., "name.html?key1=value1&key2=value2").

On the following page that displays, to see the formatted parm look at the URL before clicking the OK button on the message.

This is the code on the sending webpage for this example.

// Create a form to input the message; the action, method, and onSubmit attributes are only used by the Enter key submit
<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>

// Format a URL containing a '?msg=' parm
function validateInput() {
  // Get the keyed in text from the form
  var msgtext = document.msgform.msg.value;
  if (!msgtext) {
    alert( 'Please enter some text.');
    return false;
  }
  else {
    // Encode the message to allow it to contain spaces
    msgtext = escape(msgtext);
    // Get the path to the current page and format the new URL
    var thisurl = this.location.href;
    var spliturl = thisurl.split('js.html');
    var newurl = spliturl[0] + "message_parm.html?msg=" + msgtext;
    // Display the new page
    window.location = newurl;
  }
}

This is the code on the receiving webpage to display the message.

// Put function call in page load to extract parmed value
<body onLoad="messageCheck(location.href)">

// Extract the message from the URL string
function messageCheck(thisurl) {
  // Unencode the URL, which was encoded in my example to allow the message to contain spaces
  thisurl = unescape(thisurl);
  // Extract the message from the parm in the URL
  var spliturl = thisurl.split('?msg=');
  var msg = spliturl[1];
  if (msg) {
    // Redisplay page without message parm in URL
    window.location = newurl[0];
    // Display the message
    alert(msg);
  }
}

Embed a video dynamically in a webpage

On my website I used to play videos in popups using Perl, 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.
To overcome those limitations I created a webpage template that I can parm any video to and play it there using JavaScript.

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.

On my server

URL = http://www.penceland.com/play_video.html?video=divebombing.flv (just video, no title)

Divebombing bird

URL = http://www.penceland.com/play_video.html?video=divebombing.flv&title=Divebombing%20bird (includes optional title)

On a remote server

Divebombing bird

URL = http://www.penceland.com/play_video.html?video=http://www.youtube.com/v/JdMbJ-gFlHU&autoplay=1&rel=0&title=Divebombing%20bird

play_video.html - My template shows how to play videos and display titles on remote servers like YouTube.
To see my videos using this template play a video from one of these locations:

Here's how to parm a video to a webpage.

Format the link for the video.
<a href="play_video.html?video=name-of-video.flv">
--- IMAGE or TEXT to click on ---
</a>

On the page to display the video:
// Put function call in page load to parse the URL
<body onLoad="getVideo(location.href)">

// Extract the video name from the URL string
function getVideo(thisurl) {
  var spliturl = thisurl.split('?video=');
  var flv_file = spliturl[1];
  // 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 play_video.html I use all double-quotes (some escaped) so song names can contain apostrophes (single-quotes)
  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>';
  // Update the webpage with the new <object> tag
  document.getElementById('video').innerHTML = content;
}

// The video displays here:
<div id="video">
</div>


To display title and play remote videos requires a little more sophisticated coding on the webpage with the links.
For a video on my server:
<a href="play_video.html?video=name-of-video.flv&title=Title text goes here">
--- IMAGE or TEXT to click on ---
</a>

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 play_video.html.
  A link to: http://www.youtube.com/swf/l.swf?video_id=5QFRSjWVTmY&autoplay=1
  Becomes:   http://www.youtube.com/swf/l.swf|video_id=5QFRSjWVTmY`autoplay=1
Now the link looks like this:
<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>

Format text for a link

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="name" attribute of the anchor tag. Use <span id="name"> if you only want to replace part of the link text.

The following code formats this link with today's date: xxx (check tomorrow and see a different date here)

// This function must run on page load (<body onload="formatText()>).
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;
}

// 'xxx' in this link will be replaced by the contents of cnn_text (text to be replaced cannot be null)
<a href="http://www.cnn.com/" id="cnn_text">xxx</a>

View HTML tables

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.

Create a show_tables.css file with this code.

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 */

Create a bookmark in your browser and call it something like Show tables. 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.

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()

Change web content dynamically

With the getElementById method's innerHTML property you can modify the content on a webpage after it has displayed without refreshing the page.

Original content

// This function replaces the content with a parmed string
function changeContent(webtext) {
  document.getElementById('change').innerHTML=webtext;
}

// Same as changeContent() without parm; handles extra quotes for image in string without syntax problems
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')">

Emulate a link

Now why would you want to emulate a link, you say?. Here is one reason. For years I had playable MP3s on my Music 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.

Test this fake link with the mouse

For my links on this website I use several classes, the most common one being one that is blue and underlined that changes to red and non-underlined when the mouse moves over it. I created 2 classes in my CSS (style-sheet) file to emulate this action, fakelink and fakehover.

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.

// This class makes the text appear to be a clickable (underlined) link
.fakelink {font-style: normal; font-weight: normal; color: #333399; text-decoration: underline;}
// This class makes the text change color when the mouse hovers over it
.fakehover {font-size: 100%; font-style: normal; font-weight: normal; color: #990033; text-decoration: none; background-color: transparent;}

// 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)
function fakeHoverOn(text) {
  text.className = "fakehover";
  document.body.style.cursor = 'pointer';
}

// 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
function fakeHoverOff(text) {
  text.className = "fakelink";
  document.body.style.cursor = 'default';
}

// This function displays a message when the "link" is clicked on
function noLinkMsg() {
  alert("Fooled you!\n\nEven though this looks like a link it is not!\n\n");
}

// This is the "link"
<span class="fakelink" onMouseOver="fakeHoverOn(this)" onMouseOut="fakeHoverOff(this)" onClick="noLinkMsg()">Test this fake link with the mouse</span>

Drop-down menus

This is a nice and intuitive method to present links (see my Site index at the upper-right corner of each page). I also use this as a way to show content in popups (see examples under Amusing videos).

Here is a drop-down menu to branch to different areas of this page. Here's the code to produce this.

// This function executes the menu selection
function go_to_selection() {
  self.location.href = document.getElementById('dropdown').value;
  document.getElementById('dropdown').selectedIndex = 0; // reset to default for return to page
}

// This creates the drop-down menu
<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>

Popup windows

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.
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.

	Amazing Juggling Finale*	a video on my website – make sure you can hear the music for this one
	View of the World from 9th Avenue	an image on my website – Saul Steinberg's classic New Yorker cartoon
	The Zakim Bridge	a webpage on a remote website (Wikipedia)
	Stanley Clarke - School Days*	a webpage on a remote website (YouTube)
	Boca Bridge photos	a slide show of vacation photos

* this works in Firefox and Opera but is quirky in IE

On my website I like to show Flash videos in popups by generating webpages in Perl that embed a player.

Here's the code for creating popups.

// This creates the window object and shows what is in the href argument
function windowOpener(ref, target, parms) {
  popupWindow=window.open(ref, target, parms);
  popupWindow.focus();
}

// Call the windowOpener function for the video example above
<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>

// Call the windowOpener function for the image example above
<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>

// Call the windowOpener function for the webpage example above
<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>

// Call the windowOpener function for the remote video example above (uses the FLV player on YouTube)
<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>

File input in HTML forms

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 input 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 Ajax on your form submit to keep the file displayed while you process it.

The code for this is pretty simple.

<form>
Select a file: <input type="file" size="40">  [ fake submit button here in the example ]
</form>

Ajax

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 Ajax (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.

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, Dog walks and Mypics).

I have several pages that use Ajax to create thumbnails to click on to see fullsize images. When you click the Back 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 below).

In the following code example I am displaying the output from the request by changing the content of a DIV.

// The Ajax Javascript functions
function getData(url) {
  // Create the XMLHttpRequest object
  if (window.XMLHttpRequest) {           // Non-IE browsers
    http_request = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {     // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // Make the request
  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) {                              // process the response after the server has completed the request
      var someXML = http_request.responseText;                     // the request expects XML to be returned, so you may want to parse it
      document.getElementById('PageContent').innerHTML = someXML;  // change the content of the DIV
    }
    else {
      alert('There was a problem with the request.');
    }
  }
}

// On the webpage . . .
<input type="button" value="Get some data" onClick="getData('someURL')">  // value of 'someURL' could contain the name of a document or a script to run

<div id="PageContent">
The content of this section will be changed in the processRequest() function.

</div>

Use a hidden input variable to maintain state in Ajax

// Call this function when the page loads
function load_content() {
  var last_content = document.getElementById('cur_content').value;
  if (last_content == '') {
    replace_content('default-content'); // Load default content on initial display of page
  }
  else {
    replace_content(last_content); // If hidden variable has saved value redisplay this content
  }
}

function replace_content(request) {
  document.getElementById('cur_content').value = request; // Save request value to be detected by browser on next page load

  (...rest of replace_content function here...)

}

<body onLoad="load_content()">
<input type="hidden" id="cur_content" value="">

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 class reunion photos (notice the URL when you click this).

// Call this function when the page loads
function start_here(thisurl) {
  // Extract perl script to run
  thisurl = unescape(thisurl);
  var spliturl = thisurl.split('?run=');
  var script = spliturl[1];
  replace_content(script)
}

function replace_content(script_to_run) {
  if (window.XMLHttpRequest) {           // Non-IE browsers
    http_request = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {     // IE
    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;
    }
  }
}

// On the webpage . . .
<body onLoad="start_here(location.href)">

<div id="PageContent">
The content of this section will be changed in the processRequest() function.

</div>

Editing text strings

One thing I have always enjoyed doing, in a variety of languages, is editing strings of text. The JavaScript substring method is a typical function for this where you work with characters in a string by specifying a starting position and an offset 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).

// Extract text into a variable 
var variable-name = string-of-text.substring(starting-position,offset)

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.

Formatting dollars for a check

Slide show

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 template that displays in a popup.

One way to show slideshows is to use 2 buttons over or under the photo
||

Another way is with a series of boxes under the photo with numbers representing the different photos

<< 1 2 3 4 5 >>

Boca Bridge photos – in a popup (2 buttons - A below)

Leon's Bentley – on a webpage (boxes - B below)

Grove Isle hotel – slide show with captions (view source on page to see how this's done)

Fan Pier – a little fancier with the button labels

Here's the code for the slide show using 2 buttons.

// Toggle 10 photos with this function
function show_pic(thispic) {
  var nextpic = '';
  var prevpic = '';
  // The first and last photo are hard-coded
  if (thispic == '1') {
    nextpic = '2';
    prevpic = '10';
  }
  else if (thispic == '10') {
    nextpic = '1';
    prevpic = '9';
  }
  else {  // All the rest of the photos use this logic
    var thisNbr = parseFloat(thispic);  // Convert to numeric for incrementing or decrementing
    nextpic = thisNbr + 1;
    prevpic = thisNbr - 1;
    // Convert back to strings
    nextpic += '';
    prevpic += '';
  }
  // Use either of these 2 methods (A or B) to show the photos. The green code needs to be on 1 line but wrapped here for the display
  // A - this is the 2-button technique
  var slide_show = "<img src=\"path-to-pic/" + thispic + ".jpg\"><p>
                    <input type=\"button\" value=\"<< Previous\" onClick=\"javascript:show_pic('" + prevpic + "')\"> ||
                    <input type=\"button\" value=\" Next >> \" onClick=\"javascript:show_pic('" + nextpic + "')>";

  // B - this is the boxes underneath technique (also wrapped here)
  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>";
  var i=1;
  for (i=1; i<=6; i++) {
    color_style = 'style=\"background-color:#999999\"';
    if (i == thispic) {
      color_style = 'style=\"background-color:#666666\"';
    }
    // (this is one line but wrapped here)
    slide_show += "<td width='30' align='center'" + color_style + "><a href='javascript:show_pic(\"" + i + "\")'
                   style=\"color: #ffffff; text-decoration: none\">" + i + "</a></td>";
  }
  // (this is one line but wrapped here)
  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>";

  document.getElementById('slideshow').innerHTML = slide_show;
}

<body onLoad="show_pic('1')">

<div id="slideshow" align="center">
Output from show_pic() displays here.

</div>

Close current window

You can close the current window from a webpage, even on a new tab, without a warning.

Run this function on the page.

function close_window() {
  window.open('','_self','');
  window.close();
}

Adjust number of characters to fit variable width space

On my webpage for 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:

// Create divs where you want the output to appear on the page (I have 4 on this page)
  <div id="dashes1" style="display:inline"></div>
  <div id="dashes2" style="display:inline"></div>

// Run this when the page loads
  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);  // Let's use a ratio of 200 chars in a 1280px display
  nbr_chars = nbr_chars - 28;                    // Subtract consistent set of leading characters on line
  var dashes = '';
  for (i = 0; i < nbr_chars; i++) {
    dashes += "=";
  }
  document.getElementById('dashes1').innerHTML = dashes;
  document.getElementById('dashes2').innerHTML = dashes;

Suppress black background in Firefox when displaying image

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 template 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.

You can see this being used all over the place on my Gallery and Payette webpages.

// Instead of using this code for an image link...
  <a href="dir/image_name.jpg">

// Make it look like this...
  <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">  // Add words above image
  <a href="picture.html?image=dir/image_name.jpg&topcap=Words to put above of image&comment=Words to put below image">  // Add words below image

Process file list in array

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.

You can see this being used on my Remodeling photos page.

// The files are in a list here...
  var filelist = http_request.responseText;   // This is the result of a perl call; view source of example above to see how this is done with Ajax.
  var file_array = response.split('|');       // Format is filename|filename|filename
// Now I have an array consisting of the file names
  for (i = 0; i < file_array.length; i++) {
    var filename = file_array[i];
    // Do something here with file name
    . . .
    . . .
    . . .
  }

Display sub-text on link with jQuery

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.
I'm using jQuery from Google here ( src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ) but you might prefer it to be located on your local server.

Click here to read information about topic

// Load access to jQuery in the <head> section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

// Create a javascript funtion containing the jQuery method to run when the link is clicked.
function toggleDiv(divId) {
  $(document).ready(function() {
    $(divId).toggle();
  });
}

// This is the html code - it won't display the table until clicked.
<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...
etc...
etc...
</ol>

Blinking text

Here's how to make blinking text in Javascript.

Create a subroutine and invoke it when the page loads.

function onload() {
JSBlink();
}
function JSBlink() {
var blinks = document.getElementsByTagName('JSBlink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(JSBlink, 1000);

set speed of blinking
}

Put the new <JSBllink> tag where you want the text to blink.
<JSBlink>This text will blink</JSBlink>

On my server
		URL = http://www.penceland.com/play_video.html?video=divebombing.flv (just video, no title)

	Divebombing bird	URL = http://www.penceland.com/play_video.html?video=divebombing.flv&title=Divebombing%20bird (includes optional title)

On a remote server
	Divebombing bird	URL = http://www.penceland.com/play_video.html?video=http://www.youtube.com/v/JdMbJ-gFlHU&autoplay=1&rel=0&title=Divebombing%20bird

Boca Bridge photos	–	in a popup (2 buttons - A below)
Leon's Bentley	–	on a webpage (boxes - B below)
Grove Isle hotel	–	slide show with captions (view source on page to see how this's done)
Fan Pier	–	a little fancier with the button labels