Meerdere countdowntimers op 1 pagina gebruiken
Ik heb een php pagina waar ik verschillende acties op heb staan, deze acties kan je toevoegen met een verloop datum. Iedere actie heeft dus een aparte verloop datum.
Nu ben ik aan het zoeken naar een oplossing om hier aftel countertjes bij te plaatsen zodat je kan zien hoeveel uur en seconden het nog duurt voordat de actie verlopen is.
Weet iemand een goede plugin hiervoor waar ik gewoon mijn database DATE veld in kan vullen en deze automatisch aftelt? Ik ben niet zo heel ervaren met Jquery dus ik zoek iets makkelijks wat meerdere instances toelaat.
Als je nog niet veel kaas hebt gegeten van jQuery raad ik je aan om een paar tuts te volgen. Zelf heb ik als opfrisser laatst nog de volgende gevolgd: https://www.codeschool.com/courses/try-jquery
Probeer wat op te zetten en als je vragen hebt stel ze hier en dan zal ik er naar kijken.
Wil je dat de teller continu loopt? Of is het genoeg als iedere keer dat de pagina geladen wordt je dan de tijd ziet en die blijft staan?
Ik wil dat de counter gewoon blijft lopen dus niet enkele wordt geupdate bij refresh.
De verloop datum sla ik nu op als DATE dus in principe zou een actie die op 22-10-2014 verloopt vanavond om 12:00 verlopen.
Ik zoek dus een plugin waarvan meerdere timers op 1 pagina kunnen lopen
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="getting-started"></div>
<script type="text/javascript">
$("#getting-started")
.countdown("2015/01/01", function(event) {
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});
</script>
<script type="text/javascript">
$("#getting-started")
.countdown("2015/01/01", function(event) {
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});
</script>
Even elke div een unieke naam geven en vervolgens steeds een countdown maken
Je kunt ook een eigen functie maken die je aanroept. Het ligt er aan hoe je de verschillende acties nu doet? Heeft elke actie een uniek ID waarschijnlijk uit de database?
Koppel dan het id hiervan aan div_id en maak een functie hierbij.
HTML:
Code (php)
1
<span class="pull-right"> Geldig t/m: <div id="'.$rows['id'].'"></div></span>
Dus de houder ID is uniek.
Dan heb ik een JS functie in mijn php functie staan die de actie gegevens uit de database tovert:
De functie klokje heb ik helemaal onderaan mijn pagina gezet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
function klokje(verloopdatum, houder)
{
$(houder).countdown(verloopdatum).on('update.countdown', function(event)
{
var $this = $(this).html(event.strftime(''
+ '<span>%-w</span> week%!w '
+ '<span>%-d</span> day%!d '
+ '<span>%H</span> hr '
+ '<span>%M</span> min '
+ '<span>%S</span> sec'));
});
}
</script>
function klokje(verloopdatum, houder)
{
$(houder).countdown(verloopdatum).on('update.countdown', function(event)
{
var $this = $(this).html(event.strftime(''
+ '<span>%-w</span> week%!w '
+ '<span>%-d</span> day%!d '
+ '<span>%H</span> hr '
+ '<span>%M</span> min '
+ '<span>%S</span> sec'));
});
}
</script>
Helaas gebeurt er niets.
Gewijzigd op 22/10/2014 15:15:26 door Furio Scripting
Heb je de library ook toegevoegd?
Peter K op 22/10/2014 15:21:49:
Test hem eerst eens zonder dat je hem in een loop gooit oid. Dus gewoon kaal letterlijk het voorbeeld.
Heb je de library ook toegevoegd?
Heb je de library ook toegevoegd?
Ja deze demo code: http://hilios.github.io/jQuery.countdown/examples/website-launch.html werkt als ik dit bovenaan de pagina zet.
Ik heb het volgende ontdekt.
De code werkt nu ook via de loop alleen mijn datum heeft vermoedelijk het verkeerde formaat, ik ga hier nu even mee stoeien
Gewijzigd op 22/10/2014 15:32:44 door Furio Scripting
yyyy/mm/dd
Toevoeging:
http://hilios.github.io/jQuery.countdown/examples/multiple-instances.html
Voor meerdere op 1 pagina
Gewijzigd op 22/10/2014 15:41:53 door Peter K
Peter K op 22/10/2014 15:41:11:
Je datum moet er zo in als ik het goed heb begrepen:
yyyy/mm/dd
Toevoeging:
http://hilios.github.io/jQuery.countdown/examples/multiple-instances.html
Voor meerdere op 1 pagina
yyyy/mm/dd
Toevoeging:
http://hilios.github.io/jQuery.countdown/examples/multiple-instances.html
Voor meerdere op 1 pagina
De datum werkt helaas alleen als ik hem zo formateer (Y/d/m):
Code (php)
1
2
3
4
5
2
3
4
5
<?php
$verloopdatum = $rows['verloop_datum'];
$datum = new DateTime($verloopdatum);
$verloopdatum = $datum->format('Y/d/m'); // 2014/22/10
?>
$verloopdatum = $rows['verloop_datum'];
$datum = new DateTime($verloopdatum);
$verloopdatum = $datum->format('Y/d/m'); // 2014/22/10
?>
Wat ik gek vind is dat een actie met verloop datum 2014-24-10 pas verloopt over 413 dagen...? Net als alle andere acties, er moet iets misgaan maar wat durf ik niet te zeggen
Peter K op 23/10/2014 07:43:53:
Weet je zeker dat hij het niet doet als je ('Y/m/d') doet?
Ja zo werkt die perfect:
Code (php)
1
2
3
4
2
3
4
<?php $verloopdatum = $rows['verloop_datum'];
$datum = new DateTime($verloopdatum);
$verloopdatum = $datum->modify('+1 day');
$verloopdatum = $datum->format('Y/m/d'); // 2014/10/22 ?>
$datum = new DateTime($verloopdatum);
$verloopdatum = $datum->modify('+1 day');
$verloopdatum = $datum->format('Y/m/d'); // 2014/10/22 ?>
Toevoeging op 23/10/2014 13:55:04:
Furio Scripting op 23/10/2014 13:54:17:
Nee sorry hij werkt zo inderdaad perfect:
Peter K op 23/10/2014 07:43:53:
Weet je zeker dat hij het niet doet als je ('Y/m/d') doet?
Nee sorry hij werkt zo inderdaad perfect:
Code (php)
1
2
3
4
2
3
4
<?php $verloopdatum = $rows['verloop_datum'];
$datum = new DateTime($verloopdatum);
$verloopdatum = $datum->modify('+1 day');
$verloopdatum = $datum->format('Y/m/d'); // 2014/10/22 ?>
$datum = new DateTime($verloopdatum);
$verloopdatum = $datum->modify('+1 day');
$verloopdatum = $datum->format('Y/m/d'); // 2014/10/22 ?>
Toevoeging op 23/10/2014 13:59:42:
Kan iemand mij ook vertellen hoe ik de actie kan hiden zodra de timer op 0 staat, ik heb deze code gevonden op de site:
Code (php)
1
2
3
4
5
2
3
4
5
.on('finish.countdown', function(event) {
$(this).html('This offer has expired!');
.parent().addClass('disabled')
});
$(this).html('This offer has expired!');
.parent().addClass('disabled')
});
Maar waar plaats ik die in mijn code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function klokje()
{
$('[data-countdown]').each(function()
{
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event)
{
$this.html(event.strftime('%D dagen %H:%M:%S'));
});
});
}
{
$('[data-countdown]').each(function()
{
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event)
{
$this.html(event.strftime('%D dagen %H:%M:%S'));
});
});
}