La date/heure actuelle est Mer 18 Oct 2017 - 02:13 - créer un forum

[TUTO]Compte à rebours pour vos forums

Aller au contenu

Poster un nouveau sujet Répondre au sujet Aller à la page: 1, 2, 3, 4, 5, 6, 7  >

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


Hors ligne
Invité




MessagePosté le: Sam 30 Déc 2006 - 13:40    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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
Citation:
<html>
<body>
Le code en spoiler (les 2)
</body>
</html>


Ajoutez entre les 2 codes


Citation:

<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.
Citation:









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

Citation:

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


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

Citation:
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).

Citation:
.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.

Citation:
}
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.


Dernière édition par UVR le Lun 1 Jan 2007 - 14:17; édité 10 fois
Auteur Message
Thargalt


Hors ligne
Invité




MessagePosté le: Sam 30 Déc 2006 - 13:50    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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


Auteur Message
UVR


Hors ligne
Invité




MessagePosté le: Sam 30 Déc 2006 - 13:53    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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

Auteur Message
The End


Hors ligne
Invité




MessagePosté le: Sam 30 Déc 2006 - 13:58    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

Impec'

Auteur Message
UVR


Hors ligne
Invité




MessagePosté le: Dim 31 Déc 2006 - 13:48    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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.


Auteur Message
The Blade


Hors ligne
Invité




MessagePosté le: Mer 22 Aoû 2007 - 00:01    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Mer 22 Aoû 2007 - 17:18    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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
Auteur Message
The Blade


Hors ligne
Invité




MessagePosté le: Mer 22 Aoû 2007 - 21:26    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

comment afficher l'image en entier ?

Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Mer 22 Aoû 2007 - 21:34    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

il faut mettre les valeurs ici

width="" height=""

pour que l'image prenne les dimensions voulue
_______________________


Forum
Auteur Message
The Blade


Hors ligne
Invité




MessagePosté le: Mer 22 Aoû 2007 - 22:27    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

merci

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


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Jeu 23 Aoû 2007 - 16:38    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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
Auteur Message
The Blade


Hors ligne
Invité




MessagePosté le: Jeu 23 Aoû 2007 - 17:43    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

ou dois je mettre le premier
stp
merci
the blade


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Jeu 23 Aoû 2007 - 17:46    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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


Forum
Auteur Message
The Blade


Hors ligne
Invité




MessagePosté le: Jeu 23 Aoû 2007 - 18:05    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Jeu 23 Aoû 2007 - 18:09    Sujet du message: [TUTO]Compte à rebours pour vos forums Répondre en citant

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
Auteur Message
Contenu Sponsorisé





MessagePosté le: Aujourd’hui à 02:13    Sujet du message: [TUTO]Compte à rebours pour vos forums

Montrer les messages depuis:   
Répondre au sujet Page 1 sur 7 Aller à la page: 1, 2, 3, 4, 5, 6, 7  >




Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group | Traduction par : phpBB-fr.com
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401