1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need Help in Javascript Countdown Timer

Discussion in 'JavaScript' started by cr3at1v3, Dec 28, 2017.

  1. #1
    hello all, i would like to ask some help with regards to javascript timer. what i would like to do is for the javascript to countdown and redirect to a certain page, when window is out of focus it will pause or not continue to countdown.

    below is the script i have:

    <script type="text/javascript">
    $(document).ready(function(){
        var seconds = <?php echo $seconds ?>,
                second = 0,
                url = '<?php echo Helper::safeJs($url) ?>';
        var interval = setInterval(function(){
            $('#second').html(seconds - second);
            if (second >= seconds) {
                    document.location.href = url;
                    clearInterval(interval);
            }
            second++;
        }, 1000);
    });
    </script>
    
    <p align="center" class="pressed" style="line-height:150%">
    <?php echo sprintf(Lang::model()->get('Redirect_Timer'), '<strong>'.CHtml::encode($url).'</strong>', '<strong><span id="second">'.(int)$seconds.'</span></strong>'); ?>
    </p>
    PHP:
     
    cr3at1v3, Dec 28, 2017 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    What you want to check for is Document.hasFocus(). I would leave the 1 second timer as is letting it run, but inside the callback just do if (Document.hasFocus()) { /* update counter here */ }

    https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus

    That said, you really shouldn't be using PHP to generate JavaScript -- you want to pass values to it that's data-attribute's job now. You shouldn't even have the scripting in the markup inside <script> since that's a missed caching opportunity AND wouldn't even be possible if you end up needing to us the CSP (content security policy) -- there's a reason we've been told for over a DECADE to stop doing that. (and people still come up with lame excuses to keep crapping out that type of code. It won't be until it's shoved down people's gullets PHP 7 style that anything will change.)

    You probably also shouldn't be using the align attribute that hasn't existed since 1997, I'm doubtful your encoded URL should be receiving "more emphasis", inlined style="" is just as bad as inlined scripting... and fun little extra? You don't need to say type="text/JavaScript" anymore. They dropped it as being needed officially in HTML 5, and no browser ever actually paid attention to it! (same for type="text/css" on <link> when rel="stylesheet")

    but then some of the seemingly pointless redundancies -- like that CHtml:encode nonsense --- throws up some concerns about your codebase. What's wrong with htmlspecialchars?
     
    deathshadow, Jan 6, 2018 IP
  3. cr3at1v3

    cr3at1v3 Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    found the solution to this problem. thanks @deathshadow for the comment.

    here's the code i found:

    <script type="text/javascript">
    $(document).ready(function(){
        var isActive = true;
        var seconds = <?php echo $seconds ?>,
                second = 0,
                url = '<?php echo Helper::safeJs($url) ?>';
        var interval = setInterval(function(){
            if(!isActive) {
                return;
            }
            $('#second').html(seconds - second);
            if (second >= seconds) {
                document.location.href = url;
                clearInterval(interval);
            }
            second++;
        }, 1000);
    
        window.onfocus = function () {
            isActive = true;
        };
        window.onblur = function () {
            isActive = false;
        };
    });
    </script>
    Code (PHP):
     
    cr3at1v3, Mar 7, 2018 IP