Javascript Code for Horizontal Scrolling Text

Hi ,

I need the Javascript code for Scrolling Horizontal Text instead of using the Marquee tag, as the Marquee tag is not supported by the Netscape Browser. Kindly Do help me out.

Regards
Smita

Nov 3 '08 #1

Follow Post Reply

14603

acoder

16,027

Expert Mod 8TB

What have you managed or searched for so far?

The basics are setInterval (for timing) and the style.left property for setting the position.

Nov 3 '08 #2

balurajeev

Try this

I think this will help you

Expand|Select|Wrap|Line Numbers

 var l1 = 0; // Left of ticker In pixel, Or 0 To position relative

var t1 = 0; // top of ticker In pixel, Or 0 To position relative

var w1 = 400; // width of ticker In pixel

var ie = document.all ? true : false;

var first = true;

var l2 = l1 + w1;

var l3 = l1 - l2;

var l = l2;

var pos;

function tickinit() {

if(ie) {

if(l1 == 0 && t1 == 0) {

pos = document.all['tickpos'];

l1 = getLeft(pos);

t1 = getTop(pos);

}

ticktext.style.posTop = t1;

}

else {

if(l1 == 0 && t1 == 0) {

pos = document.anchors['tickpos'];

l1 = pos.x;

t1 = pos.y;

}

document.ticktext.pageY = t1;

}

l2 = l1 + w1;

l3 = l1 - l2;

l = l2;

setInterval('tick()', 10);

}

function getLeft(ll) {

if(ll.offsetParent)

return (ll.offsetLeft + getLeft(ll.offsetParent));

else

return (ll.offsetLeft);

}

function getTop(ll) {

if(ll.offsetParent)

return (ll.offsetTop + getTop(ll.offsetParent));

else

return (ll.offsetTop);

}

function tick() {

l = l - 0.5;

if(l < l3) l = l2;

cl = l1 - l;

cr = l2 - l;

if(ie) {

ticktext.style.posLeft = l;

ticktext.style.posTop = t1;

ticktext.style.clip = "rect(auto "+cr+"px auto "+cl+"px)";

if(first) ticktext.style.visibility = "visible";

}

else {

document.ticktext.pageX = l;

document.ticktext.clip.left = cl;

document.ticktext.clip.right = cr;

if(first) document.ticktext.visibility = "show";

}

first = false;

}
 
</script>
 
</head>

<body onload="tickinit()">
 
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
 
<a name="tickpos"> </a>
 
<div id="ticktext" style="position:absolute;font-family:arial;font-size:14pt;visibility:hidden;">

<nobr>Doesn't this message scroller look great? You can even insert links like this: <a href="http://www.yahoo.com" target="_blank">yahoo.com</a> Now it repeats.</nobr>

</div>

</body>

</html>

Nov 3 '08 #3

smita232

Try this

I think this will help you

Expand|Select|Wrap|Line Numbers

var l1 = 0; // Left of ticker In pixel, Or 0 To position relative

var t1 = 0; // top of ticker In pixel, Or 0 To position relative

var w1 = 400; // width of ticker In pixel

var ie = document.all ? true : false;

var first = true;

var l2 = l1 + w1;

var l3 = l1 - l2;

var l = l2;

var pos;

function tickinit() {

if(ie) {

if(l1 == 0 && t1 == 0) {

pos = document.all['tickpos'];

l1 = getLeft(pos);

t1 = getTop(pos);

}

ticktext.style.posTop = t1;

}

else {

if(l1 == 0 && t1 == 0) {

pos = document.anchors['tickpos'];

l1 = pos.x;

t1 = pos.y;

}

document.ticktext.pageY = t1;

}

l2 = l1 + w1;

l3 = l1 - l2;

l = l2;

setInterval('tick()', 10);

}

function getLeft(ll) {

if(ll.offsetParent)

return (ll.offsetLeft + getLeft(ll.offsetParent));

else

return (ll.offsetLeft);

}

function getTop(ll) {

if(ll.offsetParent)

return (ll.offsetTop + getTop(ll.offsetParent));

else

return (ll.offsetTop);

}

function tick() {

l = l - 0.5;

if(l < l3) l = l2;

cl = l1 - l;

cr = l2 - l;

if(ie) {

ticktext.style.posLeft = l;

ticktext.style.posTop = t1;

ticktext.style.clip = "rect(auto "+cr+"px auto "+cl+"px)";

if(first) ticktext.style.visibility = "visible";

}

else {

document.ticktext.pageX = l;

document.ticktext.clip.left = cl;

document.ticktext.clip.right = cr;

if(first) document.ticktext.visibility = "show";

}

first = false;

}

</script>

</head>

<body onload="tickinit()">



<a name="tickpos"> </a>

<div id="ticktext" style="position:absolute;font-family:arial;font-size:14pt;visibility:hidden;">

<nobr>Doesn't this message scroller look great? You can even insert links like this: <a href="http://www.yahoo.com" target="_blank">yahoo.com</a> Now it repeats.</nobr>

</div>

</body>

</html>

Thanks for the reply... but am getting a horizontal scroll on the browser window.

Nov 3 '08 #4

acoder

16,027

Expert Mod 8TB

Try this

I think this will help you

The script looks out-dated. There are better cross-browser scripts.

Nov 3 '08 #5

acoder

16,027

Expert Mod 8TB

Thanks for the reply... but am getting a horizontal scroll on the browser window.

So what did you want instead?

Nov 3 '08 #6

thimmappa

If you are trying to achive scrolling text through javaScript you can have a look at the free code provided at http://pc.byethost17.com/scripts/javascript/?id=54
Copy the code in your <script> tags in your HTML file and use the fucntion to call it using the function scroller = new Scroller(SCROLLING_TEXT_ID, SLOWER_ID, FASTER_ID, CHANGE_DIRECTION_ID);

Sep 16 '10 #7

Javascript Code for Horizontal Scrolling Text

Post your reply

Similar topics