Meerdere countdowntimers op 1 pagina gebruiken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Furio Scripting

Furio Scripting

21/10/2014 16:27:43
Quote Anchor link
Beste forumleden,

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.
 
PHP hulp

PHP hulp

29/03/2024 12:26:55
 
Henk de Vriep

Henk de Vriep

21/10/2014 16:40:13
Quote Anchor link
De date invullen in je database kun je doen met een INSERT of een UPDATE query in combinatie met een input veld. Daarnaast kun je kijken naar de volgende jQuery library: http://hilios.github.io/jQuery.countdown/

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.
 
Peter K

Peter K

22/10/2014 07:12:12
Quote Anchor link
Hoe sla je de verloop datum nu op? Als je deze in UNIX time stamp weg (hebt ge)zet kun je hier eenvoudig een countdown voor maken.

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?
 
Furio Scripting

Furio Scripting

22/10/2014 14:33:24
Quote Anchor link
Bedankt voor de reacties.

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
 
Peter K

Peter K

22/10/2014 15:02:23
Quote Anchor link
Wat hierboven staat lijkt me dan exact goed:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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.
 
Furio Scripting

Furio Scripting

22/10/2014 15:13:49
Quote Anchor link
Ik heb nu het volgende:

HTML:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php  echo "<script>
                            klokje($verloopdatum, #$id);
                           </script>"
; ?>


De functie klokje heb ik helemaal onderaan mijn pagina gezet.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Helaas gebeurt er niets.
Gewijzigd op 22/10/2014 15:15:26 door Furio Scripting
 
Peter K

Peter K

22/10/2014 15:21:49
Quote Anchor link
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?
 
Furio Scripting

Furio Scripting

22/10/2014 15:27:59
Quote Anchor link
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?


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
 
Peter K

Peter K

22/10/2014 15:41:11
Quote Anchor link
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
Gewijzigd op 22/10/2014 15:41:53 door Peter K
 
Furio Scripting

Furio Scripting

22/10/2014 15:57:51
Quote Anchor link
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


De datum werkt helaas alleen als ik hem zo formateer (Y/d/m):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
$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

Peter K

23/10/2014 07:43:53
Quote Anchor link
Weet je zeker dat hij het niet doet als je ('Y/m/d') doet?
 
Furio Scripting

Furio Scripting

23/10/2014 13:54:17
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
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 ?>


Toevoeging op 23/10/2014 13:55:04:

Furio Scripting op 23/10/2014 13:54:17:
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)
PHP script in nieuw venster Selecteer het PHP script
1
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 ?>




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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
.on('finish.countdown', function(event) {
   $(this).html('This offer has expired!');
     .parent().addClass('disabled')
 
});


Maar waar plaats ik die in mijn code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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'));
                
            });
            
            
            
         });
 
        
        
         }
 
Peter K

Peter K

23/10/2014 14:21:55
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.