It is currently Sat 1 Oct 2016 - 06:53 - créer un forum

[TUTO]Compte à rebours pour vos forums

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3, 4, 5, 6, 7  >

[TUTO]Compte à rebours pour vos forums
Author Message
UVR


Offline
Guest




PostPosted: Sat 30 Dec 2006 - 13:40    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

PublicitéSupprimer les publicités ?
  • Titre: Compte à rebours pour vos forums

  • Auteur: UVR
  • Contact Auteur: Messagerie Privée de UVR
  • Source: http://www.dynamicdrive.com/dynamicindex6/dhtmlcount.htm

  • Description: Ce tuto vous permet de mettre un compte à rebours pour vos forums.

  • Niveau d'installation: Moyen
  • Temps d'installation: 5 minutes
  • Nombre de template a modifié : 1 seul, cela dépend où vous désirez mettre le compte à rebours.
  • Marche pour quel navigateur ?
    FireFox 1 ou +
    Internet Explorer 5 ou +
    Opera 7 ou +


  • Fonctionne sur les themes : Tous
  • Défaut : Le compte à rebours est en anglais.
  • Exemple :


    Installation :

    Sauvergardez vos templates, image avant toute modification

Ouvrez overall_footer.tpl

Ajoutez tout au fond le code suivant
Quote:
<html>
<body>
Le code en spoiler (les 2)
</body>
</html>


Ajoutez entre les 2 codes


Quote:

<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:yellow;
font: bold 18px MS Sans Serif;
padding: 3px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+"seconds left until March 23, 2009 18:25:00"
}
else{ //else if target date/time met
var displaystring="Future date is here!"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until this Christmas"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Christmas is here!") //Instead, perform a custom alert
}
return displaystring
}

</script>



Le texte en rouge est pour inscrire la date avant que le compte à rebours atteignent 0. Vous pouvez mettre le texte de votre choix.

Le texte en vert est pour changer la phrase du compte à rebours.


Ajoutez par après ce code.
Quote:









<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)

</script>


Le texte en rouge peut être modifié, il suffit de mettre le mois en anglais (voir spoiler en-dessous), le jour du mois, l'année et l'heure en HH:MM:SS (H: Heure, M: Minute, S: Seconde).

Code: Sélectionner - Agrandir
>> January
>> February
>> March
>> April
>> May
>> June
>> July
>> September
>> October
>> November
>> December
    Sauvergarder et fermer
Variantes:

>> Possibilité d'ajouter un compteur à coté du premier, voici le code.

Quote:

<html><body>Les 2 scripts</body></html>


>> Possibilité de changer le type de compteur (comptage par heures ou par minutes), voici le code.

Quote:
futuredate.displaycountdown("days", formatresults)

Le texte en rouge vous permet de définir le type de compteur, soit par jours, soit par heures. Remplacez days par hours, minutes ou seconds pour mettre que le temps concernée.

>> Possibilité de changer l'écriture et la taille du compteur (par exemple en Time New Romans ou Comic sans MS en taille 12 ou 14).

Quote:
.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:yellow;
font: bold 18px MS Sans Serif;
padding: 3px;

bold signifie un texte en gras, vous pouvez changer pour mettre un autre type.
18px signifie la taille du texte, vous pouvez metre plus petit ou plus grand.
MS Sans Serif signifie le type d'écriture du texte, vous pouvez le changer pour un autre.


>> Possibilité de changer la phrase affiché dès la fin du compte à rebours.

Quote:
}
else{ //else if target date/time met
var displaystring="Future date is here!"
}
return displaystring
}

Le texte en rouge est la phrase à modifier dès que le compte à rebours a fini le décompte.

Fin du tutorial.

Etant donné que je connais presque rien en HTML, allez voir sur le lien fournit en haut pour de plus ample information.


Last edited by UVR on Mon 1 Jan 2007 - 14:17; edited 10 times in total
Author Message
Thargalt


Offline
Guest




PostPosted: Sat 30 Dec 2006 - 13:50    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

ça peut être pas mal !
Bravo, pour les jours, je pense quil faut juste changer "days" par jour "years" par année etc... Wink


Author Message
UVR


Offline
Guest




PostPosted: Sat 30 Dec 2006 - 13:53    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

J'ai changé quelque données, j'édite le message avec la couleur vert pour vous montrer comment modifier le texte en lui même Wink

Author Message
Gu!gan
VIP


Offline
VIP

Joined: 17 Jun 2004
Posts: 1,081
Niveau:
Point(s): 1,333
Moyenne: 1.23
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Taureau (20avr-20mai) 龍 Dragon

PostPosted: Sat 30 Dec 2006 - 13:58    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

Impec'
_______________________
(\__/)
(='.'=)
(")_(")
Voici Lapin. Copiez Lapin dans votre signature pour l'aider à concrétiser sa domination du monde


Forum
Author Message
UVR


Offline
Guest




PostPosted: Sun 31 Dec 2006 - 13:48    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

Bonjour,

je viens de trouver une variante, permettant de mettre plusieurs compteurs à la fois(Voir post plus haut).

J'ajouterai d'autre variantes si possible, vous pouvez poster ci-après en cas de problème.


Author Message
The Blade


Offline
Guest




PostPosted: Wed 22 Aug 2007 - 00:01    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

bonjour
moi j'aimerais plus personnaliser mon compte a rebours avec une image de fond par exemple : est-ce possible ?


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Wed 22 Aug 2007 - 17:18    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

bonjour

dans le code



Code: Sélectionner - Agrandir

<html> 
<body> 
Le code en spoiler (les 2)
</body> 
</html> 

remplaces par



Code: Sélectionner - Agrandir

<html> 
<body>
<table width="100%" cellpadding="0" cellspacing="1" border="0" class="forumline"> 
  <tr> 
<td colspan="2" background="lien de votre image" width="" height="" > 
 
Le code en spoiler (les 2)
 
</td> 
</tr> 
</table> 
 </body> 
</html> 


_______________________


Forum
Author Message
The Blade


Offline
Guest




PostPosted: Wed 22 Aug 2007 - 21:26    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

comment afficher l'image en entier ?

Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Wed 22 Aug 2007 - 21:34    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

il faut mettre les valeurs ici

width="" height=""

pour que l'image prenne les dimensions voulue
_______________________


Forum
Author Message
The Blade


Offline
Guest




PostPosted: Wed 22 Aug 2007 - 22:27    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

merci

autre quetion : comment changer la police , mettre en gras et changer la couleur du texte svp merci !!


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Thu 23 Aug 2007 - 16:38    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

pour le gras


 
Code: Sélectionner - Agrandir
<b>ton texte</b> 


pour la couleur


 
Code: Sélectionner - Agrandir
<font color=red>ton texte</font> 

_______________________


Forum
Author Message
The Blade


Offline
Guest




PostPosted: Thu 23 Aug 2007 - 17:43    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

ou dois je mettre le premier
stp
merci
the blade


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Thu 23 Aug 2007 - 17:46    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

tu mets ça autour du texte voulu  dans le code
_______________________


Forum
Author Message
The Blade


Offline
Guest




PostPosted: Thu 23 Aug 2007 - 18:05    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

oui d'accord, mais je ne sais pas au commence le nombre des jours restants avant la date fixée
tu peux me dire ou c'est stp ? merci

regarde sur http://azertyu.xooit.com/index.php
le nombre des jours n'est ni rouge ni en gras !!

merci
The Blade


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Thu 23 Aug 2007 - 18:09    Post subject: [TUTO]Compte à rebours pour vos forums Reply with quote

ici

 
Code: Sélectionner - Agrandir
<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>
 
<script type="text/javascript">
 
var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)
 
</script> 
essayes de le mettre entre les script
_______________________


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 06:53    Post subject: [TUTO]Compte à rebours pour vos forums

Display posts from previous:   
Reply to topic Page 1 of 7 Goto page: 1, 2, 3, 4, 5, 6, 7  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401