The WebToolBox
Nudging Text

HOME

Slide-in Menu
Background Changing
DHTML Analog Clock
Static Menu Script
Scrolling Text Link
Textual Tooltip Script
Mouseover Link Bar
Bouncing Message
Shock Wave Text
Nudging Text
Roller Coaster Text
Text Animator
Typing Text Script
Pulsating Text
Cross Browser Marquee
Cursor Scroller
Cursor Trailer Text
Dropdown Menu
Text Area
Disco Background Effect
Scientific Calculator
Basic HTML Tutorials
Guide to Javascripts
Color Chart
Hex Color Codes
Contact Information

To copy,highlight codes below and press Ctrl+C,to paste click left then right in your html text area.Edit.(Note:Poorly formatted codes can produce unexpected results.)

Nudging Text

<html>

<body>

<script language="JavaScript1.2">

/*
Nudging text by Matthias (matthiasdeschagt@hotmail.com)
Modified by Dynamic Drive to function in NS6
For this script and more, visit http://www.dynamicdrive.com
*/

//configure message
message="Welcome to WebtoolBox!"
//animate text in NS6? (0 will turn it off)
ns6switch=1

var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("Your message is to short")
}
}

function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}

function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}

function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>
</head>
<body>

<h2><div id="jumpx" style="color:green"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script>

</body>
</html>