DZone Snippets: effects code

Typed Tooltip Effect

COBOLdinosaur (Roy Marchand) — Tue, 20 Mar 2007 11:31:22 GMT

This simple bit of scripting will create a dynamic typing effect for your tool tips.
The script can be
seen implemented here



var str='';

var obj='false';

var pntr='';

var cnt=0;

var textArr = new Array(5);

textArr[0] = "All your bases are belong to us!";

textArr[1] = "The answer is 42; of course.";

textArr[2] = "The end of the universe will be the result of a mis-calculation in the core.";

textArr[3] = "I don't believe its alive; but it thinks it is.";

textArr[4] = "About 10 seconds after you open it; you'll wish you hadn't";



function looptext()

{

   obj.innerHTML=str.substr(0,cnt);

   cnt++;

   if (cnt<=str.length) setTimeout('looptext()',100);

}



function typeText(lnk,lyr)

{

   str=textArr[lyr];

   pntr= 'lyr'+lyr;

   obj=document.getElementById(pntr);

   obj.style.left=(lnk.offsetLeft+30)+'px';

   obj.style.top=(lnk.offsetTop+25)+'px';

   obj.style.display='block';

   cnt=1;

   looptext();

}



function clearText(lyr)

{

   cnt=2500;

   pntr='lyr'+lyr;

   obj=document.getElementById(pntr);

   obj.style.display='none';

   obj.style.left='-50px';

   obj.style.top='-50px';

   obj.innerHTML=' ';

}

The links using the effect are done this way:



         onmouseover="typeText(this,2)"

      onmouseout="clearText(2)"

      onclick="clearText(2)"> 

   This is link Three

Scriptaculous JavaScript slideshow

peter (Peter Cooperx) — Tue, 31 Jan 2006 21:12:58 GMT

Found this amazing code by obie at http://blog.caboo.se/articles/2006/01/19/easy-scriptaculous-slideshow:

var album = { 

  startup: function() { 

    new PeriodicalExecuter(album.cycle, 5) // change image every 5 seconds 

  }, 

  cycle: function() { 

    new Effect.Fade('image', { // the id of the

 containing the photos 

      duration: 1, 

      fps: 50, 

      afterFinish: function() { 

        new Ajax.Updater('image','/album/next', { // URL for next  tag 

          asynchronous: true, 

          onSuccess: function() { 

            new Effect.Appear('image', {

              duration: 1,

              fps: 50,

              queue:'end'

            })

          } 

        }) 

      } 

    }) 

  } 

} 

 

window.onload = album.startup

I want to tweak it so that an earlier event precaches the next image instead.

Miniature slideshow for DIVs using Scriptaculous

peter (Peter Cooperx) — Thu, 05 Jan 2006 20:16:11 GMT

frame 1

frame 2

frame 3

frame 4

Effect.MoveTo

youpy (Youpy) — Wed, 28 Dec 2005 02:27:47 GMT



Effect.MoveTo = Class.create();

Object.extend(Object.extend(Effect.MoveTo.prototype, Effect.MoveBy.prototype), {

  update: function(position) {

    var topd  = (this.toTop - this.originalTop) * position + this.originalTop;

    var leftd = (this.toLeft - this.originalLeft) * position + this.originalLeft;

    this.setPosition(topd, leftd);

  }

});