Een simpele Countdown voor meer dan 1 keer per page

[ubremoved_15739]

Is je verwachting dat meon alles voor jou gaat schrijven?

[conehead]

Oke, ik heb even een artisteer template ge upload naar me site http://goedgekozen.be/ met die countdown.

Even off-topic, maar het moet zijn: "De beste deals vindt u hier."

Ik wist het ook niet zeker, daarom heb ik het aan mensen gevraagd en zeiden dus zonder de t.

heel eenvoudig te achterhalen door te vervoegen met lopen ...

Je zegt toch ook loopt u ... dus er komt een t bij ... dus bij vinden komt er dan ook een t bij ... dus vandaar vindt ...

[meon]

Meon, hoe moet ik je bedanken ?

Bedanken doen we met de duimpjes hier

Ik ben nog een beetje verder aan het gaan zodat het gebruik super-easy wordt... maar het werkt niet
Iemand die wat van jQuery/JavaScript kent die ziet wat ik fout doe?

Code: Selecteer alles

jQuery().ready(function() {
	jQuery(".cntdwn").countdown({
		date: jQuery(this).attr('countdown'),
		htmlTemplate: "Nog %{d} dagen, %{h} uur, %{m}:{s}",
		onComplete: 
			function(event) {
				alert(jQuery(this).attr('countdown'));
				jQuery(this).html("<span style='color: red'>Deal verlopen!</span>");
			}
	});
});

Die alert zit er in om te bewijzen da'k wel degelijk de datum mee krijg...

Deze oplossing (mocht 'm werken) is supereasy, want in je html zou je enkel dit moeten zetten:

Code: Selecteer alles

<span class="cntdwn" countdown="Feb 14, 2013 19:00:00"></span>

Waarbij dat je de datum dus invult.
Voorbeeld: http://play.meon.be/countdown/goedgekozen2.html

[pcwolf]

Is je verwachting dat meon alles voor jou gaat schrijven?

Das dan een compliment voor Meon zelf, betekent dat hij het goed kan.
Ik heb zelf wat geprobeerd maar van jquery weet ik gewoon niks. Dus verder wat op google gezocht maar als ik die erbij plak dan werkt die countdown niet.

[pcwolf]

Je zegt toch ook loopt u ... dus er komt een t bij ... dus bij vinden komt er dan ook een t bij ... dus vandaar vindt ...

Ik zal het wel moet gaan aanpassen.
Bij loopt staat er geen D vanachter dus was moeilijk om het even achter te halen.

[pcwolf]

Het werkt!
Als ik bijvoorbeeld verschillende tijden wil gebruiken moet ik er gewoon een _02 van maken:

Code: Selecteer alles

  jQuery().ready(function() {
    jQuery(".cntdwn_02").countdown({
      //date: jQuery(this).attr('countdown'),
      date: "Feb 15, 2013 13:05:52",
      htmlTemplate: "Nog %{d} dagen, %{h}u, %{m}m, %{s}s",
      onComplete:
        function(event) {
        //  alert(jQuery(this).attr('countdown'));
          jQuery(this).html("<span style='color: red'>Deal verlopen!</span>");
        }
    });
  });

Dus dan heb je bijvoorbeeld er een van 2014, en dan andere countdown (_02) tot 2015
Dan moet ik het inderdaad wel 2 scripts plaatsen in me header.
Ik heb deze code in me html geplaatst:

Code: Selecteer alles

<span class="cntdwn" countdown="Feb 14, 2013 19:00:00"></span>

(meer dan 1 script word dan gewoon cntdwn_02 zeker ?))
Het werkt wel maar als ik bijvoorbeeld tijden moet veranderen dan is ineens die code weg in joomla
Maar je ziet het wel als je op de homepagina gaat...
Als ik tijden moet veranderen moet ik altijd de tijd even intypen bij artisteer waar ik de template maak, en dan helemaal opnieuw uploaden.

Maar verder werkt alles top!

[ubremoved_539]

Dan moet ik het inderdaad wel 2 scripts plaatsen in me header.

Nee... slechts één script (want het krijgt de datum als parameter binnen).

Ik heb deze code in me html geplaatst:

Code: Selecteer alles

<span class="cntdwn" countdown="Feb 14, 2013 19:00:00"></span>

(meer dan 1 script word dan gewoon cntdwn_02 zeker ?))

Nogmaals nee... het script neemt de datum van het countdown element in de span.

[pcwolf]

Dan word het gewoon dit:

Code: Selecteer alles

  jQuery().ready(function() {
    jQuery(".cntdwn_01").countdown({
      //date: jQuery(this).attr('countdown'),
      date: "Feb 15, 2013 13:05:52",
      htmlTemplate: "Nog %{d} dagen, %{h}u, %{m}m, %{s}s",
      onComplete:
        function(event) {
        //  alert(jQuery(this).attr('countdown'));
          jQuery(this).html("<span style='color: red'>Deal verlopen!</span>");

        });
    jQuery(".cntdwn_02").countdown({
      //date: jQuery(this).attr('countdown'),
      date: "Feb 15, 2013 13:05:52",
      htmlTemplate: "Nog %{d} dagen, %{h}u, %{m}m, %{s}s",
      onComplete:
        function(event) {
        //  alert(jQuery(this).attr('countdown'));
          jQuery(this).html("<span style='color: red'>Deal verlopen!</span>");

        });
    jQuery(".cntdwn_03").countdown({
      //date: jQuery(this).attr('countdown'),
      date: "Feb 15, 2013 13:05:52",
      htmlTemplate: "Nog %{d} dagen, %{h}u, %{m}m, %{s}s",
      onComplete:
        function(event) {
        //  alert(jQuery(this).attr('countdown'));
          jQuery(this).html("<span style='color: red'>Deal verlopen!</span>");

    });
  });

Code: Selecteer alles

<span class="cntdwn_01.." countdown="Feb 14, 2013 19:00:00"></span>

[ubremoved_539]

Lees je m'n reply niet.... één script, meerdere spans ! (maar Meon z'n functie werkte niet volgens hem)

[meon]

Mijn oplossing zou voor pcwolf volgens mij super zijn, aangezien hij dan, behalve de initiele opzet, niet meer aan de javascript hoeft te komen (en in principe vanuit de Joomla HTML-editor kan werken).

Alleen accepteert hij m'n "date"-parameter niet... Volgens mij is alles van het string-type en toch werkt het niet (alles verloopt meteen).

[pcwolf]

Lees je m'n reply niet.... één script, meerdere spans ! (maar Meon z'n functie werkte niet volgens hem)

Mijn fout!
De

Code: Selecteer alles

<span class="cntdwn" countdown="Feb 15, 2013 12:20:00"></span>

werkt niet
Dus tijden veranderen vanaf de span werkt niet, wel vanaf de de head.

Daarom vroeg ik ook of dit wel kan:

Code: Selecteer alles

 jQuery().ready(function() {
    jQuery(".cntdwn_01").countdown({
      //date: jQuery(this).attr('countdown'),
      date: "Feb 15, 2013 13:05:52",
      htmlTemplate: "Nog %{d} dagen, %{h}u, %{m}m, %{s}s",
      onComplete:
        function(event) {
        //  alert(jQuery(this).attr('countdown'));
          jQuery(this).html("<span style='color: red'>Deal verlopen!</span>");

        });
    jQuery(".cntdwn_02").countdown({
      //date: jQuery(this).attr('countdown'),
      date: "Feb 15, 2013 13:05:52",
      htmlTemplate: "Nog %{d} dagen, %{h}u, %{m}m, %{s}s",
      onComplete:
        function(event) {
        //  alert(jQuery(this).attr('countdown'));
          jQuery(this).html("<span style='color: red'>Deal verlopen!</span>");

        });
    jQuery(".cntdwn_03").countdown({
      //date: jQuery(this).attr('countdown'),
      date: "Feb 15, 2013 13:05:52",
      htmlTemplate: "Nog %{d} dagen, %{h}u, %{m}m, %{s}s",
      onComplete:
        function(event) {
        //  alert(jQuery(this).attr('countdown'));
          jQuery(this).html("<span style='color: red'>Deal verlopen!</span>");

    });
  });

Code: Selecteer alles

<span class="cntdwn_01.." countdown="Feb 14, 2013 19:00:00"></span>

[pcwolf]

Mijn oplossing zou voor pcwolf volgens mij super zijn, aangezien hij dan, behalve de initiele opzet, niet meer aan de javascript hoeft te komen (en in principe vanuit de Joomla HTML-editor kan werken).

Ik werkt juist niet vanuit de joomla html editor omdat meerdere dingen van de html weg vallen maar je ziet het wel op de pagina.

[meon]

Mja, uiteraard kan dat, maar dat veeeeeel te onderhoudsonvriendelijk, moet ge hele tijd uw template aanpassen. Dat houdt ge geen 3 dagen vol als dit live gaat.

[pcwolf]

Ik heb wel paar "Editors" op joomla gevonden maar geen een kan de hele code showen.
Of anders moet ik er een zoeken die ge live kunt bewerken.
Ik krijg alleen </div> bij die span code, maar bij artisteer lijk alles in orde te zijn