Een simpele Countdown voor meer dan 1 keer per page

[pcwolf]

He!

Dus, ik ben hier nieuw en ik kan er gewoon niet eraan uit geraken. Ik ben al zeker meer dan 3 dagen op zoek naar maar ik vind er gewoon niks.
De andere mensen geven via skype een prijsje voor dat script, en je weet niet of het werkt want je kent het vast wel. Eerst betalen & gekochte goederen worden niet terug betaalt
Dus ik heb een GRATIS script gevonden op google, ja mensen gewoon gratis :d

http://www.hashemian.com/tools/javascript-countdown.htm
(Op de website vind je de html, en de javascript)

Tot nu toe werkt alles prima! :thumb:
Maar zodra je de script over meerdere artikelen in je website plaats, dus op de homepage zon meer dan 1 countdown gaat gewoon niet.
Op de boven genaamde website staat er dit:

Code: Selecteer alles

Mun Rashid has modified the JavaScript code by using object wrapping to allow for multiple countdowns on one page.
Download Mun's JavaScript code here. Download the sample HTML here.

Maar ik heb al meerdere keren dit geprobeerd, het lukt gewoon niet. Ik heb zelfs dit geprobeerd:
Countdown1.js
Countdown2.js
Countdown3.js
En zo verder....

Hier is de script die je moet plaatsen waar je het wilt:

Code: Selecteer alles

<script language="JavaScript" type="text/javascript">
                        TargetDate = "12/31/2020 5:00";
                        BackColor = "white";
                        ForeColor = "dimgray";
                        CountActive = true;
                        CountStepper = -1;
                        LeadingZero = false;
                        DisplayFormat = "Nog %%H%% uur %%M%% minuten en, %%S%% seconden";
                        FinishMessage = "It is finally here!";
                </script><script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js" type="text/javascript">
                </script>

(de datum 2020 is gewoon even een datum zoals op die website)

Dus waar je de scr ziet, heb ik gewoon op mijn website ook geprobeerd maar verschillende malen: countdown1.js, countdown2.js....

Hier is de code die je moet plaatsen in de countdown.js (niet de Mun Rashid script)

Code: Selecteer alles

function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
 document.write("<span id='cntdwn' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);

Bij de de datum heb ik gewoon ook geprobeerd er dit van te maken: undefinded

Code: Selecteer alles

if (typeof(TargetDate)=="undefined")
  TargetDate = "Hier dus 'undefinded' ";

Hopelijk kunnen jullie mij helpen, zou het erg leuk vinden :thumb:

Alvast bedankt!

[krisken]

Heb je countdown.js lokaal draaien (of op je eigen webserver) of via die link (http://scripts.hashemian.com/js/countdown.js)?

[ubremoved_539]

Ik ben al zeker meer dan 3 dagen op zoek naar maar ik vind er gewoon niks.
De andere mensen geven via skype een prijsje voor dat script, en je weet niet of het werkt want je kent het vast wel. Eerst betalen & gekochte goederen worden niet terug betaalt

Geen idee hoe je zoekt... want ik heb duizenden voorbeelden binnen 5 seconden... en dit is er eentje van.

Als mensen hier al geld voor willen vragen is het droevig !

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script>
    
    window.onload = function() {
        countdown('countdown', 1, 5);
	countdown('countdown2', 10, 5);
    }

    function countdown(element, minutes, seconds) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "countdown's over!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
    </script>
</head>
<body>
<div id='countdown'></div>
<div id='countdown2'></div>
</body>
</html>

Voila... kan je er zoveel plaatsen als je wil.

[meon]

Heb snel iets gemaakt: http://play.meon.be/countdown/

Code: Selecteer alles

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.jcountdown1.3.min.js"></script>
<script language="javascript">
	$().ready(function() {
		$("#cd_1").countdown({
			date:"Jan 01, 2014 00:00:00"
		});
		$("#cd_2").countdown({
			date:"Feb 014, 2013 20:30:00"
		});			
		$("#cd_3").countdown({
			date:"Feb 13, 2013 19:00:00",
			htmlTemplate: "Nog %{h} uur, %{m} min en %{s} seconden"
		});			
	});
</script>
</head>
<body>
<h1>Countdown demo</h1>
<table border="1">
	<tr>
		<td>Aftellen naar nieuwjaar 2014</td>
		<td><span id="cd_1"></span></td>
	</tr>
	<tr>	
		<td>Aftellen naar "Tegen de sterren op"</td>
		<td><span id="cd_2"></span></td>
	</tr>		
	<tr>	
		<td>Aftellen tot het nieuws</td>
		<td><span id="cd_3"></span></td>
	</tr>
</table>
</body>

Deze file bijkomend nodig zoals je hier gereferenced ziet: http://play.meon.be/countdown/jquery.jc ... 1.3.min.js
jQuery wordt via de Google CDN geladen.

[pcwolf]

Heb je countdown.js lokaal draaien (of op je eigen webserver) of via die link (http://scripts.hashemian.com/js/countdown.js)?

Ja dat heb ik geprobeerd. Het werkt maar niet meer dan 1 keer...

Geen idee hoe je zoekt... want ik heb duizenden voorbeelden binnen 5 seconden... en dit is er eentje van.

Als mensen hier al geld voor willen vragen is het droevig !

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script>
    
    window.onload = function() {
        countdown('countdown', 1, 5);
	countdown('countdown2', 10, 5);
    }

    function countdown(element, minutes, seconds) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "countdown's over!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
    </script>
</head>
<body>
<div id='countdown'></div>
<div id='countdown2'></div>
</body>
</html>

Voila... kan je er zoveel plaatsen als je wil.

Als je bijvoorbeeld 5 minuten op een pagina blijft en je herlaad het dan weer dan word de countdown opnieuw herstart, met de zelfde tijd die je hebt ingevuld ? De countdown moet blijven doorgaan ook al herlaad je de pagina.
Maar verder werkt het wel echt goed! Je kan het inderdaad op meerdere artikelen op je website plaatsen.

Ik heb heel bijna heel google doorzocht, tot pagina 3 & 4.
Die youtube filmpjes ook alleen kan ik het juiste niet vinden

Heb snel iets gemaakt: http://play.meon.be/countdown/

Code: Selecteer alles

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.jcountdown1.3.min.js"></script>
<script language="javascript">
	$().ready(function() {
		$("#cd_1").countdown({
			date:"Jan 01, 2014 00:00:00"
		});
		$("#cd_2").countdown({
			date:"Feb 014, 2013 20:30:00"
		});			
		$("#cd_3").countdown({
			date:"Feb 13, 2013 19:00:00",
			htmlTemplate: "Nog %{h} uur, %{m} min en %{s} seconden"
		});			
	});
</script>
</head>
<body>
<h1>Countdown demo</h1>
<table border="1">
	<tr>
		<td>Aftellen naar nieuwjaar 2014</td>
		<td><span id="cd_1"></span></td>
	</tr>
	<tr>	
		<td>Aftellen naar "Tegen de sterren op"</td>
		<td><span id="cd_2"></span></td>
	</tr>		
	<tr>	
		<td>Aftellen tot het nieuws</td>
		<td><span id="cd_3"></span></td>
	</tr>
</table>
</body>

Deze file bijkomend nodig zoals je hier gereferenced ziet: http://play.meon.be/countdown/jquery.jc ... 1.3.min.js
jQuery wordt via de Google CDN geladen.

Deze countdown werkt ook maar 1 keer. Maar verder werkt alles wel.

[meon]

Huh? Nee? Ik tel af naar het ingestelde moment in de toekomst en overleeft dus refreshes. Wat bedoel je anders met "maar 1 keer"?

[pcwolf]

Dat je maar 1 keer de timer kan gebruikt worden in plaats van meer dan 1 keer.
Het werkt wel als je de code op verschillende pagina's zet, maar zodra je de code op 1 pagina zet in de verschillende artikelen op de homepage dan werkt dit niet.

[meon]

Ik heb 'm nog steeds niet...

Ik heb 'm toch 3x op 1 pagina staan?

[pcwolf]

Ik heb het meer dan 1 keer geprobeerd maar word slechts 1 keer getoond.

[meon]

Ik heb geen flauw idee wat je aan het proberen bent.

Doe je moeite om die paar regels HTML en JavaScript te lezen en te interpreteren?

Ik heb in m'n tabel 3 verschillende <span>'s staan met elk een eigen ID.
Bovenaan in de de jQuery init-code roep ik die ID's op en geef ik op tot waar die moet aftellen.
Aangezien elke ID uniek hoort te zijn op een pagina komt die maar een keer voor.
Wil je dezelfde aftel-code op meerdere plekken gebruiken op de pagina moet je een class gebruiken ipv een ID, maar ik ken de context niet waarin je dit wilt gebruiken. (En eerlijk gezegd ben ik niet zeker dat je voldoende kennis hebt om dit voor mekaar te krijgen)

[pcwolf]

Oke, ik heb even een artisteer template ge upload naar me site, met die countdown. Je ziet daar 3 cellen staan in 1 rij.

Dus waar allemaal For Her For Her For Her staan, die hebben allemaal een aparte html, javascript dingens...
Bij de 2de cel, waar die countdown zit daar is me countdown script maar die werkt dus 1 keer op 1 pagina. Als je bijvoorbeeld die code past in de contacts pagina dan werkt die wel maar niet meer dan 1 keer.
Dus bij al die cellen moet een countdown zitten.

[meon]

A) Da's niet mijn code die je gebruikt
B) Ik zie maar 1 <span id="cntdwn"> en 1x een countdown gedefinieerd in javascript.

Opnieuw: een ID mag maar 1x voorkomen op een pagina. "cntdwn" gebruiken als ID is dus niet goed, die moeten allemaal uniek zijn (cntdwn_01, cntdwn_02 etc).

Er is voor al die "deals" dus maar 1 waar iets gedefinieerd is.

[Maglor]

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."

[pcwolf]

A) Da's niet mijn code die je gebruikt
B) Ik zie maar 1 <span id="cntdwn"> en 1x een countdown gedefinieerd in javascript.

Opnieuw: een ID mag maar 1x voorkomen op een pagina. "cntdwn" gebruiken als ID is dus niet goed, die moeten allemaal uniek zijn (cntdwn_01, cntdwn_02 etc).

Er is voor al die "deals" dus maar 1 waar iets gedefinieerd is.

Dit is wat ik al heb geprobeerd:

Code: Selecteer alles

<span id="cntdwn_1"><script language="JavaScript" type="text/javascript">
                                        TargetDate = "12/31/2020 5:00";
                                        BackColor = "white";
                                        ForeColor = "dimgray";
                                        CountActive = true;
                                        CountStepper = -1;
                                        LeadingZero = false;
                                        DisplayFormat = "Nog %%H%% uur %%M%% minuten en, %%S%% seconden";
                                        FinishMessage = "It is finally here!";
        </script><script language="JavaScript" src="http://goedgekozen.be/js/countdown1.js" type="text/javascript">
        </script></span>

En jou script:

Code: Selecteer alles

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.jcountdown1.3.min.js"></script>
<span id="cntdwn_1"><script language="javascript">
   $().ready(function() {
      $("#cd_1").countdown({
         date:"Jan 01, 2014 00:00:00"
      });
      $("#cd_2").countdown({
         date:"Feb 014, 2013 20:30:00"
      });         
      $("#cd_3").countdown({
         date:"Feb 13, 2013 19:00:00",
         htmlTemplate: "Nog %{h} uur, %{m} min en %{s} seconden"
      });         
   });
</script>
</span>
</head>
<body>
<h1>Countdown demo</h1>
<table border="1">
   <tr>
      <td>Aftellen naar nieuwjaar 2014</td>
      <td><span id="cd_1"></span></td>
   </tr>
   <tr>   
      <td>Aftellen naar "Tegen de sterren op"</td>
      <td><span id="cd_2"></span></td>
   </tr>      
   <tr>   
      <td>Aftellen tot het nieuws</td>
      <td><span id="cd_3"></span></td>
   </tr>
</table>
</body>

Ik probeer dus niet direct op me site te doen maar gewoon even in artisteer en zo even een blik op de browser te krijgen.
Maar het word nog altijd niet meer dan 1 keer getoond.

[pcwolf]

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.

[Maglor]

Toch wel, kijk hier maar: http://www.onzetaal.nl/taaladvies/advies/vindt-u

De 't' verdwijnt wanneer het een gebiedende wijs wordt: "Meld u hier aan!"

Maar goed, zoals gezegd, serieus off topic.

[pcwolf]

Oke merci!
Dan zal ik het even moeten aanpassen.

[pcwolf]

Ik was even aan het zoeken en ik denk dat je deze bedoelt:

Code: Selecteer alles

function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn1").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn1").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
 document.write("<span id='cntdwn1' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "undefined";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = true;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);

Nu werkt het wel
Alleen nu blijf deze stil liggen terwijl de andere werkt.
Heb probeer bij die script te wijzigen maar niks lijkt te werken:

Code: Selecteer alles

<script language="JavaScript" type="text/javascript">
                                        TargetDate = "12/31/2020 5:00";
                                        BackColor = "white";
                                        ForeColor = "dimgray";
                                        CountActive = treu;
                                        CountStepper = -1;
                                        LeadingZero = false;
                                        DisplayFormat = "Nog %%H%% uur %%M%% minuten en, %%S%% seconden";
                                        FinishMessage = "It is finally here!";
</script><script language="JavaScript" src="http://goedgekozen.be/js/countdown2.js" type="text/javascript">
</script>

[meon]

Zucht. Aub: http://play.meon.be/countdown/goedgekozen.html

Omdat je Joomla 2.5 gebruikt met Mootools moet je jQuery in noconflict draaien voor mijn code.
De manier waarop jij het doet is gewoon fout: je verwijst meerdere keren naar dat countdown-script en doet nog allemaal rare dingen.
De magie gebeurt in de <head>-sectie van je pagina, niet IN de pagina zelf.
Dit is mijn code voor deze pagina:

Code: Selecteer alles

<script src="http://play.meon.be/countdown/jquery.jcountdown1.3.min.js"></script>	
	<script language="javascript">
	jQuery().ready(function() {
		jQuery("#cd_01").countdown({
			date:"Jan 01, 2014 00:00:00"
		});
		jQuery("#cd_02").countdown({
			date:"Feb 014, 2013 20:30:00"
		});			
		jQuery("#cd_03").countdown({
			date:"Feb 14, 2013 19:00:00",
			htmlTemplate: "Nog %{h} uur, %{m} min en %{s} seconden"
		});			
	});
</script>

Behalve de html-placeholder-<span tags heb ik niets anders dan dit toegevoegd. Heb wel jouw javascripts weggehaald.

[pcwolf]

Meon, hoe moet ik je bedanken ?

Het werkt zowel in firefox al in IE

Ik heb je misschien een stress volle dag bezorgt sorry daarvoor
Mijn hele template ging even naar de klote toen ik dit:

Code: Selecteer alles

<span id="cd_01"></span>

Onder een artikel heb geplaatst dus moest even alles opnieuw uploaden
Kan je bijvoorbeeld geen preview doen als je iets aan je artikel hebt aangepast ?
Kan ik de js bestand naar server uploaden of is het beter als het bij jou blijft ?
Verder zou ik nog een graag ding willen. Als de countdown is afgelopen kan er iets opstaan bijvoorbeeld, Deal is afgelopen en misschien in rood ?
Ik neem aan dat je in js moet gaan knutselen die in de Head staat ?

Nogmaals Bedankt!

[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