Connect with Expertise | Find Experts, Get Answers, Share Insights
bytes > javascript / ajax / dhtml > javascript / ajax / dhtml questions

Javascript Code for Horizontal Scrolling Text

 
Join Date: Nov 2008
Posts: 5
#1: Nov 3 '08
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

acoder's Avatar
E
C
  
Join Date: Nov 2006
Location: UK
Posts: 14,979
#2: Nov 3 '08

re: Javascript Code for Horizontal Scrolling Text

What have you managed or searched for so far?

The basics are setInterval (for timing) and the style.left property for setting the position.
 
Join Date: Oct 2007
Posts: 7
#3: Nov 3 '08

re: Javascript Code for Horizontal Scrolling Text

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>
 
Join Date: Nov 2008
Posts: 5
#4: Nov 3 '08

re: Javascript Code for Horizontal Scrolling Text

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.
acoder's Avatar
E
C
  
Join Date: Nov 2006
Location: UK
Posts: 14,979
#5: Nov 3 '08

re: Javascript Code for Horizontal Scrolling Text

Try this

I think this will help you
The script looks out-dated. There are better cross-browser scripts.
acoder's Avatar
E
C
  
Join Date: Nov 2006
Location: UK
Posts: 14,979
#6: Nov 3 '08

re: Javascript Code for Horizontal Scrolling Text

Thanks for the reply... but am getting a horizontal scroll on the browser window.
So what did you want instead?
Reply

Tags
hscroll javascript

« previous question | next question »

Similar topics

More
Copyright 1995-2010 BYTES. All rights Reserved About Bytes | Help
Latest Expert Topics | Popular Tags
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap