Morph Effect on mouseenter/mouseleave with Mootools 1.2
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
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.
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 »</a> </li> <li> <img src="images/img.jpg" alt="" /> <h1>Second Post</h1> <p>Our Description... </p> <a href="#" title="Read more">Read More »</a> </li> <li> <img src="images/img.jpg" alt="" /> <h1>Third Post</h1> <p>Our Description... </p> <a href="#" title="Read more">Read More »</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; } |
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.
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.
1 2 | //Select all li elements in #posts $$('#posts li'); |
.setStyle()
Set styles properties
1 2 | //Set width to 300px. $('myElement').setStyle('width', '300px'); |
.addEvent()
Attaches an event listener to a DOM element.
1 2 3 | $('myElement').addEvent('click', function(){ alert('clicked!'); }); |
.addEvents()
The same as .addEvent, but accepts an object to add multiple events at once.
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.
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:
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:
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:
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, 9,065 hits)The Author
Want to become a guest author on this blog?
Marcos says:
16 Dec, 2008
Muy bueno..gracias por la info!!
Saludos..!
Mark Bult says:
18 Dec, 2008
Looks good, thanks for the tutorial.
Question: Does the HTML and CSS validate?
Jeremie Tisseau says:
18 Dec, 2008
Yes, it is valid HTML & CSS.
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.
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.
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
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 '';
Jim Wagner says:
12 Jan, 2009
This works great in everything but IE7. Any workarounds, or am I doing something wrong possibly?
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.
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
});
}
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 .
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.
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
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
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.
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?
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.
Gobo says:
4 Apr, 2009
Does not work in MSIE8
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
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
Jeremie Tisseau says:
2 May, 2009
Thanks for that. I appreciate!
Annnnn says:
15 May, 2009
hello
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!
peter3d says:
23 Jun, 2009
ups, i mean:
color : #FFD5DF
and
color : #eee ,
tzachi says:
8 Jul, 2009
how can i make it go from right to left?
Michele says:
23 Jul, 2009
Doesn t work in IE
schiwe says:
28 Jul, 2009
yap! it s not working with IE!
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
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!
iwanttobelieve says:
23 Oct, 2009
Um..will the latest version of mootools work with this?
Anyway, thank you for this tutorial =]
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.
Lucas says:
19 Jul, 2010
Excellent ! i ve just added a link from my web site http://www.ajaxshake.com
thanks
kitty says:
26 Aug, 2010
Thank you very much
The best mootools mouseover script!
Villa Nuansa Alam says:
23 Jan, 2011
nice tutorial for the Morph on mouseenter.. thank you..
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…
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.