Making scrolling text effect, using Javascript | December 2024

home / software / tips and tricks / Making scrolling text effect, using Javascript

Making scrolling text effect, using Javascript

Category: Java Script
view more software Tips and Tricks

Updated: 09/30/2011 13:09 PM
Author: Shiju Mathews

Status: Resolved.

We can make the text scrolling effect by using javascript and div tags.
Add the following code to the Tag to add some css style sheet.

Also add the following code to the Tag to add javscript functionality.

<script type="text/javascript"> var initialDelay = 1000 //initial delay (1000=1 seconds)
var marqueeCopySpeed = 1 //Marquee scroll speed (1-10 10 is faster)
var pauseit = 1 //Pause onMousever (0:1, 1=yes)?
var copyspeed = marqueeCopySpeed
var pausespeed = (pauseit == 0) ? copyspeed : 0
var actualheight = ''
function StartScroll() {
if (parseInt(crossScroll.style.top) > (actualheight * (-1) + 1)) //if scroller hasn't reached the end of its height
crossScroll.style.top = parseInt(crossScroll.style.top) - copyspeed + "px" //move scroller upwards
else {//else, reset to original position
crossScroll.style.top = parseInt(marqueeheight) + 1 + "px"
}
}
function initializemarquee() {
crossScroll = document.getElementById("divScrollContent")
crossScroll.style.top = 0
marqueeheight = document.getElementById("DivScroller").offsetHeight
actualheight = crossScroll.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7") != -1) { //if Opera or Netscape 7x, add scrollbars to scroll and exit
crossScroll.style.height = marqueeheight + "px"
crossScroll.style.overflow = "scroll"
return
}
setTimeout('lefttime=setInterval("StartScroll()",50)', initialDelay)
}
if (window.addEventListener) {
window.addEventListener("load", initializemarquee, false)
}
else if (window.attachEvent) {
window.attachEvent("onload", initializemarquee)
}
else if (document.getElementById) {
window.onload = initializemarquee
}
</script>

Also add the HTML in the body tag where you need the scrolling text

*** This method can cause some flickering. If you are selecting a light background (light blue) and a light for color (silver or Bright) you can avoid some flickering effect.

Indian Resources by Category

Indian Grocery Stores

Indian Dress Stores

Indian Churches

Indian Associations

Indian Restaurants

Indian Jewelry Stores

Indian Hindu Temple

alt="Add your business to our listing Free"

Software Resources

Tips and Tricks

Interview Questions for C#

Interview Questions for ASP.Net

Interview Questions for SQL Server

Tags: Making scrolling text effect using Javascript

Updated on: December 2024