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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with javascript scroller looping

    Hello everyone, any help you can give with my issue is greatly appreciated. I have the following code that horizontally scrolls a set of 9 "blocks" from left to right in succession. It works exactly as I would like, except for the fact that it continually loops through. I would like for it to stop once the last "block" is rendered. Thanks again for your help!


    // ***** Set up the blocks that will scroll through
    var scroll1 = new scrollObject("scr1", 440, 50, "right", 2750, 1.15);
    scroll1.block[0] = "Text in block 1";
    scroll1.block[1] = "Text in block 2";
    scroll1.block[2] = "Text in block 3";
    scroll1.block[3] = "Text in block 4";
    scroll1.block[4] = "Text in block 5";
    scroll1.block[5] = "Text in block 6";
    scroll1.block[6] = "Text in block 7";
    scroll1.block[7] = "Text in block 8";
    scroll1.block[8] = "Text in block 9";

    window.onload = function() {
    scroll1.scroll();
    scroll2.scroll();
    }

    function scrollObject(main, width, height, direct, pause, speed) {
    var self = this;
    this.main = main;
    this.width = width;
    this.height = height;
    this.direct = direct;
    this.pause = pause;
    this.speed = Math.max(1.001, Math.min((direct == "up" || direct == "down") ? height : width, speed));
    this.block = new Array();
    this.blockprev = this.offset = 0;
    this.blockcurr = 1;
    this.mouse = false;
    this.scroll = function() {
    if (!document.getElementById) return false;
    this.main = document.getElementById(this.main);
    while (this.main.firstChild) this.main.removeChild(this.main.firstChild);
    this.main.style.overflow = "hidden";
    this.main.style.position = "relative";
    this.main.style.width = this.width + "px";
    this.main.style.height = this.height + "px";
    var x=0;
    for (x = 0; x < 9; x++) {
    var table = document.createElement('table');
    table.cellPadding = table.cellSpacing = table.border = "0";
    table.style.position = "absolute";
    table.style.left = table.style.top = "0px";
    table.style.width = this.width + "px";
    table.style.height = this.height + "px";
    table.style.overflow = table.style.visibility = "hidden";
    var tbody = document.createElement('tbody');
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    td.innerHTML = this.block[x];
    tr.appendChild(td);
    tbody.appendChild(tr);
    table.appendChild(tbody);
    this.main.appendChild(this.block[x] = table);
    }
    if (this.block.length > 1) {
    this.main.onmouseover = function() { self.mouse = true; }
    this.main.onmouseout = function() { self.mouse = false; }
    setInterval(function() {
    if (!self.offset && self.scrollLoop()) self.block[self.blockcurr].style.visibility = "visible";
    }, this.pause);
    } this.block[this.blockprev].style.visibility = "visible";
    }
    this.scrollLoop = function() {
    if (!this.offset) {
    if (this.mouse) return false;
    this.offset = (this.direct == "up" || this.direct == "down") ? this.height : this.width;
    } else this.offset = Math.floor(this.offset / this.speed);
    if (this.direct == "up" || this.direct == "down") {
    this.block[this.blockcurr].style.top = ((this.direct == "up") ? this.offset : -this.offset) + "px";
    this.block[this.blockprev].style.top = ((this.direct == "up") ? this.offset - this.height : this.height - this.offset) + "px";
    } else {
    this.block[this.blockcurr].style.left = ((this.direct == "left") ? this.offset : -this.offset) + "px";
    this.block[this.blockprev].style.left = ((this.direct == "left") ? this.offset - this.width : this.width - this.offset) + "px";
    }
    if (!this.offset) {
    this.block[this.blockprev].style.visibility = "hidden";
    this.blockprev = this.blockcurr;
    if (++this.blockcurr >= this.block.length) this.blockcurr = 0;
    } else setTimeout(function() { self.scrollLoop(); }, 30);
    return true;
    }
    }

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,188
    Thanks
    10
    Thanked 569 Times in 550 Posts
    kill off the code below that re-schedules the loop


    setInterval(function() {
    if (!self.offset && self.scrollLoop()) self.block[self.blockcurr].style.visibility = "visible";
    }, this.pause);
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    rnd me, thanks for your input. I tried what you recommended, but that prevented the scrolling altogether. It renders the first "block", but does not scroll.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Here's a quick and cheap fix (new code highlighted):

    Code:
    var intervalCount = 0;
    var interval = setInterval(function() {
    if(++intervalCount == scroll1.block.length - 1) clearTimeout(interval);
    if (!self.offset && self.scrollLoop()) self.block[self.blockcurr].style.visibility = "visible";
    }, this.pause);

  • #5
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Trinithis, thanks very much for your help. That did the trick. Much appreciated! Have a good weekend.


  •  

    Posting Permissions

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