Web Programming Notes

This is another javascript library.  It creates a cross fading slideshow of images from a list of IMG tags and some basic JavaScript.  The code is based on some I found elsewhere some time back.  I will give credit if I can find where!
The script has been tested in Firefox2, IE6 and Opera9.  Have a look at the example page.

The script has the following features:

• Multiple slideshows can co-exist on a single page
• The implementation is accessible meaning it will still render the first image if the slideshow fails
• The code is contained within a single object definition so it won’t interfere will any other JavaScript

How to implement:

1. Include the SlideShow.js file in the head of your document.
2. Create a list of IMG tags (you can put links around them) encased in a DIV tag.  Set the ‘display’ style of all but the 1st image to ‘none’.  Give the DIV tag an id attribute. e.g.
   <div id=”slideshowcontainer_a”>
      <img src=’s1_a.jpg’>
      <img src=’s1_b.jpg’ style=’display:none;’>
      <img src=’s1_c.jpg’ style=’display:none;’>
      <img src=’s1_d.jpg’ style=’display:none;’>
     </div>
3. After the DIV tag place the JavaScript code that will render the slideshow.
   <script>var s1 = new SlideShow(’slideshowcontainer_a’,240,180,{});</script>
   The parameters are ID of DIV tag, width and height (pixels) and options.  For details of options see the example page source.

The ContextMenu script allows you to define a contextmenu to show when any html element is ‘right-clicked’.   The standard browser contextmenu is disabled, but only for the elements that trigger a custom ContextMenu.  The menu shown can differ for each element.

Please view the example.  — or — Right-click on the element below!

Test element 1

• Onthego Tours
• Cooking Holidays

The functionality is:

1. When a designated element is clicked the assigned context menu is displayed
2. When the document is clicked the context menu disappears, which is the same as the browser’s implementation.

To get it working:

1. Include the ContextMenu.class.js file in the HEAD of your document.
2. Create a trigger element that will fire the context menu: e.g.
   <div id=’trigger’>Right-Click Here</div>
3. Create a menu to show e.g.
   <div id=’contextMenu’ style=’display: none; position: absolute;’>…Menu Goes here…</div>
4. Assign the ‘menu’ to the ‘trigger’ with a simple Javascript call.
   <script>var cm = new ContextMenu(’trigger’,'contextMenu’);</script>

The implementation does not rely on any additional js libraries and should not impact on any existing JavaScript code.  It ’should’ fail gracefully.  You can define as many instances of ‘ContextMenus’ as you like on a single page without repeating any unnecessary code.

The script is based on code from various places including:

http://simonwillison.net/2004/May/26/addLoadEvent/ : I applied a similar technique to the document.onmousedown event so that existing handlers are not overwritten.

http://luke.breuer.com/tutorial/js_contextmenu.htm : The basic ideas were taken from here.

The script has been tested in IE6 and Firefox 2

This script is based on one I found at news.bbc.co.uk.  A client pointed it out to me and wanted it on his website. 

Improvements made to original:

• Simpler to implement 
• Links in the ticker will be found by search engines.
• Degrades gracefully
• Does not rely on prototype or any other monolithic JS library.
• Supports as many tickers on a page as you desire
• Code is encapsulated into a single class so it wont interfere with any other javascript libraries you may be using.

How to use it:

1. Download AccessibleTicker.class.js
2. Link to it using standard <script src=”AccessibleTicker.js” mce_src=”AccessibleTicker.js”></script> tag in the head of your html document.
3. Define an empy placeholder anchor tag where the ticker will be located giving it a unique ID attribute: <a id=”your_id”/>
4. Define an unordered list of links <ul> (see below) giving the ul tag a unique ID attribute.
5. Initialize the ticker using the <ul> ID and the <a> id from steps 2 and 3.  In the example I have simply placed the initialization code below the elements themselves.  You can run it on the ‘onload’ event if desired.

Very basic Example code:

<a id=’test1_container’ style=’display: none;’></a>
<ul id=’test1_data’>
<li><a href=’http://google.com’>Google</a></li>
<li><a href=’http://gmail.com’>GMail.. web based email</a></li>
</ul>
<script>
var ticker1 = new AccessibleTicker(’test1_container’, ‘test1_data’);
</script>

See the example page and view the source for more detail.

• Onthego Tours – Tours to Egypt, Russia and More
• Holiday Onthemenu – Cooking Tours to Exotic Locations