pause for setInterval

pause for setInterval

hello frnds,
m creating a slide show. all has been set. What I want it to do is once you mouse over it will just stop it where ever it is in that moment, then when you mouse out it will start from the moment you moused over.


m using javascript setInterval function, which doesnt support pause functionality. so i m trying to create my own.

like the time parameter in setInterval function is 8000 and whenever i make the mouseover on image, i could find the remaining time to change the image like i mouseover on 4th second so  that i could calculate the remaining 4 second.

m sending u the complete code also..

Thanks and Regards
Inderjeet Singh



<script type="text/javascript" language="javascript">
        // SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND    background-position: 0 -24px;
        var delayLength = 8000;
        var remainingTime;

        function inder_doMove(panelWidth, tooFar, position) {
            var leftValue = $("#mover").css("left");
            // Fix for IE
            if (leftValue == "auto") { leftValue = 0; };

            var movement = position ? ((panelWidth * (position - 1) * -1)) : (parseFloat(leftValue, 10) - panelWidth);
            $('#slide-nav a[style]').removeAttr('style');

            if (movement == tooFar) {

                $('.content').animate({ opacity: 0 }, 500, function() {
                    $("#mover").animate({
                        "left": 0
                    }, 500, 'easeInOutExpo', function() {
                        $('.content').animate({ opacity: 1 }, 500);
                    });
                });
                $('#inder_SlideImage_1').css({ 'backgroundPosition': '0 -24px' });
            }
            else {
                $('.content').animate({ opacity: 0 }, 500, function() {
                    $("#mover").animate({
                        "left": movement
                    }, 500, 'easeInOutExpo', function() {
                        $('.content').animate({ opacity: 1 }, 500);
                    });
                });
                $('#inder_SlideImage_' + ((-movement / panelWidth) + 1)).css({ 'backgroundPosition': '0 -24px' });
            }
        }

        $(function() {
            //endTime = 1500 + (new Date()).getTime();
            alert((new Date()).getTime());
            // Creating the Slide Number Region Start
            $('#mover div.slide').each(function(index) {
                $('<a id="inder_SlideImage_' + (index + 1) + '" href="#" class="on">' + (index + 1) + '</a>').insertAfter('#slide-nav a:last');
            });
            $('#inder_remove').remove();
            $('#inder_SlideImage_1').css({ 'backgroundPosition': '0 -24px' });
            $('#slider').hover(function() { $('#slide-nav').animate({ bottom: '30px', opacity: .9 }, 500); inder_DivOverPause(); }, function() { $('#slide-nav').animate({ bottom: '0px', opacity: 0 }, 500); inder_DivOutPauseRemove(); }); // Animating Slide Numbers
            // Creating the Slide Number Region End

            var $slide1 = $(".slide:first"); // Picking the First Div
            var panelWidth = $slide1.css("width");
            var panelPaddingLeft = $slide1.css("paddingLeft");
            var panelPaddingRight = $slide1.css("paddingRight");
            panelWidth = parseFloat(panelWidth, 10);
            panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
            panelPaddingRight = parseFloat(panelPaddingRight, 10);

            panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight; // Calculating the Total Width

            var numPanels = $(".slide").length; // Total No of Mover Div
            var tooFar = -(panelWidth * numPanels); // Last Width

            var totalMoverwidth = numPanels * panelWidth; // Total Width of Mover

            $("#mover").css("width", totalMoverwidth);

            $("#slider").append('<a href="#" id="slider-stopper">Stop</a>'); // Add Start Stop Button

            $('#slide-nav a').click(function() {
                if ($('#slide-nav a[style]').html() != $(this).html()) {
                    inder_doMove(panelWidth, 0, $(this).html());
                }
            });
            sliderIntervalID = setInterval(function() {
                inder_doMove(panelWidth, tooFar, 0);
            }, delayLength);

            $("#slider-stopper").click(function() {
                if ($(this).text() == "Stop") {
                    clearInterval(sliderIntervalID);
                    $(this).text("Start");
                }
                else {
                    sliderIntervalID = setInterval(function() {
                        inder_doMove(panelWidth, tooFar, 0);
                    }, delayLength);
                    $(this).text("Stop");
                }

            });

        });

        function inder_DivOverPause() {
            // Here i want to calculate remaining Time
            //clearInterval(sliderIntervalID);
        }

        function inder_DivOutPauseRemove() {
            setTimeout(function() {
                sliderIntervalID = setInterval(function() {
                    inder_doMove(panelWidth, tooFar, 0);
                }, delayLength);
                alert(remainingTime);
            }, remainingTime);

        }    </script>