This project is archived and is in readonly mode.

#1179 ✓invalid
Slekx

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

    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

    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

    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 »

Shared Ticket Bins

People watching this ticket

Pages