December 16, 2008

AJAX / Javascript, All, Freebies, Mootools, Tutorials

Morph Effect on mouseenter/mouseleave with Mootools 1.2

Article written by Jeeremie

In this tutorial, we will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools 1.2. The goal is to take a boring unordered list and to turn it into something fun to click.

Preview / Download

DemoDownload(69.0 KiB, 8,657 hits)

What you will need

Before we start, you should get a little bit familiar with Element Method: morph and the custom mouseenter and mouseleave events on which this tutorial is based.

Also, you will need to download Mootools 1.2. Note that Mootools 1.2.1 is included in the source files above.

The HTML and CSS code – Creating an unordered list

We are going to create an unordered list (“ul li”) with ID=”posts” in our html document. Each list item (“li”) will contain a post image, title, description and a link to our article.

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="posts">
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>First Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More &raquo;</a>
    </li>
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>Second Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More &raquo;</a>
    </li>
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>Third Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More &raquo;</a>
    </li>
</ul>

Our unordered list is created. Let’s now give it its appearance within the CSS code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#posts {
    padding: 0;
    margin: 0;
    }
#posts li {
    width: 600px;
    border: 1px solid #eee;
    background-color: #F9F9F9;
    background-image: none;
    float: left;
    clear: both;
    list-style: none;
    margin: 0 0 5px 0;
    padding: 5px;
    }
#posts a {
    text-decoration: none;
    color: #999;
    font-size: 0.85em;
    }
#posts img {
    display: block;
    float: left;
    border: 1px #ccc solid;
    background: white;
    padding: 3px;
    margin: 0 10px 0 0;
    }
#posts h1 {
    padding: 5px 0 0 0;
    margin: 0;
    color: #CC0033;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    }
#posts p {
    margin: 0;
    padding: 0 0 10px 0;
    }

Here’s how it looks so far:

Mootools – The Basics

Before going any further, let me remind you some of the basic functions in Mootools:

$()
This is the base selector of mootools. It selects a single Element.

?View Code JAVASCRIPT
1
2
//select the element with id 'content'
$('content');

$$()
Same function as $() but it selects multiple elements. That’s what we are going to use in our code below.

?View Code JAVASCRIPT
1
2
//Select all li elements in #posts
$$('#posts li');

.setStyle()
Set styles properties

?View Code JAVASCRIPT
1
2
//Set width to 300px.
$('myElement').setStyle('width', '300px');

.addEvent()
Attaches an event listener to a DOM element.

?View Code JAVASCRIPT
1
2
3
$('myElement').addEvent('click', function(){
    alert('clicked!');
});

.addEvents()
The same as .addEvent, but accepts an object to add multiple events at once.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
$('myElement').addEvents({
    'mouseover': function(){
        alert('You mouseovered it!');
    },
    'click': function(){
        alert('You clicked it!');
    }
});

.morph
Allows for the animation of multiple CSS properties at once.

?View Code JAVASCRIPT
1
2
//Change the background color to red
$('myElement').morph({'background-color': 'red'});

The Javascript

We will create a new file clickMe.js including all the javascript code that will change the background color on mouseenter and mouseleave. First, add the code below within the <HEAD> section of your html document:

?View Code HTML4STRICT
1
2
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/clickMe.js" type="text/javascript"></script>

Now, create the clickMe.js file and paste the code below into it:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.addEvent('domready', function(){
	var el = $$('#posts li'),
        color = el.getStyle('backgroundColor');
 
    $$('#posts li').addEvents({
        mouseenter: function(){
            // We set the cursor to pointer so users know they can click this region
            this.setStyle('cursor','pointer');
 
            // Change background color on mouseover
            this.morph({
    	        'background-color': '#FFF2E6',
                'background-image': 'url(images/arrow.jpg)', //Background image
                'background-repeat': 'no-repeat',
                'background-position': [0, 520], //image will move from left to right - Values are in pixels.
                'border': '1px solid #FFD5DF'
            });
		},
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                backgroundColor: color
            });
        }
    });
});

At this point, the effects are pretty neat but you will notice that only the “Read more” text is clickable and not the whole LI region. We will add a few lines of code at the bottom of our JS file to fix this:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
window.addEvent('domready', function(){
	var el = $$('#posts li'),
        color = el.getStyle('backgroundColor');
 
    $$('#posts li').addEvents({
        mouseenter: function(){
            // We set the cursor to pointer so users know they can click this region
            this.setStyle('cursor','pointer');
 
            // Change background color on mouseover
            this.morph({
    	        'background-color': '#FFF2E6',
                'background-image': 'url(images/arrow.jpg)', //Background image
                'background-repeat': 'no-repeat',
                'background-position': [0, 520], //image will move from left to right - Values are in pixels.
                'border': '1px solid #FFD5DF'
            });
		},
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                backgroundColor: color
            });
        }
    });
 
 
    //We retrieve the link location (href) and assign it to LI to make the whole region clickable
    var link = $$('#posts li a');
    link.each(function(element) {
        element.getParent().addEvent('click', function(){
            window.location = element.get('href');
            // on click, background color and border will turn to a different color
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                'background-color': '#fff'
            });
        });
    });
});

So now, not only it looks good but you can click anywhere inside a list item to read the full article.

Download(69.0 KiB, 8,657 hits)

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Want to become a guest author on this blog?

37 Comments

  1. Marcos says:

    16 Dec, 2008

    Muy bueno..gracias por la info!!

    Saludos..!

  2. Mark Bult says:

    18 Dec, 2008

    Looks good, thanks for the tutorial.

    Question: Does the HTML and CSS validate?

  3. Jeremie Tisseau says:

    18 Dec, 2008

    Yes, it is valid HTML & CSS.

  4. Barock says:

    24 Dec, 2008

    i cant apply it in to my site, i don’t understand what should i do, i’m new foe this.

  5. Jeremie Tisseau says:

    24 Dec, 2008

    @Barock: That’s going to be difficult to help you if you don’t tell us a little bit more or show us the code.

  6. matt70 says:

    9 Jan, 2009

    I am more of a jquery-user. but this what i was looking for. is there any chance to get it going with mootools 1.1 (i am not used to mootools, as i said). i need it to function with v.1.1 because i am allready using a much more komplexe gallery wich relies on 1.1. any hints, tweeks or hacks? greetings and keep up the good work

  7. leo says:

    11 Jan, 2009

    Jeremie Tisseau, i’m trying to add this awesome script to my forum (smf forum) this is the code I have added in. I don’t know if the tag would work but I tested and it fires w/out any problem. But I have one problem. It only fires up in the very first thread but not the 2nd one..

    echo '';

  8. Jim Wagner says:

    12 Jan, 2009

    This works great in everything but IE7. Any workarounds, or am I doing something wrong possibly?

  9. Jim Wagner says:

    12 Jan, 2009

    …more information on my last comment. It will not morph back to original styling on mouseout. It stays transformed and will stop working altogether after the 4-5th change.

  10. cevarief says:

    15 Jan, 2009

    Hi,

    This is very nice. I love the arrow image animation. Thank you so much.

    Just little share, to retrieve the link location (href) and assign it LI, i prefer to add click event after mouseleave instead of create a new variabel and assigned to another $$ href selector.

    click : function(){
    window.location.href = this.getElements(‘a’).get(“href”);
    this.morph({
    ‘border’: ’1px solid #eee’,
    ‘background-image’: ‘none’,
    ‘background-color’: ‘#ccd’
    });
    }

  11. cevarief says:

    15 Jan, 2009

    Sorry it should be window.location.href = this.getElement(’a’).get(”href”);

    Without ‘s’ before (‘a’), so it will get first element ‘a’ instead of all element ‘a’.

  12. Jeremie Tisseau says:

    21 Jan, 2009

    @matt70: best way to see if it works is to replace mootools-1.2.1-core-yc.js by Mootools 1.1 and see if it works. If not, you will have to see what changed between version 1.1 and version 1.2. Since I have always worked with Mootools 1.2, I can’t really help you on that.

    @leo: hmmm… Have you checked that there was not another AJAX library that would conflict with Mootools?

    @Jim Wagner: Ouch! I did not test it in IE7 because my IEtester always crash when I open this script into it. However, it works great in IE6. I should upgrade to IE7 and test it again.

  13. Jim Wagner says:

    21 Jan, 2009

    Jeremie Tisseau,

    It does work fine in IE6. The demo from Mootools you linked to also works in IE6 and IE7:

    http://demos.mootools.net/Mouseenter

    But your demo does not work, which sucks because I really like it.

    On IE7, the li’s change color, but when the mouse is moved from the element, the color stays and if script debugger is on, it crashes.

    Thanks man.

    JW

  14. gijs says:

    6 Feb, 2009

    Nice one, unfortunately it does not work in ie7, hope you can heal he script.
    looking forward fot it.

    Thanks,

    Gijs

  15. Jeremie Tisseau says:

    6 Feb, 2009

    Yes, I am trying very hard to install IE7 but it always fails even after I installed the latest Windows updates.  But don’t worry, it is on my todo list. I will have a look at soon as I can install this stupid IE.

  16. lowkzilla says:

    16 Feb, 2009

    Nice trick!
    I would like to apply a vertical morph on a background-position, i tried many things but no one works.
    Is it impossible?

  17. webgentry says:

    16 Mar, 2009

    Any word on the fix for IE7? 

    Great script.  I love it.

    • Jeremie Tisseau says:

      16 Mar, 2009

      Yes, I had a look but when I try to fix it in IE7, it makes a mess in Firefox and other brwosers. I didn’t find a solution and didn’t have time to work more on that.

  18. Gobo says:

    4 Apr, 2009

    Does not work in MSIE8

  19. airpig says:

    12 Apr, 2009

    to get it to work in IE i had to remove:

    ‘border’: ’1px solid #FFD5DF’

    from the mouseenter event and also remove

    ‘border’: ’1px solid #eee’,

    from the mouseleave event inside of clickme.js

  20. David Kartuzinski says:

    1 May, 2009

    This looks great. I am going to try to implement it on my site and test it out on a bunch of browsers to see if I can get it to work properly, I’ll report back!
    Thanks.
    -DK

  21. Annnnn says:

    15 May, 2009

    hello

  22. peter3d says:

    22 Jun, 2009

    Hello, you dont need to remove
    ‘border’: ‘1px solid #FFD5DF’
    and
    ‘border’: ‘1px solid #eee’,

    just replace border with color like this:

    ‘color’: ‘1px solid #FFD5DF’
    and
    ‘color’: ‘1px solid #eee’,

    This works for me, thanks for the script! :)

  23. peter3d says:

    23 Jun, 2009

    ups, i mean:
    ‘color’: ‘#FFD5DF’
    and
    ‘color’: ‘#eee’,

  24. tzachi says:

    8 Jul, 2009

    how can i make it go from right to left?

  25. Michele says:

    23 Jul, 2009

    Doesn’t work in IE

  26. schiwe says:

    28 Jul, 2009

    yap! it’s not working with IE!

  27. peter3d says:

    28 Jul, 2009

    I told you, IT`s working on IE, just:

    1) in ‘border’: ‘1px solid #FFD5DF’ replace border with color
    2) in ‘border’: ‘1px solid #eee’ replace border with color

    Both are in clickme.js

  28. genie says:

    30 Jul, 2009

    Thanks for the fix peter3d

    In your previous post, you listed the correct fix for IE7.

    In the clickMe.js file change the following:

    Line 16: ‘color’: ‘#FFD5DF’
    Line 22: ‘color’: ‘eee’,

    Thanks!

  29. iwanttobelieve says:

    23 Oct, 2009

    Um..will the latest version of mootools work with this?

    Anyway, thank you for this tutorial =]

  30. Jeremie Tisseau says:

    23 Oct, 2009

    Didn’t try the latest version however Mootools 1.2.4 should not be a radical change in the core.

  31. Lucas says:

    19 Jul, 2010

    Excellent ! i’ve just added a link from my web site http://www.ajaxshake.com
    thanks

  32. kitty says:

    26 Aug, 2010

    Thank you very much
    The best mootools mouseover script!

  33. Villa Nuansa Alam says:

    23 Jan, 2011

    nice tutorial for the Morph on mouseenter.. thank you..

  34. jasa website murah says:

    24 Apr, 2011

    well down…. great tutorial…. thank you so much… this is great.. i make this for my website… hihihihi…

  35. Eric says:

    14 Jan, 2012

    For this to work in IE8 you need to use either ‘border-color’ or borderColor. IE pukes on shorthand CSS.

Leave a Reply

Sorry, comments are closed