473,322 Members | 1,425 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

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 14959
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

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

Similar topics

4
by: mr_burns | last post by:
Hi, Is it possible to disble horizontal scrolling using CSS? I want to try and use two backgrounds, one tiling vertically and part of the body background, which will not force scrolling, but one...
4
by: anna | last post by:
How to tell if a horizontal scrollbar is present? I only want to use scrollTo if horizontal scrollbar is present. window.scrollbars.visibility doesn't specify which scrollbar is present, so it...
4
by: D Newsham | last post by:
Hi, This javascript creates a table that has a header and side column that do not move while scrolling through the table. I need to convert this to vb script. Can anybody help, or do you have...
2
by: Just D. | last post by:
Does anybody know how to disable the horizontal scrolling on ASPX form? What JAVA script should be used for that? The standard methods don't help and I'm looking for some JAVA function to fire it...
14
by: Karin Jensen | last post by:
Hi - I am trying to use Javascript to put material inside a table (i.e. alongside the previous material) if the user's screensize is big enough and outide the table (beneath table) if it isn't. ...
3
by: sumit | last post by:
Hi, I made a data grid vertically as well as horizontal scrollable as number of columns are very large!! But when i scroll horizontally then header is not visible as it also gets scrolled...
0
by: Dan Hinsley | last post by:
I just got one of the new Microsoft Mice that has a "tilt wheel" for horizontal scrolling. This works in a listbox in my VB.NET app, but doesn't work for a datagrid that does have a horizontal...
4
by: lmarceglia | last post by:
Hi, I have this website that doesn't work in Firefox 1.5: www.pianetaluca.com The HTML source is: <TITLE>PianetaLuca</TITLE> </HEAD>
3
by: j0rd4n | last post by:
I have a user control that needs to allow vertical scrolling but not horizontal scrolling. In the user control's resize event, I need to adjust the size of all the children controls. For this to...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.