login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Jquery divs (Opgelost)

Offline rredspike1 - 03/02/2014 16:50 (laatste wijziging 03/02/2014 17:02)
Avatar van rredspike1Lid Beste sitemasters,

Ik heb een while loop in php en deze laad gegevens vanuit de database o.a datum.

Nu heb ik een jquery countdown script alleen deze zou over alle divs binnen deze while loop moeten worden uitgevoerd alleen ik krijg dit niet goed voor elkaar.

Wat gaat er niet goed? Zou iemand mij kunnen helpen?



jQuery
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. (function (e) {
  2. 	e.fn.countdown = function (t, n) {
  3. 	function i() {
  4. 		eventDate = Date.parse(r.date) / 1e3;
  5. 		currentDate = Math.floor(e.now() / 1e3);
  6. 		if (eventDate <= currentDate) {
  7. 			n.call(this);
  8. 			clearInterval(interval)
  9. 		}
  10. 		seconds = eventDate - currentDate;
  11. 		days = Math.floor(seconds / 86400);
  12. 		seconds -= days * 60 * 60 * 24;
  13. 		hours = Math.floor(seconds / 3600);
  14. 		seconds -= hours * 60 * 60;
  15. 		minutes = Math.floor(seconds / 60);
  16. 		seconds -= minutes * 60;
  17. 		days == 1 ? thisEl.find(".timeRefDays").text("dag") : thisEl.find(".timeRefDays").text("dagen");
  18. 		hours == 1 ? thisEl.find(".timeRefHours").text("uur") : thisEl.find(".timeRefHours").text("uur");
  19. 		minutes == 1 ? thisEl.find(".timeRefMinutes").text("min.") : thisEl.find(".timeRefMinutes").text("min.");
  20. 		seconds == 1 ? thisEl.find(".timeRefSeconds").text("sec.") : thisEl.find(".timeRefSeconds").text("sec.");
  21. 		if (r["format"] == "on") {
  22. 			days = String(days).length >= 2 ? days : "0" + days;
  23. 			hours = String(hours).length >= 2 ? hours : "0" + hours;
  24. 			minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
  25. 			seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
  26. 		}
  27. 		if (!isNaN(eventDate)) {
  28. 			thisEl.find(".days").text(days);
  29. 			thisEl.find(".hours").text(hours);
  30. 			thisEl.find(".minutes").text(minutes);
  31. 			thisEl.find(".seconds").text(seconds)
  32. 		} else {
  33. 			alert("Invalid date. Example: 30 february 2014 15:50:00");
  34. 			clearInterval(interval)
  35. 		}
  36. 	}
  37. 	thisEl = e(this);
  38. 	var r = {
  39. 		date: null,
  40. 		format: null
  41. 	};
  42. 	t && e.extend(r, t);
  43. 	i();
  44. 	interval = setInterval(i, 1e3)
  45. 	}
  46. 	})(jQuery);
  47. 	$(document).ready(function () {
  48. 	function e() {
  49. 		var e = new Date;
  50. 		e.setDate(e.getDate() + 60);
  51. 		dd = e.getDate();
  52. 		mm = e.getMonth() + 1;
  53. 		y = e.getFullYear();
  54. 		futureFormattedDate = mm + "/" + dd + "/" + y;
  55. 		return futureFormattedDate
  56. 	}
  57.  
  58.         $(document).ready(function ()
  59.         {
  60.           $('#countdown').each(function()
  61.           {
  62.             $(this).countdown(function()
  63.             {
  64.               date: $('.test', this).html(),
  65.               format: "on"
  66.             });
  67.           });
  68.         });
  69. });


php code - Bekijk de code zonder highlighting - Klap code in 
  1. $sql = mysql_query("SELECT * FROM events ORDER BY id ASC LIMIT 4") or die (mysql_error());
  2.  
  3. while ($data = mysql_fetch_object($sql))
  4. {
  6. <td class="border shadow" valign="top">
  7. <div class="extra_info_small"> Event Name
  8. <div id="countdown">
  9. <div class="test" hidden>'.$data->datum.'</div>
  10. </div>
  11. </div>
  12. </td>';
  13. }

8 antwoorden

Gesponsorde links
Offline Thomas - 03/02/2014 17:22
Avatar van Thomas Moderator
Citaat:
alleen ik krijg dit niet goed voor elkaar


Wat gaat er mis? Welke foutmelding(en) krijg je? Heb je een (niet-)werkend voorbeeld? Welk (ongewenst) gedrag treedt op?

Je id-div zit in een while-loop, dat lijkt mij om te beginnen al niet optimaal .
Offline rredspike1 - 03/02/2014 17:28 (laatste wijziging 03/02/2014 17:35)
Avatar van rredspike1 Lid Ok FangorN, zou je dit eens uit willen leggen?
Citaat:
Je id-div zit in een while-loop, dat lijkt mij om te beginnen al niet optimaal


Citaat:
Wat gaat er mis? Welke foutmelding(en) krijg je? Heb je een (niet-)werkend voorbeeld? Welk (ongewenst) gedrag treedt op?


Ik heb geen (niet-)werkend voorbeeld, ook krijg ik geen foutmelding(en).
Het enige wat er mis gaat is, dat ik het countdown script slechts werkend krijg op 1 div i.p.v. 4 divs in de while loop.

Nu: Bijv.

Div 1
Countdown datum 1
2 uur, 22 minuten, 12 seconden.

Div 2
Countdown datum 2
00 uur, 00 minuten, 00 seconden.

Div 3
Countdown datum 3
00 uur, 00 minuten, 00 seconden.

Div 4
Countdown datum 4
00 uur, 00 minuten, 00 seconden.

Het zou als volgt moeten zijn, bijvoorbeeld
Div 1
Countdown datum 1
2 uur, 22 minuten, 12 seconden.

Div 2
Countdown datum 2
23 uur, 09 minuten, 58 seconden.

Div 3
Countdown datum 3
12 uur, 34 minuten, 57 seconden.

Div 4
Countdown datum 4
05 uur, 05 minuten, 05 seconden.
Offline Thomas - 03/02/2014 17:32 (laatste wijziging 03/02/2014 17:33)
Avatar van Thomas Moderator De waarde van een id-property moet uniek zijn binnen een document.

Als je het afdrukken hiervan in een loop stopt heb je een aanzienlijke kans (> 1 resultaten) dat deze div meerdere keren wordt afgedrukt...

Wellicht zijn je problemen al opgelost als je alleen de divs met de test-class afdrukt in de loop.

EDIT: spelling
Offline rredspike1 - 03/02/2014 20:32
Avatar van rredspike1 Lid nu krijg ik voor alle divs dezelfde datum, die die countdowned zegmaar
Offline Wijnand - 04/02/2014 12:54
Avatar van Wijnand Moderator Hoi Rredspike1,

Leuk om je weer is te 'spreken' :-). Weet je nog wie ik ben?

Verder, heb je weer even een stukje voorbeeld code wat je nu precies hebt?
Offline rredspike1 - 04/02/2014 19:06 (laatste wijziging 04/02/2014 19:08)
Avatar van rredspike1 Lid He Wijnand, jazeker weet ik dat nog en ik moet nog weleens aan onze contact tijd denken en onze gesprekken.

Leuk om jou ook weer eens te spreken.

Wat betreft de code is er eigenlijk niet veel veranderd, behalve dat ik gedaan heb wat FangorN zei.

Ik heb die $('#countdown').countdown veranderd in een class ipv een id.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('.countdown').countdown(
  2. {
  3. date: $('.test').html(),
  4. format: "on"
  5. });


Nu telt het script bij alle 4 de divs terug, alleen vanaf 1 datum uit de database en dit zouden eigenlijk 4 verschillende soorten datums moeten zijn.
Offline Thomas - 05/02/2014 12:13 (laatste wijziging 05/02/2014 14:51)
Avatar van Thomas Moderator EDIT: ik denk dat het voornaamste probleem is dat de countdown functie zich niet bewust is van het element waarop deze zou moeten werken, deze zit min of meer in de "globale scope" (denk ik).

Daarom werkt een .each() loop dus niet, deze overschrijft (lijkt het op?) alle datums naar de laatste datum in het rijtje van events, althans met code die ik heb zelf moeten (her)construeren omdat het oorspronkelijke voorbeeld incompleet was (waar zijn de sub-elementen met classes days, hours, minutes, seconds, timeRefDays, timeRefHours, timeRefMinutes, timeRefSeconds ???). Je hebt ons dus een puzzel gegeven, maar niet alle stukken...

Heb je de oorspronkelijke code ergens vandaan gevist, of zelf geschreven / en zelf aangepast?

Long story short: deze code leent zich, voor zover ik kan overzien en na lang proberen, NIET voor meerdere counters op eenzelfde pagina. Je moet dan aan een andere opzet gaan denken...

EDIT2: al gegoogled naar jquery countdown? inspiratie te over

EDIT3: werkende (herschreven) variant:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  7. </head>
  8.  
  10. <div class="countdown-container">
  11.     <div class="event"> Event Name #1
  12.         <div class="countdown-box">
  13.             <span class="days"></span> <span class="timeRefDays"></span>
  14.             <span class="hours"></span> <span class=timeRefHours></span>
  15.             <span class="minutes"></span> <span class="timeRefMinutes"></span>
  16.             <span class="seconds"></span> <span class="timeRefSeconds"></span>
  17.             <div class="event-date" hidden="hidden">2014-02-07 14:50:10</div>
  18.         </div>
  19.     </div>
  20.  
  21.     <div class="event"> Event Name #2
  22.         <div class="countdown-box">
  23.             <span class="days"></span> <span class="timeRefDays"></span>
  24.             <span class="hours"></span> <span class=timeRefHours></span>
  25.             <span class="minutes"></span> <span class="timeRefMinutes"></span>
  26.             <span class="seconds"></span> <span class="timeRefSeconds"></span>
  27.             <div class="event-date" hidden="hidden">2015-04-28 12:00:00</div>
  28.         </div>
  29.     </div>
  30. </div>
  31.  
  32. <script type="text/javascript">
  33. //<![CDATA[
  34. $().ready(function() {
  35.     // countdown definition
  36.     function countdown() {
  37.         this.$box           = false;
  38.         this.currentDate    = false;
  39.         this.eventDate      = false;
  40.         this.timer          = false;
  41.  
  42.         this.init = function(box) {
  43.             this.$box = box;
  44.  
  45.             // fetch event date
  46.             this.eventDate = this.parseDate(this.$box.find('.event-date').html());
  47.  
  48.             // initial call, so we don't have to wait a second for anything to show
  49.             this.updateCountdown();
  51.             // only call setInterval ONCE
  52.             var that = this;
  53.             this.timer = setInterval(function() {
  54.                 that.updateCountdown();
  55.             }, 1000);
  56.         }
  58.         this.updateCountdown = function() {
  59.             this.currentDate = Date.now(); // faster than new Date() apparently
  61.             // calculations
  62.             if (this.eventDate >= this.currentDate) {
  63.                 seconds = Math.round((this.eventDate - this.currentDate)/1000);
  64.                 days = Math.floor(seconds / 86400);
  65.                 seconds -= days * 60 * 60 * 24;
  66.                 hours = Math.floor(seconds / 3600);
  67.                 seconds -= hours * 60 * 60;
  68.                 minutes = Math.floor(seconds / 60);
  69.                 seconds -= minutes * 60;
  70.             } else {
  71.                 days = 0;
  72.                 hours = 0;
  73.                 minutes = 0;
  74.                 seconds = 0;
  75.                 if (this.timer) {
  76.                     clearInterval(this.timer); // countdown complete
  77.                 }
  78.             }
  79.  
  80.             // formatting
  81.             days = String(days).length >= 2 ? days : "0" + days;
  82.             hours = String(hours).length >= 2 ? hours : "0" + hours;
  83.             minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
  84.             seconds = String(seconds).length >= 2 ? seconds : "0" + seconds;
  85.  
  86.             // printing
  87.             this.$box.find(".days").text(days);
  88.             this.$box.find(".hours").text(hours);
  89.             this.$box.find(".minutes").text(minutes);
  90.             this.$box.find(".seconds").text(seconds);
  91.  
  92.             days == 1 ? this.$box.find(".timeRefDays").text("dag") : this.$box.find(".timeRefDays").text("dagen");
  93.             hours == 1 ? this.$box.find(".timeRefHours").text("uur") : this.$box.find(".timeRefHours").text("uur");
  94.             minutes == 1 ? this.$box.find(".timeRefMinutes").text("min.") : this.$box.find(".timeRefMinutes").text("min.");
  95.             seconds == 1 ? this.$box.find(".timeRefSeconds").text("sec.") : this.$box.find(".timeRefSeconds").text("sec.");
  96.         }
  97.  
  98.         // @see http://stackoverflow.com/questions/2587345/javascript-date-parse
  99.         // input is of the form yyyy-mm-dd hh:ii:ss
  100.         this.parseDate = function(input) {
  101.             var dateParts = input.split(' ');
  102.             var date = dateParts[0].split('-');
  103.             var time = dateParts[1].split(':');
  104.             return new Date(date[0], date[1]-1, date[2], time[0], time[1], time[2]); // months are zero-based
  105.         }
  106.     }
  107.  
  108.     // start all countdowns
  109.     $('.countdown-container .event').each(function() {
  110.         var cd = new countdown();
  111.         cd.init($(this));
  112.     });
  113. });
  114. //]]>
  116. </body>
  117. </html>
Bedankt door: rredspike1
Offline rredspike1 - 05/02/2014 16:36
Avatar van rredspike1 Lid Heel erg bedankt voor je tijd om dit te scripten FangorN!! Werkt perfect!

Ik had dit script inderdaad van het internet alleen kon het niet goed aanpassen ook al heb ik veel gezocht alleen kwam niet op de oplossing, omdat ik jQuery nog niet goed genoeg ken.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.201s