on mooTicker v0.4

UPDATE #3 well, after dedicating a better part of the day trying to recreate the issue I was having with v.0.4.2 and the updated v.0.4.3, i redact my previous statement about having a stacking issue. i don’t know what was going on before, but the stacking issue wasn’t due to the mooTicker code. i’ve updated to mooTicker v.0.4.3 and it’s working beautifully (you can see an instance of it here: wings-seminars.com). thanks again to huug helmink for his elegant coding.

UPDATE #2: tried out v.0.4.2, and i’m having the old stacking issue, so i went back to v0.4 with my additions listed below.

UPDATE: v.0.4.2 is out now, with an even better fix than i came up with!

hooray! a new version of mooTicker! i’ve been using mooTicker for a while now on sites to do a fade-in/fade-out of quotes. it works by setting the display value of items in a list to display: none, then sequentially changing toggling them between display:block and display:none, with a nice little opacity fade in/out on either end. i’ve had some difficulty in the past with the code not changing to display:none quickly enough, with the result being that my list items slowly stacking down the page on top of my other content.
i’ve always recoded around the problem in the past, but in addition to adding a ‘group by’ option, huug helmink has updated the code to be a little more elegant. but i still had to do some tweaking (posted on google code).
what i found was the list item styles were being changed to display:none before the opacity change started, resulting in an abrupt disappearance rather than a gentle fade out.
here’s my workaround (or see it on google code):

i pulled the display:none code out of the fadeMessage function into its own hideMessage function:

fadeMessage: function() {
  this.group.each(function(item) {
    item.tween('opacity',0);
  }.bind(this));
},

hideMessage: function() {
  this.group.each(function(item) {
    item.setStyle('display','none');
  }.bind(this));
},

Then I added the following line to the showMessage function at the very end (showing the fadeMessage delay for context below):

this.fadeMessage.delay(this.interval-2000,this);
this.hideMessage.delay(this.interval-1000,this);

and it’s working like a pro for me now.

January 20, 2009 • Posted in: thoughts

3 Responses to “on mooTicker v0.4”

  1. huug helmink - January 28, 2009

    Hi,
    Hoogle-ling around I’d found this blogpost. I’m using the latest version of mooTicker (v.0.4.3) on a project that’s under development right now, but I don’t have problems when fading out. You can see it over here: http://www.vissertuinen.nl/projecten/aan-de-wetering/default.aspx

    I don’t understand that you have problems with the same script, can I see where you’ve implemented it?

    thnx,

    huug helmink

  2. zach - January 28, 2009

    huug~
    well, i’m stumped. i must have had too much coca in my cocoa puffs, b/c i can’t seem to reproduce what was happening. i’ve tried with mooTicker v.0.4.3 and the copy of v.0.4.2 that i used before, and everything works beautifully. so i stand corrected. you can see one of the sites i’m using your code here (now updated with v.0.4.3):

    http://www.wings-seminars.com/

    thanks again for your rockin’ code!

    zach (a.k.a. esculenta)

  3. huug - March 3, 2009

    (a bit late reply)
    strange problem…
    I’d move the mooTicker to a new project: mooTickSlide, maybe you can check this one out?

    (ps. for a faster response, you can always email me :) )

Leave a Reply