The WebToolBox
Bouncing Message

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.)

Bouncing Message

<html>

<body>

<style type="text/css">

#supertext {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;

}

</style>


<script language="JavaScript1.2">

/*
Bouncy message script- By Dynamicdrive.com
Code based on Lloyd Hassell's, at http://www.dynamicdrive.com/dynamicindex4/bounceimage.htm
For full source, TOS, and 100s DTHML scripts, visit http://dynamicdrive.com
*/

//Configure the below three variables

//1) Set message to display (HTML accepted)
var thecontent='<h2><font color="#0000FF">Welcome to the WebtoolBox!</font></h2>'
//2) Set delay after which message should be hidden, in miliseconds ('' makes it incessantly visible on the screen)
var hidetimer='';
//3) Set speed of animation (1-50), where larger is faster
var BallSpeed = 10;



///NO NEED TO EDIT BELOW THIS LINE///////////

var contentWidth;
var contentHeight;
var maxBallSpeed = 50;


var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;

function initializeBall() {
if (document.all) {
xMax = document.body.clientWidth
yMax = document.body.clientHeight
document.all("supertext").style.visibility = "visible";
contentWidth=supertext.offsetWidth
contentHeight=supertext.offsetHeight
}
else if (document.layers) {
xMax = window.innerWidth;
yMax = window.innerHeight;
contentWidth=document.supertext.document.width
contentHeight=document.supertext.document.height
document.layers["supertext"].visibility = "show";
}
setTimeout('moveBall()',400);
if (hidetimer!='')
setTimeout("hidetext()",hidetimer)
}

function moveBall() {
if (superballRunning == true) {
calculatePosition();
if (document.all) {
document.all("supertext").style.left = xPos + document.body.scrollLeft;
document.all("supertext").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["supertext"].left = xPos + pageXOffset;
document.layers["supertext"].top = yPos + pageYOffset;
}
animatetext=setTimeout('moveBall()',20);
}
}

function calculatePosition() {
if (xDir == "right") {
if (xPos > (xMax - contentWidth - BallSpeed)) {
xDir = "left";
}
}
else if (xDir == "left") {
if (xPos < (0 + BallSpeed)) {
xDir = "right";
}
}
if (yDir == "down") {
if (yPos > (yMax - contentHeight - BallSpeed)) {
yDir = "up";
}
}
else if (yDir == "up") {
if (yPos < (0 + BallSpeed)) {
yDir = "down";
}
}
if (xDir == "right") {
xPos = xPos + BallSpeed;
}
else if (xDir == "left") {
xPos = xPos - BallSpeed;
}
else {
xPos = xPos;
}
if (yDir == "down") {
yPos = yPos + BallSpeed;
}
else if (yDir == "up") {
yPos = yPos - BallSpeed;
}
else {
yPos = yPos;
}
}

function hidetext(){
if (document.all)
supertext.style.visibility="hidden"
else if (document.layers)
document.supertext.visibility="hide"
clearTimeout(animatetext)
}

if (document.all||document.layers){
document.write('<span id="supertext"><nobr>'+thecontent+'</nobr></span>')
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");
}

</script>

</body>

</html>