Prototype Ticker - The 08/15 Way ;)

February 26th, 2007

Tags: , , ,

Ich mag Prototype. :)

JAVASCRIPT:
  1. var Ticker = Class.create();
  2. Ticker.prototype = {
  3.     messages: new Array(),
  4.     counter: 0, interval: 0,
  5.     target: null, source: null,
  6.     initialize: function(target, source, options)
  7.     {
  8.         this.target = $(target);
  9.         this.source = $(source);
  10.         this.options = Object.extend({
  11.             updateRate: 2,
  12.             duration: 0.5,
  13.             beforeStart:function(){
  14.                 this.counter++;
  15.             }.bind(this)
  16.         }, options || {});
  17.  
  18.         Element.cleanWhitespace(this.source);
  19.         $A($(this.source).childNodes).each(function(sel) {
  20.            this.messages.push(sel.innerHTML.strip());
  21.         }.bind(this));
  22.  
  23.         this.start();
  24.     },
  25.     start: function()
  26.     {
  27.         this.interval = new PeriodicalExecuter(function() {
  28.             this.target.update(' ').appendChild(Builder.node('span',{style:'opacity:0'}, this.messages[this.counter]));
  29.             new Effect.Appear(this.target.lastChild, this.options);
  30.             if(this.counter == this.messages.length){ this.counter = 0;}
  31.         }.bind(this), this.options.updateRate);
  32.     },
  33.     stop: function()
  34.     {
  35.         this.interval.stop();
  36.     }
  37. };

Benutzung:
var ticker = new Ticker('ziel', 'quelle', {duration:0.3, updateRate: 3});

Abhängigkeiten:
Prototype.js 1.5.0 und Builder.js, sowie Effects.js von Scriptaculous

Ticker Demo
Download ticker.js

27.02 - fixed IE bug.

6 Kommentare zu “Prototype Ticker - The 08/15 Way ;)”

  1. 1 ,dean Says:
    February 28th, 2007 at 08:13
    sehr schick :) gefällt mir ist was für unsere LIVE seite
  2. 2 murphy Says:
    March 5th, 2007 at 17:34
    Leider liest der ticker nicht aus externen Dateien :(
  3. 3 Michelangelo Says:
    October 23rd, 2007 at 11:07
    Hi, good job brilliant!
    I would like to use this code but when I send to it a html code it doesn't parse it, and it show me the html tags. How can I fix this problem?
  4. 4 soophie Says:
    July 7th, 2009 at 08:07
    auch wenn der Eintrag 2 Jahre alt ist... Die Linkleichen ärgern mich, da ich gern mal die Umsetzung gesehen hätte.
  5. 5 Kjell Says:
    July 7th, 2009 at 08:13
    Hmm.. ja.. ein Serverumzug ist nicht immer spurlos. Ich werde das mal aufrischen und einen neuen Beitrag mit aktuellen Code veröffentlichen.

    Viele Grüsse
    Kjell

  6. 6 soophie Says:
    July 7th, 2009 at 08:15
    great! :-) so gut kenne ich mich dann nicht in prototype aus, um das quasi blind anzupassen.

Trackbacks/Pingbacks

Noch keine Trackbacks/Pingbacks von anderen Blogs

Diesen Eintrag kommentieren