SandboxEthonSidebar

Jim, Friday, August 10. 2007

Overview

This project uses the popular Mootools javascript framework.

Essentially this project was intended to be used as a help/information system to partner an ecommerce site. The problem is that most ecommerce sites have a separate help section and other useful pages to users such as a glossary. These usually require a user to move away from the page they were looking at and wanted help on. EthonSidebar has been made (based on initial work by PokemonJoJo) as a simple and quick way of loading up that information and displaying it to the user without changing the context of the information they were looking at, or using the ever despised popup window. The basis of EthonSidebar could be extended or modified to be used in many other contexts.

Documentation

Using the sidebar with all default settings is as simple as:

var sidebar = new EthonSidebar();

Adjusting the settings of sidebar can be done using the following options on creation:

  • position - position of the sidebar, defaults to right
  • transition - type of sidebar transition when showing and hiding (slide or appear), defaults to slide
  • display - integer, show the sidebar at the start (with a transition), defaults to 0
  • styles - css for the sidebar (width, height, color, background-color, opacity)
  • displayLoadingText - boolean, whether to display any loading text when loading content from a url, defaults to true
  • loadingText - the text to display when loading content from a url, defaults to 'loading...'
  • loadingImage - the path to the image to display when loading content from a url
  • showDuration - duration of the sidebar transition when showing, defaults to 500 ms
  • showEffect - transitions, to be used when showing the sidebar
  • hideDuration - duration of the sidebar transition when hiding, defaults to 500 ms
  • hideEffect - transitions, to be used when hiding the sidebar
  • onShowStart - function to execute when the sidebar begins its show transition
  • onHideStart - function to execute when the sidebar has completed its show transition
  • onShowComplete - function to execute when the sidebar begins its hide transition
  • onHideComplete - function to execute when the sidebar has completed its hide transition

Setting the content of the sidebar can be done in two different ways. If you wanted to just set some simple content and then display you could use the following code:

sidebar.setContent('This is an example');
sidebar.display(true);

However, if you wanted to load the content from a url you could just use:

sidebar.display(true, '/example/content.html');

Note that some javascript engines will prohibit you from loading content from domains other that the one that the script is running in as a security measure. Hiding the sidebar is equally as simple:

sidebar.display(false);

Now instead of just using the previous code in links in normal text or around other elements some people have wanted hotspot functionality. The following code should achieve this if you have an element in your page with an id of 'hotspot', obviously pick whatever id you want:

$('hotspot').addEvent('mouseenter', function() {
    sidebar.display(true, '/example/content.html');
});

$('hotspot').addEvent('mouseleave', function() {
    sidebar.display(false);
});

Code

Download the source code, ethonsidebar.v1.00.js

Read the documentation to fully understand the use of each function and option. An online demo of EthonSidebar is also available

Top of Page