I have developed a simple little class to highlight table rows using Mootools and I thought I would share it with the world.

code

As you can see below the HTML code is very basic and uses an ID to define the region which requires highlightling.  In this example an ID of "highlight" has been applied to the tbody.

Finally all that is left is to instantiate the "tableHighlighter" class using the ID of "highlight" to reference the table (or part of) required.

class options

The Hightlighter class comes with several options built in to allow for easy customisation.  These include:

• rowColourClass - Can be named as you wish and referenced through css to produce your desired results.
• rowHoverColourClass - Can be named as you wish and referenced through css to produce your desired results.
• highlightRow - odd or even

An example of how this could be used is as follows:

mootools modules

The modules required for this class is as follows:

Core

• Core

Class

• Class

Native

• Array
• String
• Function
• Number
• Element

Element

• Element.Event

download

Please feel free to download the JavaScript Table Row Highlighter code.

demo

Have a look for yourself at the JavaScript Table Row Highlighter demo.

After having a play about with these two examples for a while it got me in to thinking, “how easy it would it be to implement a 3D Carousel myself?“

Well after carrying out some research and using the two above examples as a foundation I created a basic 3D Carousel. This example will be the first instalment in which I demonstrate the basic Carousel and further more advanced tutorials will be added at a later date.

So here we go…

code

html

As can be seen below the HTML is very simple and consists of a main container wrapping several divs with images inside.  That is all that is required at this stage from an html perspective.  Obviously the number of images and the images themselves can be changed here.

css

The CSS is also very  simple setting the style attributes for the main container as well as the images width and height within each of their containing divs.  One point to note would be that the width and height of the carousel container should be edited as desired to meet your needs althoug further editing will be needed below as shown.

JavaScript Variables

This is where understanding is required to set up the carousel. baseSpeed is the initial speed of the carousel, the higher the value the faster it will spin, radiusX and radiusY are the horizontal and vertical radiuses of the carousel so adjust these to effectively change the width and height.

centerX and centerY pinpoint the center of the accordion with in the main container. These will need to be amended if the main containers width and height attributes are amended.

Finally speed is used in conjunction with baseSpeed to set the initial speed of the carousel, although, the speed will be altered depending on the position x of the mouse over the carousel container.

demo

Have a look for yourself at the Simple 3D Carousel demo.

download

Feel free to download the Simple 3D Carousel.

notes

This is a very basic demo and as such should not be treated as a finished product.  I’m using this article as more of a tutorial to create clear stages between the version above and a far more advanced version that I will release in the not to distant future.

I’m still looking to further improve the smoothness of the carousel and new features such as automatic image reflection and arrows to manually rotate the carousel will be added in future versions.

mootools modules

Core

• Core

Class

• Class

Native

• Array
• String
• Function
• Number
• Element

Element

• Element.Event

Window

• Window.DomReady

Due to the popularity of the script.aculo.us version of the Fancy Sliding Menu I decided a Mootools version was now in order.

It looks exactly the same as the the script.aculo.us, it works exactly the same as the script.aculo.us version, the only difference is it runs on Mootools. 

Right well thats enough of the introductions, click on the demo and download the code below.

Have a look for yourselves and enjoy.

demo

Feel free to view the Fancy Sliding Menu for Mootools demo.

download

Please download the Fancy Sliding Menu for Mootools code.