Archive for the ‘Mootools’ Category

Mootools Idle State Notifier

5

Oct
22

Last year I wrote a simple JavaScript function, for prototype, to mimic an idle state event. The code was very simple and was quickly picked up on by think web2 (perfection kills) where they extended the idea and developed a self containing class which fires active and idle custom events.

After using this code on several projects I decided to port it over to Mootools 1.2 (also works in Mootools 1.1) so check it out the demo below and if you like it feel free to download the code.

demo

Mootools Idle State Notifier demo.

download

Mootools Idle State Notifier download.

JavaScript Table Row Highlighter Class using Mootools

1

Jan
09

Well Christmas has been and gone (I hope you all had a fantastic Christmas/New Year), and now it’s time to get back down to some work.

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.

<table>

    <thead>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>

        <th>Five</th>
        <th>Six</th>
    </thead>
    
    <tbody id="highlight">
        <tr>
            <td>1</td>
            <td>40cm</td>

            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>

            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>

        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>

            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>

            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>

            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>

            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
    </tbody>
    

</table>

<script type="text/javascript">
    
    var th = new tableHighlighter( ‘highlight’ );
    
</script>

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:

<script type="text/javascript">
    
    var th = new tableHighlighter( ‘highlight’, {highlightRow: ‘odd’, rowColourClass: ‘myRowClassOne’, rowHoverColourClass: ‘myRowHoverClassTwo’} );
    
</script>

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.

Simple 3D Carousel using Mootools

33

Oct
31

After researching a good method to create a 3D Carousel I came across two resources that intrigued me; firstly GOTOANDLEARN.com which provided an amazing flash 3D Carousel tutorial and then the jQuery 3D Carousel.

3D Carousel

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.

<div id="carousel">
    <div><a href="#"><img src="images/dreamweaver.png" /></a></div>
    
    <div><a href="#"><img src="images/director.png" /></a></div>
    
    <div><a href="#"><img src="images/flash.png" /></a></div>
    
    <div><a href="#"><img src="images/freehand.png" /></a></div>
    
    <div><a href="#"><img src="images/swf-player.png" /></a></div>
    
    <div><a href="#"><img src="images/coldfusion.png" /></a></div>
</div>

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.

<style>

    #carousel{
        background-color:#000000;
        width:700px;
        height:400px;
        position:relative;
        border:1px solid #FFFFFF;
    }
    
    img{
        width:100%;
        height:100%;
        border:0px solid #FFFFFF;
    }
    
</style>

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.

var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;

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

Fancy Sliding Menu for Mootools

51

Oct
09

 

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.

Fancy Sliding Tab Menu

demo

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

download

Please download the Fancy Sliding Menu for Mootools code.