16
Dec
2008
Morph Effect on mouseenter/mouseleave with Mootools 1.2
By jeeremie. Posted in AJAX / Javascript, TutorialsIn 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.
The Demo
Download source files for this tutorial
Download (68.7 KiB, 4,526 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.
<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:
#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.
//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.
//Select all li elements in #posts $$('#posts li'); |
.setStyle()
Set styles properties
//Set width to 300px. $('myElement').setStyle('width', '300px'); |
.addEvent()
Attaches an event listener to a DOM element.
$('myElement').addEvent('click', function(){ alert('clicked!'); }); |
.addEvents()
The same as .addEvent, but accepts an object to add multiple events at once.
$('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.
//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:
<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:
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:
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 (68.7 KiB, 4,526 hits)Popularity: 24% [?]
December 16th, 2008 at 10:25 pm
Muy bueno..gracias por la info!!
Saludos..!
December 18th, 2008 at 1:07 am
Looks good, thanks for the tutorial.
Question: Does the HTML and CSS validate?
December 18th, 2008 at 9:53 am
Yes, it is valid HTML & CSS.
December 24th, 2008 at 12:25 am
i cant apply it in to my site, i don’t understand what should i do, i’m new foe this.
December 24th, 2008 at 9:30 am
@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.
January 9th, 2009 at 12:05 am
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
January 11th, 2009 at 4:34 am
Jeeremie, 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 '';January 12th, 2009 at 5:08 am
This works great in everything but IE7. Any workarounds, or am I doing something wrong possibly?
January 12th, 2009 at 5:14 am
…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.
January 15th, 2009 at 7:14 am
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’
});
}
January 15th, 2009 at 8:17 am
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’.
January 21st, 2009 at 11:56 am
@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.
January 21st, 2009 at 8:21 pm
Jeeremie,
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
February 6th, 2009 at 12:18 am
Nice one, unfortunately it does not work in ie7, hope you can heal he script.
looking forward fot it.
Thanks,
Gijs
February 6th, 2009 at 9:11 am
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.
February 16th, 2009 at 5:42 pm
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?
March 16th, 2009 at 2:25 pm
Any word on the fix for IE7?
Great script. I love it.
March 16th, 2009 at 2:39 pm
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.
March 26th, 2009 at 2:08 pm
[...] Morph effect on mouseenter/mouseleave [...]
April 4th, 2009 at 1:24 am
Does not work in MSIE8
April 9th, 2009 at 4:21 am
[...] 3. Morph Effect on mouseenter/mouseleave with Mootools 1.2 [...]
April 12th, 2009 at 6:34 am
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
May 1st, 2009 at 10:55 pm
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
May 2nd, 2009 at 9:00 pm
Thanks for that. I appreciate!
May 15th, 2009 at 3:45 pm
hello
June 9th, 2009 at 5:35 am
[...] Morph Effect on mouseenter/mouseleave with MooTools 1.2 [...]
June 20th, 2009 at 12:50 pm
[...] Morph effect on mouseenter/mouseleave In this tutorial, you’ll see how to add some amazing effects to an unordered list on mouseover with the element Method: morph and how to make a whole list item region clickable with Mootools 1.2. The goal is to turn a boring unordered list into something fun to click on. Check out the demo here. [...]
June 22nd, 2009 at 5:57 pm
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!
June 23rd, 2009 at 8:34 pm
ups, i mean:
‘color’: ‘#FFD5DF’
and
‘color’: ‘#eee’,
July 8th, 2009 at 1:55 am
how can i make it go from right to left?
July 9th, 2009 at 7:38 pm
[...] Morph effect on mouseenter/mouseleave In this tutorial, you’ll see how to add some amazing effects to an unordered list on mouseover with the element Method: morph and how to make a whole list item region clickable with Mootools 1.2. The goal is to turn a boring unordered list into something fun to click on. Check out the demo here. [...]
July 21st, 2009 at 10:27 am
[...] Morph effect on mouseenter/mouseleave In this tutorial, you’ll see how to add some amazing effects to an unordered list on mouseover with the element Method: morph and how to make a whole list item region clickable with Mootools 1.2. The goal is to turn a boring unordered list into something fun to click on. Check out the demo here. [...]
July 23rd, 2009 at 5:58 pm
Doesn’t work in IE
July 28th, 2009 at 1:51 pm
yap! it’s not working with IE!
July 28th, 2009 at 9:38 pm
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
July 30th, 2009 at 2:28 am
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!
August 20th, 2009 at 4:35 pm
[...] Morph Effect on Mouseenter/Mouseleave [...]
August 24th, 2009 at 7:38 pm
[...] Morph Effect on Mouseenter/Mouseleave [...]
August 27th, 2009 at 12:44 am
[...] Sample | Tutorial Share and [...]
September 1st, 2009 at 11:45 pm
[...] Morph Effect on Mouseenter/Mouseleave [...]
September 3rd, 2009 at 4:46 am
[...] Morph Effect on Mouseenter/Mouseleave [...]
October 23rd, 2009 at 12:33 am
Um..will the latest version of mootools work with this?
Anyway, thank you for this tutorial =]
October 23rd, 2009 at 8:55 am
Didn’t try the latest version however Mootools 1.2.4 should not be a radical change in the core.