JS: Aftelscript

**Bart K** · 08-01-2011, 14:08

Beste SD'ers,

Ik wil op mijn website een countdown teller die secondes weergeeft hoelang men nog moet wachten (wordt uit de database gehaald) (weergave in een disabled button) en wanneer deze voorbij zijn moet de button klikbaar zijn. Ik heb gegoogled en precies gevonden wat ik zocht, alles leek perfect (zie http://jsfiddle.net/mgSVX/2/ ) hier staat ook een werkend voorbeeld met daarnaast de code.

Code:

Code:

$.fn.timedDisable = function(time) {
    if (time == null) {
        time = 5000;
    }
    var seconds = Math.ceil(time / 1000);
    return $(this).each(function() {
        $(this).attr('disabled', 'disabled');
        var disabledElem = $(this);
        var originalText = this.innerHTML;
        disabledElem.text( originalText + ' (' + seconds + ')');
        var interval = setInterval(function() {
            disabledElem.text( originalText + ' (' + --seconds + ')');
            if (seconds === 0) {
                disabledElem.removeAttr('disabled')
                    .text(originalText);
                clearInterval(interval);
            }
        }, 1000);
    });
};

$(function() {
    $('#btnContinue').timedDisable();
});

En de display code voor op de website:

Code:

<button id='btnContinue'>Continue</button>

Wanneer ik dit in mijn script inbouw krijg ik direct een continue button, het aftel stukje lijkt niet te werken. Kan iemand mij helpen met hoe ik dit moet verwerken? Ik dacht zelf gewoon tussen

Code:

<script type="text/javascript">
</script>

Maar dat werkt helaas niet bij mij dus..

**Leon Zoutewelle** · 08-01-2011, 14:10

Heb je wel de jQuery libery ingeladen? en zo ja staat deze boven het script?

**Bart K** · 08-01-2011, 14:12

Bedankt voor je snelle reply, jQuery libery ingeladen, wat houd dat in ? Ik heb totaal geen verstand van JS helaas.

**Bas Cooijmans** · 08-01-2011, 15:20

Voeg dit eens boven het script toe:

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

;)

**Steven V.** · 08-01-2011, 15:27

Even een tip (ik weet niet waarvoor je dit gaat gebruiken), maar alles dat met javascript wordt gedaan is aan te passen door de bezoeker. Disable je een button? Dit kan zo geenabled worden. Zet je een teller op 100? Iedereen kan dit zo aanpassen naar 1.
Dus als je een systeem bouwt waarbij de user moet wachten voordat hij verder kan, controleer daarna dan ook serverside of de user daadwerkelijk de benodigde tijd heeft gewacht!

**Bart K** · 08-01-2011, 15:41

Bedankt voor de replys, de teller duurt maximaal 5 sec dus veel zullen ze daar niet aan hebben, maar daarnaast wordt er inderdaad ook serverside gecontroleerd straks. Helaas werkt het nog steeds niet, ik zal de complete pagina wel eens even posten, wellicht heb ik ergens iets fout gedaan. Hoop dat het dan zo opgelost kan worden.

Code:

<?php /* ------------------------- */

  include("config.php");
  if(! check_login()) {
    header("Location: login.php");
    exit;
  }

/* ------------------------- */ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-language" content="nl" />
    <meta name="description" content="" />
    <meta name="abstract" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="all" />
    <meta name="copyright" content="(c) 2009" />
    <meta name="language" content="nl" />

    <title>Titel</title>

    <link rel="stylesheet" type="text/css" href="css/css1.css" />
    <link rel="stylesheet" type="text/css" href="sifr/sIFR-screen.css" />
    <link rel="shortcut icon" type="image/x-icon" href="img/icons/favicon.ico" />
    <script type="text/javascript" src="js/iepngfix_tilebg.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">

$.fn.timedDisable = function(time) {
    if (time === null) {
        time = 5000;
    }
    var seconds = Math.ceil(time / 1000);
    return $(this).each(function() {
        $(this).attr('disabled', 'disabled');
        var disabledElem = $(this);
        var originalText = this.innerHTML;
        disabledElem.text(originalText + ' (' + seconds + ')');
        var interval = setInterval(function() {
            disabledElem.text(originalText + ' (' + --seconds + ')');
            if (seconds === 0) {
                disabledElem.removeAttr('disabled').text(originalText);
                clearInterval(interval);
            }
        }, 1000);
    });
};

$(function() {
    $('#btnContinue').timedDisable();
});
</script>
</head>

</body>
<table width=700 align=center><tr><td class="background" align="center"><button id='btnContinue'>Continue</button></td></tr></table>

</html>

Weergave is nu alleen de Continue button.

**Bas Cooijmans** · 08-01-2011, 17:02

Je mist een scripttag om te openen ;)

Maak er eens dit van:

Code:

<?php /* ------------------------- */

  include("config.php");
  if(! check_login()) {
    header("Location: login.php");
    exit;
  }

/* ------------------------- */ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-language" content="nl" />
    <meta name="description" content="" />
    <meta name="abstract" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="all" />
    <meta name="copyright" content="(c) 2009" />
    <meta name="language" content="nl" />

    <title>Titel</title>

    <link rel="stylesheet" type="text/css" href="css/css1.css" />
    <link rel="stylesheet" type="text/css" href="sifr/sIFR-screen.css" />
    <link rel="shortcut icon" type="image/x-icon" href="img/icons/favicon.ico" />
    <script type="text/javascript" src="js/iepngfix_tilebg.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script type="text/javascript">
$.fn.timedDisable = function(time) {
    if (time === null) {
        time = 5000;
    }
    var seconds = Math.ceil(time / 1000);
    return $(this).each(function() {
        $(this).attr('disabled', 'disabled');
        var disabledElem = $(this);
        var originalText = this.innerHTML;
        disabledElem.text(originalText + ' (' + seconds + ')');
        var interval = setInterval(function() {
            disabledElem.text(originalText + ' (' + --seconds + ')');
            if (seconds === 0) {
                disabledElem.removeAttr('disabled').text(originalText);
                clearInterval(interval);
            }
        }, 1000);
    });
};

$(function() {
    $('#btnContinue').timedDisable();
});
</script>
</head>

</body>
<table width="700" align="center"><tr><td class="background" align="center"><button id='btnContinue'>Continue</button></td></tr></table>

</html>

(Heb er ook nog wat andere foutjes uitgehaald, heb alleen het JavaScript-gedeelte niet gecontroleerd > ik ben niet zo goed in JavaScript ;))

**Bart K** · 08-01-2011, 17:06

Bedankt Bas, na 1 ding aan te hebben gepast

if (time == null)

ipv

if (time === null)

Werkt het!
Nu ga ik even proberen om dit te combineren met me database maar ga er vanuit dat dat wel lukt, zo niet post ik dit hier nog wel even.
Bedankt allemaal!

**Christian Verweij** · 08-01-2011, 17:09

zie dat de TPer de === al gevonden hadt
zie niet echt problemen

**Bart K** · 08-01-2011, 17:42

Opzich werkt het nu ook met ingebouwde database, zie:

Code:

<script type="text/javascript">
$.fn.timedDisable = function(time) {
    if (time == null) {
        time = <?php echo $verschil3; ?>;
    }
    var seconds = Math.ceil(time);
    return $(this).each(function() {
        $(this).attr('disabled', 'disabled');
        var disabledElem = $(this);
        var originalText = this.innerHTML;
        disabledElem.text(originalText + ' (' + seconds + ')');
        var interval = setInterval(function() {
            disabledElem.text(originalText + ' (' + --seconds + ')');
            if (seconds === 0) {
                disabledElem.removeAttr('disabled').text(originalText);
                clearInterval(interval);
            }
        }, 1000);
    });
};

$(function() {
    $('#btnContinue').timedDisable();
});
</script>

Echter, wanneer de pagina nu wordt geladen terwijl er geen wachttijd is zie je de teller negatief verder tellen. Dit had ik opgelost door if (seconds === 0) { aan te passen naar if (seconds < 1) { Dat werkt in principe wel alleen wordt er dan toch nog ongeveer 1 seconde het negatieve getal weergeven voordat deze verspringt naar de continue button. Heeft iemand nog een beter idee hiervoor?

JS: Aftelscript

JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

JS: Aftelscript

JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Re: JS: Aftelscript

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen