SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to make a scrolling ticker stop and reverse direction?

    Hi,

    I've created a scrolling text ticker, using script from:

    http://javascript.internet.com/scrol...scroller.html.

    The entire page can be seen at:

    http://home.earthlink.net/~rockypier...ORKnewLogo.htm

    I'd like to have the scrolling stop on mouseover, and insert "forward" and "reverse" arrows to resume movement.

    Any ideas on how to do this?

  2. #2
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here, I added the stopping function. I am not sure how you want the arrows done.

    Code:
    <!-- THREE STEPS TO INSTALL LINE SCROLLER:
    
      1.  Copy the coding into the HEAD of your HTML document
      2.  Add the onLoad event handler into the BODY tag
      3.  Put the last coding into the BODY of your HTML document  -->
    
    <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
    
    <HEAD>
    
    <SCRIPT LANGUAGE="JavaScript1.2">
    <!-- Original:  Ernst Straka (ernst.straka@central-europe.basf.org) -->
    <!-- Web Site:  http://www.rs-systems.at/straka -->
    
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Begin
    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 intervall
    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;
    intervall = 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;
    }
    
    function stopTick(){
    clearInterval(intervall)
    }
    //  End -->
    </script>
    </HEAD>
    
    <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
    
    <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;" onmouseover="stopTick()" onmouseout="intervall = setInterval('tick()', 10);">
    <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>
    
    <p><center>
    <font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>
    
    <!-- Script Size:  2.48 KB -->

  3. #3
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    A good illustration of the arrows can be seen in the applet at:

    http://www.nasdaq.com/asp/ticker.asp


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •