This project is archived and is in readonly mode.

#1063 ✓ resolved
kaito

no class morphing with 1.3 no-compat

Reported by kaito | November 1st, 2010 @ 03:54 PM | in 1.3.1 (closed)

Using Fx.Morph seems not to work when a css class is given in mootools 1.3 (no compat).
If you try it, you always get the error:

Element.Styles.each is not a function

Reproduction:

<style type="text/css">
.test {
font-size:15px;
color:#000;
}
.a {
font-size:30px;
color:#f00;
}
</style>
<div class="test">abc</div>
window.addEvent('domready', function() {
    $$('.test').morph('.a');
});

A thread at the unofficial mootools forum with code example:
http://www.mooforum.net/help-f26/morphing-classes-t3703.html

Example page:
http://pisanec.de/mootools/morph.html

Comments and changes to this ticket

  • Christoph Pojer

    Christoph Pojer November 1st, 2010 @ 04:20 PM

    • State changed from “new” to “resolved”
    • Milestone set to 1.3.1
    • Assigned user set to “Christoph Pojer”
    • Milestone order changed from “817” to “0”

    We have fixed this for MooTools Core 1.3.1. You can find the fixes in our GitHub repository in Fx.CSS.js. As a workaround you can use 1.3 with compat.

  • kaito
  • chidge

    chidge November 13th, 2010 @ 04:09 PM

    Using 1.3 with compat. This doesnt morph in IE6,7,8 or 9. Latest versions of Chrome, FF, Opera, Safari all fine

  • chidge

    chidge November 13th, 2010 @ 04:23 PM

    sorry to be more helpful:

    var morphFx = new Fx.Morph(li, {
        duration: this.options.openList, 
        transition: this.options.openListTran,
        onComplete: function(){
            li.addClass('image_selected');
        }
    });
    
    morphFx.start('#picture_box_image_selector li.image_selected');
    

    the oncomplete fires but the transition between the below css doesnt occur

    #picture_box_image_selector li {
        list-style-type: none;
        margin-bottom: 5px;
        padding: 3px 6px;
        width: 206px;
        background-color: #929292;
        height: 32px;
        cursor: pointer;
        
        /* IE */
        float: left;
        clear: left;
    }
    
    #picture_box_image_selector li.image_selected {
        background-color: #CC6600;
        height: 111px;
        cursor: auto;
    }
    
  • chidge

    chidge November 13th, 2010 @ 04:25 PM

    lighthouse has performed some weird formatting of my css (that isnt the problem)

  • chidge

    chidge November 13th, 2010 @ 04:33 PM

    and a bit more this works in all IE with (so must be a class issue)

    morphFx.start({
        'background-color': '#CC6600',
        'height': '111px',
        'cursor': 'auto'
    });
    
  • Aeron Glemann

    Aeron Glemann November 22nd, 2010 @ 03:06 PM

    The fix is actually in Element.Style.js for the 1.3.1 branch. That's where the change to use Hash for Element.Styles was made. The call to Element.Styles.each will then work in Fx.CSS.js.

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

Referenced by

Pages