This project is archived and is in readonly mode.

Morph to class not working in Chrome
Reported by Slekx | February 23rd, 2011 @ 06:26 AM | in 1.4.0 (closed)
I'm not sure if this is an issue with MooTools or with Chrome, but here is the setup:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src='mootools.js' type="text/javascript"></script>
<script src='hover.js' type="text/javascript"></script>
</head>
<body>
<div class="btn"></div>
</body>
</html>
hover.js:
window.addEvent('domready', function() {
var myElement = $$('.btn')[0];
myElement.morph('.hover'); // This doesn't work
//myElement.morph({ 'background-color': '#009' }); // This works
//myElement.set('class', 'hover'); // This also works
});
style.css:
.btn {
width: 200px;
height: 100px;
background-color: [#999](/projects/2706/tickets/999 "Ticket #999");
}
.hover {
width: 200px;
height: 100px;
background-color: [#009](/projects/2706/tickets/009 "Ticket #009");
}
Now, when you try to view index.html
in FireFox, it
works as expected (the red box morphs into black). But, when you
try to view the same file in Google Chrome v8.0.552.237, nothing
happens (the box stays red). There are no errors in my JS console,
and I've tried it on Ubuntu and Windows with the same results. Any
idea why this could be?
Thanks,
Ryan
Comments and changes to this ticket
-
Slekx February 23rd, 2011 @ 06:28 AM
One other interesting thing: it works in JSFiddle: http://jsfiddle.net/TTgXP/
Also, I'm using MooTools v1.3 with compatibility for the above code.
-
Christoph Pojer February 23rd, 2011 @ 01:21 PM
- State changed from new to invalid
- Milestone set to 1.4.0
- Milestone order changed from 888 to 0
Feel free to reopen if you can provide an example on jsfiddle (or online somewhere else) that fails. All I can see on jsfiddle is that it works.
-
Paulo Matos June 10th, 2011 @ 09:17 PM
I had a smiliar issue, where the code worked in JSFiddle but not locally.
I found then that if I have the .hover class inside the HTML code, it works.
If I just have the .hover class defined in an external CSS file (with href load) the morph doesn't work in Google.
Create your profile
Help contribute to this project by taking a few moments to create your personal profile. Create your profile »