Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Javascript newbie problem

    Hi I am using the following script to display few strings of text with a set delay.

    My problem is that after displaying all strings of text, the script goes back to displaying the first string again.

    I would like the script to stop after displaying the last text string.

    Your help would be appreciated.

    Code:
    <script type="text/javascript">
     
    //addThisEvent -utility function for setting event listeners
    //cross-browser, and preserving 'this' within attachEvent.
    //el may be a single html element as a DOM object, or the window object,
    //type should be string name of event type ('on' prefix not required, so 'mouseover' or 'onmouseover' works fine)
    //fn should be a function to set as an event handler
    function addThisEvent(el, type, fn) {
        var ename = type.replace(/^on/i, '');
        if (el.attachEvent) { //IE
            el.attachEvent('on'+ ename, function () {
                return fn.call(el, window.event); //fixes IE's fudging of 'this' in attachEvent
            });
        } else if (el.addEventListener) { //Standard
            el.addEventListener(ename, fn, false );
        } else {
            el["on"+ename] = fn;
        }
    }
     
    addThisEvent(window, 'load', function () {
        var i = 0,
            frequency = 2000, //rate of change frequency, 1000 = 1 second
            el = document.getElementById('rotatingTextParagraph'), //the html DOM element to show the text in
            textArray = [
            'first text  string',
            'second text string',
            'third text string',
            'Fourth text string'
        ];
        el.innerHTML = textArray[i++];
        el.textRotationInterval = window.setInterval(function () {
            if (i >= textArray.length) {
                i = 0;
            }
    
      el.innerHTML = textArray[i++];      
        }, frequency);
     
    });
      
    </script>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Replace:

    Code:
    if (i >= textArray.length) {
                i = 0;
    with:

    Code:
    if (i >= textArray.length) {
                clearInterval(el.textRotationInterval);
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Stephen,

    Thanks for your response.

    With your suggestion, it's not looping back to the first text string which is fine, but now it displays the word 'undefined' after the last string is displayed.

    I forgot to mention in my first post that once the earlier strings have been displayed I would like the last string to be displayed indefinitely on the page.

    For example in my code example above, once the first 3 text strings have been displayed, I'd like 'Fourth Text String' to display constantly without the script going back to the first string again.

    Currently after i implemented your suggestion it is showing the text 'undefined' after displaying the final string of text.
    Last edited by frank5050; 06-23-2012 at 10:00 PM.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Eeeh!
    Why using an advanced function to create an advanced eventListener that can be called by just window.onload??
    Code:
    var textNum=0;
    var frequency = 2000;
    var textArray = [
            'first text  string',
            'second text string',
            'third text string',
            'Fourth text string'
        ];
    function displayTexts(){
    document.getElementById('rotatingTextParagraph').innerHTML=textArray[textNum++];
    if (textNum<textArray.length){
    setTimeout(displayTexts,frequency);
    }
    }
    window.onload=function(){displayTexts();}

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Lerura. Your code snippet works just fine.

    I would like to know if this script is cross-browser compatible?

    If not, what can I do to make sure this works on pretty much all browsers?

    Thanks

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,550
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    That will work on all browsers.

    If you take that <script> *OUT* of the <head> of your page and put it JUST BEFORE the </body> of your page, it can even be a tad simpler. And we can tweak the code, too, to be simpler.

    Code:
    <html>
    <body>
    .... body of page here ...
    <script type="text/javascript">
    var textArray = [
            'first text  string',
            'second text string',
            'third text string',
            'Fourth text string'
        ];
    function displayTexts()
    {
        document.getElementById('rotatingTextParagraph').innerHTML
                = textArray.shift();
        if ( textArray.length > 0 )
        {
            setTimeout( displayTexts, 2000 );
        }
    }
    displayTexts();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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