Pagina 1 van 1

Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 13 feb 2013, 16:52
door 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 :confused:
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!

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 13 feb 2013, 17:43
door krisken
Heb je countdown.js lokaal draaien (of op je eigen webserver) of via die link (http://scripts.hashemian.com/js/countdown.js)?

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 13 feb 2013, 18:38
door ubremoved_539
pcwolf schreef: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 :confused:
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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 13 feb 2013, 18:43
door 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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 09:55
door pcwolf
krisken schreef: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...
r2504 schreef:
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
meon schreef: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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 10:30
door 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"?

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 10:35
door 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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 10:42
door meon
Ik heb 'm nog steeds niet...

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

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 10:47
door pcwolf
Afbeelding

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

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 10:56
door 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)

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 11:04
door 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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 11:37
door 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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 12:01
door Maglor
pcwolf schreef: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."

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 12:30
door pcwolf
meon schreef: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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 12:31
door pcwolf
Maglor schreef:
pcwolf schreef: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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 13:14
door 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. :)

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 13:33
door pcwolf
Oke merci!
Dan zal ik het even moeten aanpassen.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 14:38
door 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 :-D
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>

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 15:18
door 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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 16:35
door pcwolf
Meon, hoe moet ik je bedanken ? :banana:

Het werkt zowel in firefox al in IE :-D

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!

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 19:05
door ubremoved_15739
Is je verwachting dat meon alles voor jou gaat schrijven? :P

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 19:24
door conehead
pcwolf schreef:
Maglor schreef:
pcwolf schreef: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 ...

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 14 feb 2013, 19:55
door meon
pcwolf schreef:Meon, hoe moet ik je bedanken ? :banana:
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

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 11:34
door pcwolf
eternum schreef:Is je verwachting dat meon alles voor jou gaat schrijven? :P
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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 11:37
door pcwolf
conehead schreef:
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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 13:17
door 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 :think:
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!

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 14:06
door ubremoved_539
pcwolf schreef:Dan moet ik het inderdaad wel 2 scripts plaatsen in me header.
Nee... slechts één script (want het krijgt de datum als parameter binnen).
pcwolf schreef: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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 14:14
door 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>

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 14:21
door ubremoved_539
Lees je m'n reply niet.... één script, meerdere spans ! (maar Meon z'n functie werkte niet volgens hem)

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 14:32
door 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).

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 14:46
door pcwolf
r2504 schreef: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>

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 14:54
door pcwolf
meon schreef: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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 15:19
door 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.

Re: Een simpele Countdown voor meer dan 1 keer per page

Geplaatst: 15 feb 2013, 15:22
door 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