Question

I have made a simple slideshow.. It works like it should exepct when you tab away and leave the window and tabs back after a while.. Then the slideshow goes crazy like it has stood still and it needs to to keep up with the slides or rolls while the window was in the background.. The slides comes consecutive and after a while goes back to normal

the script:

function Slideshow(){
    var _this = this;

    this.i = 0;
    this.num = 0;

    this.slide = null;
    this.slide_txt_bg = null;
    this.opacity_hover = 0.95;
    this.opacity_hout = 0.5;
    this.opacity_txt_out = 0;
    this.opacity_txt_in = 0.6;
    this.width = 340;
    this.time = 18;
    this.time_clicked = 25;
    this.interval = null;

    this.btn_next = null;
    this.btn_prev = null;

    this.clicked = false;

    this.cnstr = function(){
        this.slide = $('#slideshow_film').detach();
        this.slide_txt_bg = $('#slideshow_txt_bg').css('opacity', this.opacity_txt_in);

        var slideshow = $('#slideshow');
        if(slideshow.length > 0){
            if(this.slide.length > 0){
                var slideshow_inner = $('#slideshow_inner').append(this.slide);
                this.num = this.slide.find('tr')[0].cells.length;

                this.slide.css('width', (this.num * 100)+'%');
                var controls = $('<div class="slideshow_controls"></div>').prependTo(slideshow);
                this.btn_prev = $('<div class="btn_slideshow btn_slideshow_prev"></div>').appendTo(controls)
                    .bind('click', {
                        mode : -1
                    }, this.btn_click)
                    .css('opacity', this.opacity_hout)
                    .mouseover(this.btn_hover)
                    .mouseout(this.btn_hout);
                this.btn_next = $('<div class="btn_slideshow btn_slideshow_next"></div>').appendTo(controls)
                    .bind('click', {
                        mode : 1
                    }, this.btn_click)
                    .css('opacity', this.opacity_hout)
                    .mouseover(this.btn_hover)
                    .mouseout(this.btn_hout);

                this.auto_roll();
            }
            else{
                slideshow.remove();
            }
        }
    };

    this.auto_roll = function(){
        if(this.interval){
            clearInterval(this.interval);
            this.interval = null;
        }
        var time = (this.clicked ? this.time_clicked:this.time) * 1000;
        this.interval = setInterval(function(){
            _this.btn_next.click();
        }, time);
    };

    this.btn_click = function(e){
        _this.txt_bg_out();

        if(e.which){
            _this.clicked = true;
        }
        _this.auto_roll();

        _this.i += e.data.mode;
        if(_this.i < 0){
            _this.i = _this.num - 1;
        }
        else if(_this.i > _this.num - 1){
            _this.i = 0;
        }

        var value = _this.i * _this.width * -1;
        _this.slide.animate({
            left : value+'px'
        }, 800, _this.txt_bg_in);
    };

    this.txt_bg_in = function(){
        _this.slide_txt_bg.delay(500).fadeTo(700, _this.opacity_txt_in);
    };

    this.txt_bg_out = function(){
        _this.slide_txt_bg.fadeTo(300, _this.opacity_txt_out);
    };

    this.btn_hover = function(){
        $(this).fadeTo(300, _this.opacity_hover);
    };

    this.btn_hout = function(){
        $(this).fadeTo(300, _this.opacity_hout);
    };
}

the code:

<div id="slideshow">
    <div id="slideshow_inner">
        <div id="slideshow_txt_bg"></div>
    </div>
</div>

<table id="slideshow_film">
    <tr>
        <td>
            <h1 class="margin:0px">headline</h1>
            <div class="slideshow_img">
                <img src="/gfx/slideshow.email.png" />
            </div>
            <div class="txt txt_box">
                text
            </div>
        </td>
        <td>
            <h1 class="margin:0px">headline</h1>
            <div class="slideshow_img">
                <img src="/gfx/slideshow.bank.png" />
            </div>
            <div class="txt txt_box">
                text
            </div>
        </td>
        <td>
            <h1 class="margin:0px">headline</h1>
            <div class="slideshow_img">
                <img src="/gfx/slideshow.alert.png" />
            </div>
            <div class="txt txt_box">
                text
            </div>
        </td>
        <td>
            <h1 class="margin:0px">headline</h1>
            <div class="slideshow_img">
                <img src="/gfx/slideshow.folders.png" />
            </div>
            <div class="txt txt_box">
                text
            </div>
        </td>
    </tr>
</table>

Answer 1

I had this problem too a while ago. I solved it by stopping the slideshow on window blur and restarting it on focus:

jQuery(window).blur(function() {
  // Stop slideshow
}).focus(function() {
  // Restart slideshow
});