Simple Scrolling Text Box

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Midas NDT Sales

    Simple Scrolling Text Box

    I have been looking at a simple example of a scrolling text box (the one in
    the SAM book) as below:

    <script language="JavaS cript">
    var pos=100;
    function Scroll() {
    if (!document.getE lementById) return;
    obj=document.ge tElementById("t hetext");
    pos -=1;
    if (pos < 0-obj.offsetHeigh t+130) return;
    obj.style.top=p os;
    window.setTimeo ut("Scroll();", 30);
    }
    </script>
    </head>
    <body onLoad="Scroll( );">
    <h1>Scrolling Window Example</h1>
    <p>This example shows a scrolling window created in DHTML. The window
    is actually a layer that shows a portion of a larger layer.</p>
    <div id="thewindow" style="position :relative;width :180;height:150 ;
    overflow:hidden ; border-width:2px; border-style:solid; border-color:red">
    <div id="thetext" style="position :absolute;width :170;left:5;top :100">
    <p>This is the first paragraph of the scrolling message. The message
    is created with ordinary HTML.</p>
    <p>Entries within the scrolling area can use any HTML tags. They can
    contain <a href="http://www.starlingtec h.com/dhtml/">Links</a>.</p>
    <p>There's no limit on the number of paragraphs that you can include
    here. They don't even need to be formatted as paragraphs.</p>
    <ul><li>For example, you could format items using a bulleted list.</li></ul>
    <p>The scrolling ends when the last part of the scrolling text
    is on the screen. You've reached the end.</p>
    <p><b>[<a href="javascrip t:pos=100;Scrol l();">Start Over</a>]</b></p>
    </div>
    </div>
    </body>

    Try as I might, I cannot modify this to make the text loop instead of stop
    at the bottom, can somebody please give me the simple answer.



  • Oz

    #2
    Re: Simple Scrolling Text Box

    To make it loop simply add

    if (pos < 0-obj.offsetHeigh t+130) {
    pos = 100;
    };

    <script language="JavaS cript">
    var pos=100;
    function Scroll() {
    if (!document.getE lementById) return;
    obj=document.ge tElementById("t hetext");
    pos -=1;
    if (pos < 0-obj.offsetHeigh t+130) {
    pos = 100;
    };
    obj.style.top=p os;
    window.setTimeo ut("Scroll();", 30);
    }
    </script>




    "Midas NDT Sales" <sales@midas-ndt.co.uk> wrote in message
    news:1067010549 .90854.0@iris.u k.clara.net...[color=blue]
    > I have been looking at a simple example of a scrolling text box (the one[/color]
    in[color=blue]
    > the SAM book) as below:
    >
    > <script language="JavaS cript">
    > var pos=100;
    > function Scroll() {
    > if (!document.getE lementById) return;
    > obj=document.ge tElementById("t hetext");
    > pos -=1;
    > if (pos < 0-obj.offsetHeigh t+130) return;
    > obj.style.top=p os;
    > window.setTimeo ut("Scroll();", 30);
    > }
    > </script>
    > </head>
    > <body onLoad="Scroll( );">
    > <h1>Scrolling Window Example</h1>
    > <p>This example shows a scrolling window created in DHTML. The window
    > is actually a layer that shows a portion of a larger layer.</p>
    > <div id="thewindow" style="position :relative;width :180;height:150 ;
    > overflow:hidden ; border-width:2px; border-style:solid;[/color]
    border-color:red">[color=blue]
    > <div id="thetext" style="position :absolute;width :170;left:5;top :100">
    > <p>This is the first paragraph of the scrolling message. The message
    > is created with ordinary HTML.</p>
    > <p>Entries within the scrolling area can use any HTML tags. They can
    > contain <a href="http://www.starlingtec h.com/dhtml/">Links</a>.</p>
    > <p>There's no limit on the number of paragraphs that you can include
    > here. They don't even need to be formatted as paragraphs.</p>
    > <ul><li>For example, you could format items using a bulleted[/color]
    list.</li></ul>[color=blue]
    > <p>The scrolling ends when the last part of the scrolling text
    > is on the screen. You've reached the end.</p>
    > <p><b>[<a href="javascrip t:pos=100;Scrol l();">Start Over</a>]</b></p>
    > </div>
    > </div>
    > </body>
    >
    > Try as I might, I cannot modify this to make the text loop instead of stop
    > at the bottom, can somebody please give me the simple answer.
    >
    >
    >[/color]


    Comment

    Working...