jalarie: Samples of my Work

I would feel honored to find that my efforts are of value to you for copying directly or using as examples that you may learn, so feel free to take what you wish. But please give proper credit to me for my work by providing a link from your site back to mine. My web site and e-mail addresses are:

http://spruce.flint.umich.edu/~jalarie/
jalarie@umich.edu

You may see everything that I have to offer by working straight down through this page, or you may jump directly to one of these areas:

Graphics

Graphics Files

HTML

Splash page
Frames
Other HTML

JavaScript

Break Frames
Last Update
Preload Images
Order Form
Account Number Verify
Form Thanks
Floating Menu
E-Mail the Source
BookMarklets

BookMarklet Editor

Cookies
Calendar
Mortgage Calculator

Mortgage Maximum
Mortgage Rate
Mortgage Term

Days Between Dates
16 Puzzle
Making Change
Linear Equations
Guaranteed Fresh
Soundex
Loading Bar
Round Corners Generator

CSS

Drop-Shadow Box
Inline Shadow Box
Shadow-Box Frame
Zebra Tables
Printable Version
Scrolling Tables

Perl

Group Setup
Form Parse
Date and Time
Table
Unquote
Mixed-case
Array Subset

Programs
Creations for Others

My Designs
By Example
Assistance

Graphics:

Graphics Files: I've moved the actual graphics files to a separate page to better serve those who may wish to see what else I have to offer without having to wait for the graphics to load.

HTML:

General: The best way that I have of showing off my abilities in this area is to invite you to begin at my main page (use the "Home" button below) and view what I've done for yourself. Some of the code is in files that never appear on your screen or disappear so quickly that you would not be able to display the source, so I've listed the tricky stuff on this page.

Splash page: An auto-refresh META command can show a splash page, then switch to another page without user intervention. I include a short time delay so that the user does know that something has happened:

<meta http-equiv="refresh" content="10;url=jaa_a.htm" />

Frames: Some people love web pages with frames, and others hate the whole idea. The code I used is:

<frameset rows="85,*">
  <frame   src="jaa_c.htm"  name="frameh" /> // header
  <frameset cols="110,*">
    <frame src="jaa_b0.htm" name="framel" /> // left strip menu
    <frame src="jaa_f.htm"  name="framer" /> // right details
  </frameset>
</frameset>
<noframes><body>
  Your browser does not support frames; please go to my
  <a href="jaa_b.htm">menu</a>              // full screen menu
  without frames.  Or you may get a browser from
  <a href="http://www.mozilla.org/">mozilla.org</a>,
  <a href="http://www.netscape.com/">NetScape</a>,
  <a href="http://www.microsoft.com/">MicroSoft</a>, or
  <a href="http://www.opera.com/">Opera</a>
  that can do frames.
</body></noframes>

Other: If you find something else that you would like to copy from any of my pages, just use your browser's "view source" option or the "View page source" link at the bottom of each page. Or you may contact me by e-mail after checking my "Credits" page for where I obtained those items.

JavaScript:

Break Frames: To break out of someone else's frames, include the following code in your first page:

<!-- Escape from someone else's frames -->
  <script type="text/javascript">
    <!-- Hide this code from non-JavaScript browsers
      if (self != top) {top.location = self.location;}
    // End hiding -->
  </script>

Last Update: I used the following code (see my "Credits" page) to automatically update the "Last updated" value at the bottom of each page, and to provide an e-mail link. Please remember to change the example address and name to YOUR address and name and to set a proper date at the "manually updated" line:

<script type="text/javascript">
  <!-- Hide this code from non-JavaScript browsers
    mdte = new Date(document.lastModified);     // last Mod date
    cdte = new Date();                          // current date
    if ((mdte*1 < 1)                            // Netscape and WebTV null
    ||  (Date.parse(mdte) == Date.parse(cdte))) // InetExp null
    {
      document.write("Last update ");
      document.write("??-??-????");             // manually updated
    } else {
      document.write("Last updated ");
      document.write(document.lastModified);    // retrieve from system
    }
    document.write(" by ");
  // End hiding -->
</script>
<noscript>Last update was by</noscript>
<a href="mailto:anonymous@example.com?subject=WebPage">
  Example Name</a>.

Preload Images: I used code similar to the following (see my "Credits" page) at the top of each file to preload the main images used at my site to make the pages display more quickly:

<script type="text/javascript">
  <!-- Hide this code from non-JavaScript browsers
    image1=new Image(width, height);  image1.src="image1.gif";
  // End hiding -->
</script>

Order Form: I learned a great deal about JavaScript by trying to make an order form that would do all of the subtotaling for you. Bring up the form, place a sample order to watch it work, then display the source code to see how it's done.

Account Number Verify: To verify credit card numbers, please visit my Account Number Verify page.

Form Thanks: On my "Order Form" page, I used code similar to the following (see my "Credits" page) to display a "Thank You" page after sending a form to e-mail:

<script type="text/javascript">
  <!-- Hide this code from non-JavaScript browsers
    function check() {
      f1 = document.form1;
      if (error_conditions) {
        ...
        return false;
      } else {
        f1.thanks.value = 'Sent';
        f1.thanks.focus();
        return true;
      }
    }
  // End hiding -->
</script>

<form ... onsubmit="return check()">
  ...
  <input type="text" name="thanks" id="thanks"
    onblur="location.href='thank_you_page.htm'" />
</form>

Floating Menu: The code for a floating menu (available from my full screen menu) is:

Base sets it off:

  <script type="text/javascript">
    <!-- Hide this code from non-JavaScript browsers
      function floatmenu() {
        win2 = window.open("jaa_b2.htm","floatmenu",
          "dependent,scrollbars=yes,resizable=yes,height=250,width=300");
        return false;
      }
    // End hiding -->
  </script>

  <a href="javascript:void(0);" onclick="floatmenu()">
    floating menu</a> (requires JavaScript)

Menu does the work from another window:

  <a href="javascript:void(0);"
    onclick="self.opener.location='jaa_f.htm';self.opener.focus()"
    >Welcome</a>
  ...
  <a href="javascript:void(0);"
    onclick="self.opener.location='jaa_e.htm';self.opener.focus()"
    >Send me E-mail</a>

E-Mail the Source: To learn how to add a button to your webpage that will e-mail the source to someone else, visit my E-Mail the Source page.

BookMarklets: These are snippets of JavaScript that help you to search or to manipulate the data on a webpage. Learn about them at my BookMarklets page.

Cookies: Learn all about cookies and get a chance to try them at my Cookies page.

Calendar: Check the calendar for any month in 1583 through 3999.

Mortgage Calculator: You may use my Mortgage Calculator to figure any "interest on unpaid balance" type of loan or its subpages to find Mortgage Maximum, Mortgage Rate, or Mortgage Term.

Days Between Dates: Count days between dates including all days, work days only, or just the Sabbaths.

16 Puzzle: How quickly can you solve the 16 Puzzle?

Making Change: Can you make change for a dollar?

Linear Equations: Solve your Linear equations easily.

Guaranteed Fresh: How can you be sure that your pages are not pulled from cache?

Soundex: Convert your name to Soundex code.

Loading Bar: Display a loading bar with this JavaScript code.

Round Corners Generator: Generate a round-cornered box with this code generator.

CSS:

Drop-Shadow Box: Learn how I create the drop-shadow boxes on my Drop-Shadow Boxes page.

Inline Shadow Box: Sometimes I want my drop-shadow boxes to appear inline, so I do it with an inline shadow box.

Shadow-Box Frame: I think that a beautiful picture deserves a shadow-box frame.

Zebra Tables: Tables rows are easier for your eyes to follow when they are alternately colored as Zebra Tables.

Zebra Tables: Displaying one thing but printing another is easy when you embed the printable version within the web page.

Scrolling Tables: Long tables can keep the heading in place by becoming Scrolling Tables.

Perl:

Group Setup: A library of Perl subroutines can be very useful, but it can also become very large. And trying to remember to load a large number of smaller files gets to be more hassle than it's worth. I handled this annoyance by splitting the large file into smaller pieces and referencing the entire group from one main group setup routine.

Form Parse: The purpose of a CGI routine is to handle the contents of a form. I modified a routine from the book "Perl and CGI for the World Wide Web" to parse an incoming form into both an array and a hash table and saved it as a form parse subroutine. It will return data sent as a GET, as a POST, or as a combination.

Date and Time: Getting the current server date and time is a bit complex, so I wrote a date and time subroutine.

Table: If you wish to print a scalar, array, or hash as a table, please feel free to look at my table subroutines to see how I did it.

Unquote: Is that string enclosed in quote marks? Single or double? Get rid of them with my unquote subroutine.

Mixed-case: Converting a string to all upper-case or all lower-case takes only a single line of code, but getting mixed case with initial capitals can be downright difficult. You may want a copy of my caseu, casel, and casem routines.

Array Subset: My array subset subroutine will pull out a contiguous subset from an array.

Programs:

htmlmap.zip is a program that I wrote to map the relationships between the individual pages of a web site.

Creations for Others:

My Designs: Here are some links to web sites, individual pages, or sections that I've designed for other people. There may have been changes made to them by someone else since my work:

June 27, 2000: (section on birthdays) Ace Golf Club
May 26, 1999: (entire site) Philosophy of Time Society
May 25, 1999: (entire site) Dr. Nathan Oaklander of the Philosophy department of the University of Michigan - Flint.

By Example:

Please visit Dinobone Music to see how they made a live order form from my example.

Assistance:

July 9, 2001: I helped rome33 with the birthday script.
June 29, 2001: My Javascript calculates subtotals, postage, and totals for the Byron Bay 2001 Writers Festival ticket sales page.