JavaScript Projects [Large]

This area is for large JS projects that I have either developed or ripped the script and heavily modified. The projects have been tested and thoroughly documented. Be sure to check Short Projects, Form Projects and Webpage Effects pages for ideas.

Client-Side Site Search Engine

A client-side site search engine does not require cgi scripts (which your ISP may be reluctant to let you install) or any off-shore cooperation. This site uses a heavily modified adaptation of the Tipue search engine. Some of the features are: it works on all browsers, it is easy to install and it supports the - [exclude this word], OR and NOT keywords in a search pattern. My modifications include control value access by ID, modern syntax and changes to allow validation with jsLint.

Installing the Site Search Engine

Copy tip_search.js from my site into your site directory. There are 5 user configurable items at the top of the file.
1. results_location points to the report form (eg. tip_rpt.htm).
2. return_results = n displays n results per page.
3. include_num = 1 adds listing numbers to each found record.
4. include_url = 1 displays the url of the document.
5. bold_query = 1 makes titles appear in bold letters.
Copy tip_form.js from my site into your site directory. Make sure results_location points to the same file as it does in tip_search.js.
Create a Tipue format tip_urls.js database for pages on your own web site. Each database record contains three or more fields each separated by a ^ (caret). The first field is the document title. The second is the URL of the document. The third is a brief description of the document which will be displayed with the title. The fourth field (optional) is a list of keywords that will NOT be displayed. All items in the third and fourth field are searchable. The fifth field (optional) indicates the window or frame where this page will be displayed. The sixth field (if used) indicates a ranking to be applied to the page.
Caution: Make sure that the format of your database follows mine exactly. Line one must \be <em>s = [];</em>. All following lines must end in a semicolon. Use jsLint to validate the format.
Note: The easiest way to create a Tipue format database is to install Tojsdb [Java]. This utility extracts meta descriptions and keywords from all HTML documents in a folder.
Add the tip_rpt.htm search report form to your site folder. It is pure xhtml code so it is very easy to modify to your own taste using style. Make sure that you change the stylesheet link to your own specific style sheet.
Add a script element that points at tip_form.js to each document that will have a searchbox control.
Add a searchbox control to appropriate pages. A sample form and control is:

<form id="search_form" action=""
  onsubmit="search_form('formdata');return false;">
<div><label for="formdata">&nbsp>
<input id="formdata" type="text"/>
<input button onclick="search_form('formdata');">
Go!</button></form></div>

Database Engine

A client-side database engine does not require cgi scripts (which your ISP may be reluctant to let you install) or off-shore cooperation. It also allows ranges of numeric data as well as exact or partial string matches. JSDB is my homebrew search engine that is free for your own use. A typical application would be a Real Estate Finder where a specific location but a range of values is wanted. External files for longer descriptions and photos are provided for.

JSDB contains two HTML modules (jsdb_frm and jsdb_rpt) and a database (jsdb_db) in JavaScript. jsdb_frm is the query selection component which uses HTML selection boxes to gather the request and pass it through session cookies to the jsdb_rpt report generator. The generator has a find match function and its results can then be used to display various components of any records found. Records can also contain fields that are pointers to external files.

The steps in adapting this database system is:

Create your query form. This determines the fields needed in the db and search functionality required. This form will generate a cookie with query parameters. One thought is always sending two values (high and low) for each field. If an exact match is needed then set both to the same value. If no selection is done on a field then set high/low to blank.
Create the db itself. This can be hand created or possibly extracted from another database by making a flat file and using appropriate record separators.
Adapt the general search engine to accept your request. Retrieve the cookie and analyze each field. If data is numeric then do numeric compares. If data is alpha do alpha select. If none then skip field. Set up a method to parse lines of database into fields (split on separator character).
Adapt the engine to understand range requests
Modify the report to the produce desired effect.

One extension to the database project would be to add selectable field reporting.

Event Calendar

Event calendars are very useful for reminding clients of important dates and adding information to commercial sites. evtcal, written by Clark Hay and packaged by JavaScriptKit.com looks great and offers flexible scheduling. I found that the coding needed a bit of improvement. Check out JR's revised version or Dansations. The changes made in my version are as follows:

A display problem that occured only in Opera is fixed and the script tweaked to verify with jsLint.
Content, function and styling required separation to allow rapid customization.
Extracted documentation into a separate file (eventhlp.txt) for notes on folder pointers and
flags, styling (including unique event links). the events database and internationalization.
Image pointers and folders were relabeled to allow additional formats (eg iconic) and scalings.
For example folder 40e contains 40 pixel images in English and 20i contains 20 pixel
iconic images for multilingual usage.
Added the capability to set unique classnames for special events.
Changed the event display area to one that can have styled text. Textareas lack that capability.
Added floating dates for last of month occurance. This affects Memorial Day for U.S. calendars
and other events in international ones.
Added recurring monthly events for events that occur on a set date each month.
Start/end dates can be defined for recurring events.
Month/Year captions can be split over two lines for compact yet readable displays.
The fixedSize variable determines whether number of weeks shown is fixed at 6
or only as many as needed (sometimes 4 or 5).
Navigation button tooltip captions can be set using JS variables.
Setting these variables to empty strings hides them (except in Opera).
Date captions (month and day) can be redefined in another language in the events database.
The event message display area was modified for readability and less US-centric date formatting.
The original events database module (relabeled as eventsus.js) assumes American holidays.
An alternate module (eventsca.js) contains Canadian holidays and spelling.

There are also improvements waiting to be done. These include:

adding validity checking for the database record fields.
setting floating events to a 'closest' weekday for some countries.

Simple Slide Show [S3]

S3 can help authors who prefer to design and build their own slideshow that includes only the features they need. The basic requirements are: a set of slides (aka slideTray), a display area (aka screen) and a sequencer (aka projector). The slideTray is an array var. The screen is an img element. Sequencing can be a simple next button with an onclick event or a timer.

When timers are used, there is also a need to stop or escape them. In slideshows, a manual advance to the next slide is a typical situation. To escape a timer, its setTimeout() function is assigned to a handle variable which can then be used by a clearTimeout() method. The code for stopTimer() shows how this is done.

Suggested enhancements include slide captions, background audio and transitions. The following example uses the CSS opacity method [see fadeIn(), initImage() & initImageFade()]. holderId contains the old image. imageId contains the new one. Screen is the screen image id. Elements may need styling. Don't forget to add showTimer() to the onload event.
Note: The fade improvement does not work in all browsers!

holderId='holder';imageId='screen';timerId=''; //globals
slideDelay=10*1000;fadeDelay=200; //milliseconds
slideTray=["images/mit.gif","images/inria.gif", "images/keio.gif"];
thisSlide=-1; //current slide position
function setOpacity(obj,opacity){ //various browsers
  opacity=(opacity==100)?99.999:opacity;
  obj.style.filter="alpha(opacity:"+opacity+")";
  obj.style.KHTMLOpacity=opacity/100;
  obj.style.MozOpacity=opacity/100;
  obj.style.opacity=opacity/100;}
function fadeIn(objId,opacity){
  if(document.getElementById){
    obj=document.getElementById(objId);
    if(opacity<=100){
      setOpacity(obj,opacity);opacity+=10;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")",fadeDelay);
    } } }
function initImage(){ //no fade display
  image=document.getElementById(imageId);setOpacity(image,100);
  image.style.visibility="visible";}
function initImageFade(){ // fade display called by slideshow
  image=document.getElementById(imageId);setOpacity(image,0);
  image.style.visibility="visible";fadeIn(imageId,0);}
/*****************************************/
function stopTimer(){clearTimeout(timerId);}
function showTimer(){
  if(document.images.Screen===null){alert('No Screen id defined!');}
  bObj=document.getElementById(holderId).style;
  bObj.background='url("'+slideTray[thisSlide]+'") no-repeat';
  fObj=document.getElementById(imageId).style;
  fObj.visibility="hidden";           //hide the new image for now
  if(++thisSlide==slideTray.length){thisSlide=0;}      //wrap tray
  document.images.Screen.src=slideTray[thisSlide]; //reset current
//  initImageFade();
  initImage();timerId=setTimeout(showTimer,slideDelay);} //change slide

An older slideshow project that needs some work but exhibits a few basic principles and includes background audio!

JR's HomePage | Comments [jsproj.htm:2010 11 28]