469,343 Members | 5,596 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,343 developers. It's quick & easy.

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
6 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
Try this

I think this will help you


Expand|Select|Wrap|Line Numbers
  1. var l1 = 0; // Left of ticker In pixel, Or 0 To position relative
  2. var t1 = 0; // top of ticker In pixel, Or 0 To position relative
  3. var w1 = 400; // width of ticker In pixel
  4. var ie = document.all ? true : false;
  5. var first = true;
  6. var l2 = l1 + w1;
  7. var l3 = l1 - l2;
  8. var l = l2;
  9. var pos;
  10. function tickinit() {
  11. if(ie) {
  12. if(l1 == 0 && t1 == 0) {
  13. pos = document.all['tickpos'];
  14. l1 = getLeft(pos);
  15. t1 = getTop(pos);
  16. }
  17. ticktext.style.posTop = t1;
  18. }
  19. else {
  20. if(l1 == 0 && t1 == 0) {
  21. pos = document.anchors['tickpos'];
  22. l1 = pos.x;
  23. t1 = pos.y;
  24. }
  25. document.ticktext.pageY = t1;
  26. }
  27. l2 = l1 + w1;
  28. l3 = l1 - l2;
  29. l = l2;
  30. setInterval('tick()', 10);
  31. }
  32. function getLeft(ll) {
  33. if(ll.offsetParent)
  34. return (ll.offsetLeft + getLeft(ll.offsetParent));
  35. else
  36. return (ll.offsetLeft);
  37. }
  38. function getTop(ll) {
  39. if(ll.offsetParent)
  40. return (ll.offsetTop + getTop(ll.offsetParent));
  41. else
  42. return (ll.offsetTop);
  43. }
  44. function tick() {
  45. l = l - 0.5;
  46. if(l < l3) l = l2;
  47. cl = l1 - l;
  48. cr = l2 - l;
  49. if(ie) {
  50. ticktext.style.posLeft = l;
  51. ticktext.style.posTop = t1;
  52. ticktext.style.clip = "rect(auto "+cr+"px auto "+cl+"px)";
  53. if(first) ticktext.style.visibility = "visible";
  54. }
  55. else {
  56. document.ticktext.pageX = l;
  57. document.ticktext.clip.left = cl;
  58. document.ticktext.clip.right = cr;
  59. if(first) document.ticktext.visibility = "show";
  60. }
  61. first = false;
  62. }
  63.  
  64.  
  65. </script>
  66.  
  67. </head>
  68. <body onload="tickinit()">
  69.  
  70. <!-- STEP THREE: Copy this code into the BODY of your HTML document -->
  71.  
  72. <a name="tickpos"> </a>
  73.  
  74. <div id="ticktext" style="position:absolute;font-family:arial;font-size:14pt;visibility:hidden;">
  75. <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>
  76. </div>
  77. </body>
  78. </html>
Nov 3 '08 #3
Try this

I think this will help you


Expand|Select|Wrap|Line Numbers
  1. var l1 = 0; // Left of ticker In pixel, Or 0 To position relative
  2. var t1 = 0; // top of ticker In pixel, Or 0 To position relative
  3. var w1 = 400; // width of ticker In pixel
  4. var ie = document.all ? true : false;
  5. var first = true;
  6. var l2 = l1 + w1;
  7. var l3 = l1 - l2;
  8. var l = l2;
  9. var pos;
  10. function tickinit() {
  11. if(ie) {
  12. if(l1 == 0 && t1 == 0) {
  13. pos = document.all['tickpos'];
  14. l1 = getLeft(pos);
  15. t1 = getTop(pos);
  16. }
  17. ticktext.style.posTop = t1;
  18. }
  19. else {
  20. if(l1 == 0 && t1 == 0) {
  21. pos = document.anchors['tickpos'];
  22. l1 = pos.x;
  23. t1 = pos.y;
  24. }
  25. document.ticktext.pageY = t1;
  26. }
  27. l2 = l1 + w1;
  28. l3 = l1 - l2;
  29. l = l2;
  30. setInterval('tick()', 10);
  31. }
  32. function getLeft(ll) {
  33. if(ll.offsetParent)
  34. return (ll.offsetLeft + getLeft(ll.offsetParent));
  35. else
  36. return (ll.offsetLeft);
  37. }
  38. function getTop(ll) {
  39. if(ll.offsetParent)
  40. return (ll.offsetTop + getTop(ll.offsetParent));
  41. else
  42. return (ll.offsetTop);
  43. }
  44. function tick() {
  45. l = l - 0.5;
  46. if(l < l3) l = l2;
  47. cl = l1 - l;
  48. cr = l2 - l;
  49. if(ie) {
  50. ticktext.style.posLeft = l;
  51. ticktext.style.posTop = t1;
  52. ticktext.style.clip = "rect(auto "+cr+"px auto "+cl+"px)";
  53. if(first) ticktext.style.visibility = "visible";
  54. }
  55. else {
  56. document.ticktext.pageX = l;
  57. document.ticktext.clip.left = cl;
  58. document.ticktext.clip.right = cr;
  59. if(first) document.ticktext.visibility = "show";
  60. }
  61. first = false;
  62. }
  63.  
  64.  
  65. </script>
  66.  
  67. </head>
  68. <body onload="tickinit()">
  69.  
  70. <!-- STEP THREE: Copy this code into the BODY of your HTML document -->
  71.  
  72. <a name="tickpos"> </a>
  73.  
  74. <div id="ticktext" style="position:absolute;font-family:arial;font-size:14pt;visibility:hidden;">
  75. <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>
  76. </div>
  77. </body>
  78. </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
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

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by mr_burns | last post: by
4 posts views Thread by anna | last post: by
4 posts views Thread by D Newsham | last post: by
2 posts views Thread by Just D. | last post: by
14 posts views Thread by Karin Jensen | last post: by
3 posts views Thread by sumit | last post: by
4 posts views Thread by lmarceglia | last post: by
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.