Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-4 of 4 total  RSS 

Typed Tooltip Effect

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='&nbsp;';
}


The links using the effect are done this way:

   <a href="javascript:alert('no page linked')"
      onmouseover="typeText(this,2)"
      onmouseout="clearText(2)"
      onclick="clearText(2)"> 
   This is link Three
   </a>

Scriptaculous JavaScript slideshow

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 <DIV> containing the photos 
      duration: 1, 
      fps: 50, 
      afterFinish: function() { 
        new Ajax.Updater('image','/album/next', { // URL for next <IMG> 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

<div id="slideshow1" class="slide"><div>frame 1</div></div>
<div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
<div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
<div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>

<script type="text/javascript">
    
    start_slideshow(1, 4, 2000);
    
    function start_slideshow(start_frame, end_frame, delay) {
        setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
    }
                            
    function switch_slides(frame, start_frame, end_frame, delay) {
        return (function() {
            Effect.Fade('slideshow' + frame);
            if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
            setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
            setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
        })
    }

</script>

Effect.MoveTo

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);
  }
});
« Newer Snippets
Older Snippets »
Showing 1-4 of 4 total  RSS