Full version: jsB@nk » Text » Animation » Float a Message Across the Screen
URL: https://www.javascriptbank.com/float-a-message-across-the-screen.html
You can have the message glide across only once if you like, or you can change the delay between glides across. This JavaScript code can also accommodate changing text messages.
Full version: jsB@nk » Text » Animation » Float a Message Across the Screen
URL: https://www.javascriptbank.com/float-a-message-across-the-screen.html
<style type="text/css">#container { position:relative; visibility:hidden; margin:2em auto; width:80%; height:30px; overflow:hidden }#floatDiv { position:absolute; visibility:hidden; width:400px; left:0; top:0; z-index:1; text-align:left; font-weight:bold; color:#337 }</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>floatObject.holder = [];// arguments: id, left, top, direction, speed (pixels per loop), delay for restart or null, optional end functionfunction floatObject(id,x,y,dir,sp,d,fn) { this.el = document.getElementById? document.getElementById(id): null; if (!this.el) return; var px = window.opera? 0: "px"; this.id = id; this.xOff = x; this.yOff = y; this.el.style.left = x + px; this.el.style.top = y + px; this.el.style.visibility = "visible"; this.speed = sp; this.ctr = 0; this.active = true; if (fn) this.onFloatEnd = fn; this.delay = d; if (!fn && !d) this.onFloatEnd = function() { this.el = null; this.active = false; }; this.prop = (dir == "left" || dir == "right")? "left": "top"; if (dir == "left" || dir == "up") this.speed = -sp; floatObject.holder[floatObject.holder.length] = this; if (!floatObject.Canvas.width || !floatObject.Canvas.height) floatObject.Canvas = floatObject.getDimensions();}floatObject.prototype.do_float = function() { var cur; switch (this.prop) { case "left": cur = parseInt( this.el.style.left ); if ( ( this.speed > 0 && cur < floatObject.Canvas.width + this.el.offsetWidth ) || ( this.speed < 0 && cur > -this.el.offsetWidth ) ) { this.el.style.left = parseInt(this.el.style.left) + this.speed + "px"; } else { if (this.delay) this.hold_and_reset(this.xOff); this.onFloatEnd(this); } break; case "top": cur = parseInt( this.el.style.top ); if ( ( this.speed > 0 && cur < floatObject.Canvas.height + this.el.offsetHeight ) || ( this.speed < 0 && cur > -this.el.offsetHeight ) ) { this.el.style.top = parseInt(this.el.style.top) + this.speed + "px"; } else { if (this.delay) this.hold_and_reset(this.yOff); this.onFloatEnd(this); } break; }}floatObject.prototype.hold_and_reset = function(nOff) { if ( this.ctr < this.delay/floatObject.callRate ) { this.el.style.visibility = "hidden"; this.ctr++; } else { this.el.style[this.prop] = nOff + "px"; this.el.style.visibility = "visible"; this.ctr = 0; }}floatObject.prototype.onFloatEnd = function(){};floatObject.callRate = 20;floatObject.timer = window.setInterval("floatObject.control()", floatObject.callRate);// Handle all instances with one timer - idea from youngpup.netfloatObject.control = function() { var i, curObj; for (i=0; curObj = floatObject.holder[i]; i++) if ( curObj && curObj.active ) curObj.do_float();}floatObject.Canvas = {}; // See last line of constructor// for obtaining largest of window and document width/heightfloatObject.getDimensions = function() { var winWd=0, winHt=0, docWd=0, docHt=0; if (window.innerWidth) winWd = window.innerWidth - 18;else if (document.documentElement && document.documentElement.clientWidth) winWd = document.documentElement.clientWidth;else if (document.body && document.body.clientWidth) winWd = document.body.clientWidth; if (window.innerHeight) winHt = window.innerHeight - 18;else if (document.documentElement && document.documentElement.clientHeight) winHt = document.documentElement.clientHeight;else if (document.body && document.body.clientHeight) winHt = document.body.clientHeight; if (document.width) docWd = document.width; else if (document.body) docWd = Math.max(document.body.scrollWidth, document.body.offsetWidth); if (document.height) docHt = document.height; else if (document.body) docHt = Math.max(document.body.scrollHeight, document.body.offsetHeight); return { width: Math.max(winWd, docWd), height: Math.max(winHt, docHt) }}if (window.addEventListener) window.addEventListener("resize", function(){ floatObject.Canvas = floatObject.getDimensions() }, "false");else if (window.attachEvent) window.attachEvent("onresize", function(){ floatObject.Canvas = floatObject.getDimensions() } );</script><script type="text/javascript">if (document.getElementById) { // get width of window/doc to place floatDiv off screen on right floatObject.Canvas = floatObject.getDimensions(); if (floatObject.Canvas.width) { // no op6 (?) // arguments: id, left, top, direction, speed (pixels per loop), delay for restart or null new floatObject("floatDiv", floatObject.Canvas.width , 0, "left", 2, 4000); document.getElementById("container").style.visibility = "visible"; }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->