Lighthouse has a new layout. Prefer the old one? Return to the old layout, and switch back any time from the link at the top of each page.

Highlight "do not queue" freezes on color

#451

If I set queue:false I get a frozen color, no animation.

new Fx.Highlight(this.extentInput, {duration:'long', transition:'Log', queue:false}).start('lightblue');

Reported by Mathieu Simard · January 21st, 2011 @ 08:55 PM

State: invalid
Milestone: none
Assigned to: nobody

Activity

  1. MadRabbit
    MadRabbit
    • State changed from new to invalid

    That's because of native css-transitions in the Fx module. It doesn't allow you to run several changes in parallel on the same element. If you need to run several effects at the same time, try to put all of them into a single #morph call, or use the engine='javascript' option with all the effects, kinda like that

    $('element')
      .setStyle('background: yellow')
      .morph({
        width: '200px',
        background: 'white'
      });
    
    // or like that
    
    $('element')
      .morph({width: '200px'}, {engine: 'javascript'})
      .highlight('blue', {engine: 'javascript'});
    

    And also don't use colornames out of the CSS1 definition, old versions of Opera wont't reconginze them. You can find the exact list of supported colors at String.COLORS (you can add your own in there if you like)

    January 23rd, 2011 @ 06:54 PM

  2. Mathieu Simard
    Mathieu Simard

    So is there a way to tell an element not to queue highlights.
    As in, if my element is being highlighted all other highlight demands are ignored and not queued?

    January 24th, 2011 @ 05:45 PM

  3. MadRabbit
    MadRabbit

    You can use the queue: false option the usual way, you just need to use engine: 'javascript' with it as well. sorry I've misprinted the last example, it should be like that

    $('element')
      .morph({width: '200px'}, {engine: 'javascript'})
      .highlight('blue', {engine: 'javascript', queue: false});
    

    Or you can set the engine option globally like that

    Fx.Options.engine = 'javascript';
    
    $('element')
      .morph({width: '200px'})
      .highlight('blue', {queue: false});
    

    January 24th, 2011 @ 05:54 PM

  4. Mathieu Simard

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.