Description:

Spinner Box was inspired by the PBB MagicWheel found here.
This script provides a graphically appealing way to display images and page links in the form of a 3d spinable icon wheel.
Spinner box while visually similar to the MagicWheel is built using a completely different code style, one that provides several key differences from MagicWheel and maintains my views on scripts and widgets. That being it should be small compact easy to use while giving advanced coders limitless flexibility. The only code segment used from MagicWheel is the image reflection method which was modded and debugged.

Spinner box was built using the Mootools javascript framework as a base.

Features:

Minimal CSS and HTML:
Spinner Box can be implemented simply, with only one html div element. For extra styling every element the script adds is accessible through CSS. While it is recommended to create a CSS loading class it is not required for the widget to function. Styling classes and html structure can be viewed in the Documentation section of this page.

User Interaction:
Implementing mouse movement and mouse wheel tracking, the script provides a very smooth and polished interaction with the users mouse. Use the mouse wheel to spin the icon wheel, or mouse over the widget for a smooth feel in accessing the icons. Alternatively the scripts mouseSpin option can be disabled, when this is the case the widget can still be spun through the use of the mouse wheel.

Custom Events:
Built in custom events give coders full flexibility with how the widget displays and behaves. The events available can be viewed in the documentation section of this page.
A full description of the events can be found in the documentation.

Degrades Elegantly:
On browsers that have JavaScript disabled the widget is nothing more then a blank spot on the page. Future implementation of IPhone and Blackberry compatibility are in the works.

Stand-Alone Availability:
Although it is recommended to use spinnerBox in tandem with the Mootools JavaScript framework, this widget is also available in a larger standalone version which can co-exsist on the same page as other frameworks such as Jquery, Dojo, or Prototype.

Spinner Box has been tested and functions in the following browsers:

• Internet Explorer versions 6, 7, and 8
• Fire Fox version 3.5.2
• Safari
• Google Chrome

Documentation:

Implements:

Syntax:

Arguments:

1. spinBox - (mixed) A string ID of the Element containing the widget.
2. options - (options, optional) See below.

.

Options:

• icons - (object) Icon information used to initialize the widget.
  Attribute Format - IconKey: [link, image path, tip]
  
  Example:
  

  icons: {
       sample1: ["http://www.yahoo.com","images/sampleImage1.jpg","Yahoo"],
  
       sample2: ["http://www.google.com","images/sampleImage2.jpg","Google"],
       sample3: ["http://www.bing.com","images/sampleImage3.jpg","Bing"]
  
  }
                                                    


Dimension Options:
• wheelWidth - (number, defaults to 180) Pixel width of the icon wheel
• wheelHeight - (number, defaults to 5) Height measurement of the icon wheel.
• boxWidth - (number, defaults to "auto") The fixed height of the spinBox element.
• boxHeight - (number, defaults to "auto") The fixed width of the spinBox element.
• iconForegroundWidth - (number, defaults to 68) Max pixel width of foreground icons.
• iconBackgroundWidth - (number, defaults to 30) Min pixel width of background icons.

Speed Options:
• baseSpeed - (number, defaults to 1.5) Minimum speed of wheel rotation. 10 equals the full width of an icon every 50 MS. NOTE: 1 - 3 is recommended for optimal viewing.
• maxSpeed - (number, defaults to 3) Maximum speed the wheel rotation is allowed to reach.
• friction - (number, defaults to 4) Amount of slowing applied to the excess roation speed. Values range from 1 - 99. NOTE: 1 equals little to no slowing of excess speed, 99 allows for no excess speed.

Mouse Options:
• enableMouseSpin - (boolean, defaults to True) Enables mouse position tracking and speed control.
• mouseEffectiveness - (number, defaults to 30) How much effect the mouse excerts on the wheel's rotation speed. 100 equals very effective. 1 equals little to no effect. NOTE: Effects mouse wheel speed increases as well.
• invertMouseSpinDirection - (boolean, defaults to True) Inverts the rotation direction from mouse spin.

CSS Class Options:
• loadingClass - (string, defaults to "spinnerLoading") CSS class that is applied to the spinBox during icon loading phases.
• iconClass - (string, defaults to "spinnerIcon") CSS class that is applied to the icons.
• reflectionClass - (string, defaults to "spinnerRef") CSS class that is applied to the icon reflection element.
• captionClass - (string, defaults to "spinnerCaption") CSS class that is applied to the caption element.

Graphic Options:
• foregroundOpacity - (number, defaults to 1) Maximum opacity of the foreground icons.
• backgroundOpacity - (number, defaults to 0.4) Minimum opacity of the background icons.
• refOpacity - (number, defaults to 0.7) Icon reflection opacity.
• gradReflection - (number, defaults to 0.5) Minimum opacity of the gradient applied to simulate icon reflection.
• starterCaption - (string, defaults to "Spinner Box") The caption that is shown when no icon is being hovered over.

.

Events:

-- build --

-- iconAdded --

-- iconRemoved --

-- wheelSpin --

-- iconEnter --

-- iconLeave --

-- iconClick --

.

Properties:

• halted - (boolean) True if rotation animation is halted.
• spinSpeed - (number) Current speed of the rotation.
• extraSpeed - (number) Excess speed being applied to spinSpeed.
• wheelSpeed - (number) Current speed being applied to spinSpeed from the mouse wheel.
• mouseIn - (boolean) True if mouse is inside the spinBox.

.

User Methods:

• addIcon (key, link, icon, tip, userIcon) - Adds an Icon to the spinner. Returns new icon element.
  Arguments:
  1. key - (string) Variable name used to track icon.hash elements. NOTE: treat it as a variable name (no spaces or special characters). Icon id = key + "_icon"
  2. link - (string) Href link that's applied to the icons anchor element.
  3. icon - (string) Path to image used in the icon.
  4. tip - (string) Caption shown when icon is moused over.
  5. userIcon - (boolean, optional) True if class initialization did not call the method. NOTE: recommended user does not enter a value here.
• removeIcon (key) - Removes an icon from spinner. Returns array with removed icons information in the following format: [key, link, image path, tip]
  Arguments:
  1. key - (string) Variable name used locate icon to remove.

.

Structure:

<div id="spinBox" class="spinnerLoading">
     <a id="iconKey_icon" class="spinnerIcon" href="sampleLink.html"><img src="sampleImage.jpg"></img><canvas class="spinnerRef"></canvas></a>

     <a id="iconKey_icon" class="spinnerIcon" href="sampleLink.html"><img src="sampleImage.jpg"></img><div class="spinnerRef"><img src="sampleImage.jpg"></img></div></a> <!-- Internet Explorer -->

     <div class="spinnerCaption"><div>Spinner Box Caption Text</div></div>

</div>

• spinnerLoading - applied to the spinBox element during loading phases. during these phases the icons are hidden. Can be changed through the options loadingClass.
• spinnerCaption - applied to the caption div tag. this tag contains a div tag that holds the caption text. Can be changed through the options captionClass.
• spinnerIcon - applied to the anchor element containing the icon image and reflection. Can be changed through the options iconClass.
• spinnerRef - applied to the reflection canvas tag ( div tag containing an image for IE ). Can be changed through the options reflectionClass.

.

Example:

Html:

<div id="spinBox1">

    <noscript>Enable JavaScript to View this section</noscript>

</div>

CSS:

.spinnerLoading {
   background: url('wheel-loader.gif') center center no-repeat;

}
.spinnerCaption div {
   background: black;
   color: #fff;

   font-weight: bold;
}    
#spinBox1 {
   border:2px ridge;

}

JavaScript:

var mySpinner = new spinnerBox('spinBox1',{

     icons: {
          icon1: ["samplePages/samplePage.html","images/sample1.png","Example 1"],

          icon2: ["samplePages/samplePage.html","images/sample2.png","Example 2"],
          icon3: ["samplePages/samplePage.html","images/sample3.png","Example 3"],

          icon4: ["samplePages/samplePage.html","images/sample4.png","Example 4"],
          icon5: ["samplePages/samplePage.html","images/sample5.png","Example 5"],

          icon6: ["samplePages/samplePage.html","images/sample6.png","Example 6"]
     }
});

Change Log:

-- 09/05/2009 --

Changes/Bug fixes:

• Tweeked mouse responsivness and fixed an icon hover bug
• Fixed IE icon stretch bug
• Fixed IE reflection bug
• Fixed Chrome's positioning bug
• Fixed firction bug when mouse spin is diabled.
• Fixed a bug where the mousewheel would scroll the page in IE

-- 09/04/2009 --

Changes/Bug fixes:

• Removed redundancies
• Cleaned out and condensed several class methods
• Refactored class to provide smoother animation and responsivness
• Fixed loading class issue and Applied fade effects to initial load for a visually sleeker initialization
• Fixed a bug where reflections would show under the wrong icon on first load
• Wrote in comment documentation to the Full script
• Coded in new class events for more user flexibility and customization
• Added boxHeight and boxWidth options for users who have need of a fixed spin box size
• Renamed some option variables for clarity
• Rebuilt icons option object handler with mootools Hash for quicker initialization
• The addIcon method is now used exclusivly for initialization processes (I didnt really see a need to make it usable to users with the icons option)
• Renamed several class properties for clarity including: speed to extraSpeed, counter to spinSpeed, wheelSpeed to baseSpeed ect...

Known Bugs:

• IE icon images stretched
• IE Mouse Wheel spin scrolls the page
• IE icon reflection now showing
• Chrome absolute placement

Demo:

<div id="demoSpinner">

     <noscript>JavaScript Required to view this section</noscript>
</div>

.spinnerLoading{
    background: url('images/wheel-loader.gif') center center no-repeat;

}

.spinnerCaption div {
     background: black;

     color: #FFF;

     font-weight: bold;
}

#demoSpinner {     
     border:2px ridge;

}

spinDemo = new spinnerBox('demoSpinner', {

     wheelWidth: 500,
     starterCaption: "Spinner Box Demo",
     mouseEffectiveness: 10,

     icons: {
          demo1: ["","images/sample1.png","Demo Icon One"],

          demo2: ["","images/sample2.png","Demo Icon Two"],
          demo3: ["","images/sample3.png","Demo Icon Three"],

          demo4: ["","images/sample4.png","Demo Icon Four"],
          demo5: ["","images/sample5.png","Demo Icon Five"],

          demo6: ["","images/sample6.png","Demo Icon Six"],
          demo7: ["","images/sample1.png","Demo Icon Seven"],

          demo8: ["","images/sample2.png","Demo Icon Eight"],
          demo9: ["","images/sample3.png","Demo Icon Nine"],

          demo10: ["","images/sample4.png","Demo Icon Ten"]
     }
});

Download:

You can download the Mootools framework HERE.

Standard Version:

Standalone Version: