ACME Labs JavaScript Utilities


Calendar

[View source code.] [View example.]

This is a simple calendar widget. It puts a calendar onto your page in an HTML element you specify. When the user selects a date, the widget calls your callback routine.

Using Calendar is very easy.

  1. In your HTML, make an element for the calendar to appear in:

    
    <div id="calendar"></div>
          
  2. Load the routines into your code:

    
    <script src="http://acme.com/javascript/namespace.js" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.utils.jsm" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.calendar.jsm" type="text/javascript"></script>
          
  3. Declare your callback routine:

    
    function Callback( day, month, year )
        {  
        alert( day + '-' + MonthName( month ) + '-' + year ); 
        }
          
  4. Create the calendar widget, passing it the HTML element and the callback:

    
    acme.calendar.MakeCalendarCurrent( document.getElementById( 'calendar', Callback ) );
          

That's it! Everything else happens automatically.


Clusterer

[View source code.] [View example.]

This object is an add-on for the Google Maps API. It lets you handle large numbers of markers, thousands if you like, without the slow performance you'd get if you tried displaying them via the maps API directly. Clusterer uses two techniques to accomplish this:

Using Clusterer is very easy.

  1. Load the routines into your code:

    
    <script src="http://acme.com/javascript/Clusterer2.jsm" type="text/javascript"></script>
          

    (If your map is still using API v1, use Clusterer1.jsm instead.)

  2. Create a Clusterer object, passing it your map object:

    
    var clusterer = new Clusterer(map);
          
  3. Wherever you now do map.addOverlay(marker), instead call clusterer.AddMarker(marker, title). The title is just a short descriptive string to use in the cluster info-boxes.

  4. If you are doing any map.removeOverlay(marker) calls, change those to clusterer.RemoveMarker(marker).

That's it! Everything else happens automatically.

There are also a few routines to change the default behavior:

  1. If you don't like the default large blue cluster icon, you can call clusterer.SetIcon(icon) to change it.
  2. clusterer.SetMaxVisibleMarkers(n) lets you change the threshold marker count where clustering kicks in. The default is 150 markers.
  3. clusterer.SetMinMarkersPerCluster(n) sets the minumum number of markers for a cluster. The default is five.
  4. clusterer.SetMaxLinesPerInfoBox(n) sets the maximum number of lines in an info box. The default is ten, but if your map is small this may be too many.

EditInPlace

[View source code.] [View example.]

This object lets you make any text on the page editable. The user clicks on it and it turns into an input field, with Save and Cancel buttons. If the Save button gets clicked then the text is changed and you get a callback notifying you.

Using EditInPlace is very easy.

  1. In your HTML, put the text you want to make editable into an identifiable HTML element. You can use an id, a name, or whatever identification method you like. For example:

    
    <div id="text">Here is the text.</div>
          

    The element should have only text inside it, not other HTML elements.

  2. Load the routines into your code:

    
    <script src="http://acme.com/javascript/namespace.js" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.editinplace.jsm" type="text/javascript"></script>
          
  3. Find the element you want to edit. For example, if you specified an id in the HTML then you could say:

    
    var element = document.getElementById( 'text' );
          
  4. Create an EditInPlace object, passing it the HTML element, the number of lines and columns you want in the editable field, and a callback function:

    
    var eip = new acme.editinplace.EditInPlace( element, lines, columns, callback );
          

    If lines is one you get a text input field for editing; if lines is greater than one you get a textarea.

  5. The callback will probably a closure that you create, that knows which element it is getting called on. For example you might say:

    
    function () { RealCallback( element ); }
          

    That creates a closure that calls the real callback with the text element as argument.

    When the callback is called, the contents of the text element have already been changed to the new value. If you don't need to do anything else, feel free to pass null as the callback.

That's it! Everything else happens automatically.


Menu

[View source code.] [View example.]

This is a simple menu widget. You can add it to any other element on your page, and then add menu items into the menu. When the user opens the menu and clicks on an item, a callback routine gets called.

Using Menu is very easy.

  1. Load the routines into your code:

    
    <script src="http://acme.com/javascript/namespace.js" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.utils.jsm" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.menu.jsm" type="text/javascript"></script>
          
  2. Add the menu where you want it:

    
    var menu = acme.menu.AppendMenu( container, null );
          

    The optional second argument is any properties you want added to the menu icon.

  3. Add menu items to the menu:

    
    acme.menu.AppendMenuItem( menu, Callback1, { innerHTML: 'Item 1' } );
    acme.menu.AppendMenuItem( menu, Callback2, { innerHTML: 'Item 2', style: { backgroundColor: 'red' } } );
    acme.menu.AppendMenuItem( menu, Callback3, { innerHTML: 'Item 3' } );
          

    Here again the last argument is properties to be added to the new menu item. Setting the innerHTML property is how you put a name on the item. You can also set CSS style properties with a nested object.

And that's about it!


OverlayMessage

[View source code.] [View example.]

This object lets you display a semi-transparent message box over another HTML element. For instance you could use it to display a progress message while loading a Google Map. It's not specific to Google Maps, though - you can use it on anything.

Using OverlayMessage is very easy.

  1. In your HTML, make an element for the message to appear over. Give it whatever style attributes you like:

    
    <div id="container" style="width: 100%; height: 7in;"></div>
          
  2. Load the routines into your code:

    
    <script src="http://acme.com/javascript/namespace.js" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.overlaymessage.jsm" type="text/javascript"></script>
          
  3. Create an OverlayMessage object, passing it the HTML element:

    
    var om = new acme.overlaymessage.OverlayMessage(document.getElementById('container'));
          
  4. Call the Set method when you want a message to appear:

    
    om.Set('Loading...');
          
  5. Call the Clear method when you want the message to go away:

    
    om.Clear();
          

That's it! Everything else happens automatically. You continue to use the container element in your own code, it does not get modified.

You can also change the colors used, if you don't like the defaults:


om.SetBackgroundColor( color );
om.SetBorderColor( color );
  

References

[View source code.] [View example.]

This object lets you add Wikipedia-style references / footnotes to an HTML page.

Using References is very easy.

  1. Load the routines into your code:

    
    <script src="http://acme.com/javascript/namespace.js" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.utils.jsm" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.references.jsm" type="text/javascript"></script>
          
  2. Add <ref>text</ref> elements to your HTML.

  3. Add one <references></references> element to your HTML where you want the footnotes to appear.

  4. On page-load, call acme.references.Go();

That's it! Everything else happens automatically.


Tabs

[View source code.] [View example.]

This object lets you put up a set of tabbed panes.

Using Tabs is very easy.

  1. In your HTML, make an element for the tabs to appear in:

    
    <div id="tabs"></div>
          
  2. Load the routines into your code:

    
    <script src="http://acme.com/javascript/namespace.js" type="text/javascript"></script>
    <script src="http://acme.com/javascript/acme.tabs.jsm" type="text/javascript"></script>
          
  3. Create a Tabs object, passing it the HTML element:

    
    var tabs = new acme.tabs.Tabs(document.getElementById('tabs'));
          
  4. Call the Add method for each pane you want to add. The arguments are the name of the tab, and a routine to call when the tab gets activated:

    
    tabs.Add('Tab One', TabOneActivate);
          
  5. Declare the tab activation routines. They get passed the HTML element where the pane should go. The first time each routine is called, it should create the pane's contents:

    
    function TabOneActivate(paneElement)
        {
        if ( paneElement.innerHTML == '' )
            paneElement.innerHTML = 'This is tab one.'
        }
          

That's it! Everything else happens automatically.


Back to ACME Labs.

email