Javascript Code for Horizontal Scrolling Text

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • smita232
    New Member
    • Nov 2008
    • 5
    #1

    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
    Tags: hscroll javascript
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      What have you managed or searched for so far?

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

        Comment

        • balurajeev
          New Member
          • Oct 2007
          • 7
          #3
          Try this

          I think this will help you


          Code:
          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>
          Last edited by acoder; Nov 3 '08, 11:41 AM. Reason: Added [code] tags

            Comment

            • smita232
              New Member
              • Nov 2008
              • 5
              #4
              Originally posted by balurajeev
              Try this

              I think this will help you


              Code:
              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>


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

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032
                  #5
                  Originally posted by balurajeev
                  Try this

                  I think this will help you
                  The script looks out-dated. There are better cross-browser scripts.

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Originally posted by smita232
                      Thanks for the reply... but am getting a horizontal scroll on the browser window.
                      So what did you want instead?

                        Comment

                        • thimmappa
                          New Member
                          • Sep 2010
                          • 4
                          #7
                          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(SCROLL ING_TEXT_ID, SLOWER_ID, FASTER_ID, CHANGE_DIRECTIO N_ID);

                            Comment

                            Previous template Next
                            Working...