- PêpêcheMascotte
- Messages : 4428
Afficher un texte en fonction de la date du jour
Mar 28 Mai 2019 - 15:48
Toutes versions
Afficher un texte en fonction de la date du jour
Bonjour bonjour,
Dans ce tutoriel, nous allons voir comment afficher un message particulier en fonction de la date du jour. Cette astuce peut être idéale pour mettre en place des "promotions" ou "offres spéciales" sur des forums de pub, ou encore pour préciser la période en cours sur un forum rpg.
Voici un exemple de rendu : clic.
Ici le texte se met à jour avec la date du jour et j'ai mis en place ce qu'on appelle un datepicker (calendrier) pour que tu puisses changer la date et voir le rendu par toi-même.
Voici les dates/périodes pour lesquelles une information est renseignée
• tous les 1er du mois et de chaque année ;
• le 20 octobre de chaque année ;
• du 05 au 15 de chaque mois et de chaque année ;
• du 01 au 30 juin 2019 ;
• les 28 et 29 mai 2019.
Cette astuce fonctionne pour toutes les versions de forum et peut être utilisée partout, même dans les messages.
Il te suffit juste de placer la div suivante là où tu veux que l'information s'affiche
Le JS remplira la div de cette façon :
A toi de faire la CSS qui te convient et de la placer dans la feuille de style de ton forum (Panneau d'administration > Affichage > Images et Couleurs > Couleurs >Feuille de style CSS).
Par exemple, voici celui du tutoriel :
On va ensuite créer un javascript qu'on va appeler sur toutes les pages. Pour cela, on va aller dans Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
Le js contiendra ceci :
Dans ce tutoriel, nous allons voir comment afficher un message particulier en fonction de la date du jour. Cette astuce peut être idéale pour mettre en place des "promotions" ou "offres spéciales" sur des forums de pub, ou encore pour préciser la période en cours sur un forum rpg.
Voici un exemple de rendu : clic.
Ici le texte se met à jour avec la date du jour et j'ai mis en place ce qu'on appelle un datepicker (calendrier) pour que tu puisses changer la date et voir le rendu par toi-même.
Voici les dates/périodes pour lesquelles une information est renseignée
• tous les 1er du mois et de chaque année ;
• le 20 octobre de chaque année ;
• du 05 au 15 de chaque mois et de chaque année ;
• du 01 au 30 juin 2019 ;
• les 28 et 29 mai 2019.
Préparation
Cette astuce fonctionne pour toutes les versions de forum et peut être utilisée partout, même dans les messages.
- Spoiler:
- • Sur l'index :
http://miettes.lebonforum.com/
• Dans un message
http://miettes.lebonforum.com/t69-tuto-texte-personnalise-en-fonction-de-la-date-du-jour#432
HTML
Il te suffit juste de placer la div suivante là où tu veux que l'information s'affiche
- Code:
<div id="date-infos"></div>
La CSS
Le JS remplira la div de cette façon :
- Code:
<div id="date-infos">
<div id="titre-date">Où es-tu ?</div>
<div id="content-date">Soleil où es-tu ? Mon coeur et mon corps se meurent sans toi... Reviens-moi vite que la motivation t'accompagne !</div>
</div>
A toi de faire la CSS qui te convient et de la placer dans la feuille de style de ton forum (Panneau d'administration > Affichage > Images et Couleurs > Couleurs >Feuille de style CSS).
Par exemple, voici celui du tutoriel :
- Code:
#date-infos{
background: #f2eacb;
border: #dbc8a4 2px solid;
border-radius: 30px 8px;
margin: auto;
padding: 10px;
position: relative;
width: 80%;
}
#date-infos #titre-date{
color: #e0704e;
font: bold 24px/1 'Pacifico', cursive;
position: absolute;
text-align: center;
text-shadow: #dbc8a4 1px 1px 2px, #dbc8a4 -1px -1px 2px, #dbc8a4 1px -1px 2px, #dbc8a4 -1px 1px 2px;
top: -18px;
width: 100%;
}
#date-infos #content-date{
color: #444 !important;
box-shadow: 0 0 7px rgba(219, 200, 164, 0.6);
border-radius: 30px 8px;
padding: 10px;
}
#date-infos #content-date a{
color: #e0704e !important;
text-decoration: none !important;
}
#date-infos #content-date a:hover{
color: #dbc8a4 !important;
text-decoration: underline !important;
}
Le javascript
On va ensuite créer un javascript qu'on va appeler sur toutes les pages. Pour cela, on va aller dans Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
Le js contiendra ceci :
- Code:
$( function() {
/* On cherche la date d'aujourd'hui => A ne pas modifier */
var dateNow = new Date(),
todayMonth = dateNow.getMonth() + 1,
todayYear = dateNow.getFullYear();
/* C'est bon on a récupéré la date du jour */
/*** Les périodes / Date ***/
var listePeriode = [
{
debut: '1/'+ todayMonth +'/'+ todayYear +'',
fin: '1/'+ todayMonth +'/'+ todayYear +'',
titre: 'Un peu de lecture',
texte: 'Le <strong>bilan du mois</strong> est en ligne. Viens le <a href="#">lire</a>'
},{
debut: '20/10/'+ todayYear +'',
fin: '20/10/'+ todayYear +'',
titre: 'Bon anniversaire !',
texte: 'Eh eh eh ! Aujourd\'hui, c\'est l\'anniversaire de <strong>Miettes</strong>. Viens vite le lui <a href="#">souhaiter</a> !'
},{
debut: '5/'+ todayMonth +'/'+ todayYear +'',
fin: '15/'+ todayMonth +'/'+ todayYear +'',
titre: 'Inscris-toi à la publicité',
texte: 'Comme tous les mois, nous te proposons d\'ajouter ta <strong>publicité au format réduit</strong> dans la pub du forum. Pour cela, il te suffit de venir t\'inscrire <a href="#">ici</a>'
},{
debut: '1/6/2019',
fin: '30/6/2019',
titre: 'Waouhhhh',
texte: 'Eh bien ! Voilà <strong>7 ans</strong> que ce forum de test est créé :o'
},{
debut: '28/5/2019',
fin: '29/5/2019',
titre: 'Où es-tu ?',
texte: 'Soleil où es-tu ? Mon coeur et mon corps se meurent sans toi... Reviens-moi vite que la motivation te suit !'
}
/*{
debut: '',
fin: '',
titre: '',
texte: ''
}*/];
// On définit le html qu'on veut afficher
function texteAAfficher(contenu){
var txt;
if(contenu){
// si une date ou période a été trouvée
txt = '<div id="titre-date">'+ contenu.titre +'</div><div id="content-date">'+ contenu.texte +'</div>';
}else{
// si aucune date n'a été trouvée
txt = '<div id="titre-date">Oups...</div><div id="content-date">Il n\'y a rien de prévu aujourd\'hui.</div>';
}
return txt;
};
// On cherche le texte à afficher
function showText(date, listePeriode){
var isPeriode = false,
dateInfo = date.getTime(),
infosDate;
// On parcourt le tableau pour savoir quoi afficher
for( var i = 0 ; i < listePeriode.length ; i ++){
debut = listePeriode[i].debut ;
debut = debut.split('/');
d_periode = Date.parse(""+ debut[2] +", "+ debut[1] +","+ debut[0] +"");
fin = listePeriode[i].fin ;
fin = fin.split('/');
f_periode = Date.parse(""+ fin[2] +", "+ fin[1] +","+ fin[0] +"");
// la date du jour est comprise dans une période
// ou
// la date du jour est le premier jour d'une période
// ou
// la date du jour est le dernier jour d'une période
if((dateInfo > d_periode && dateInfo < f_periode) || dateInfo == d_periode || dateInfo == f_periode ){
// Dans ce cas, on va afficher du texte
infosDate = texteAAfficher(listePeriode[i]);
isPeriode = true;
break;
}
};
// On n'a pas trouvé de date correspondante
if(!isPeriode){
infosDate = texteAAfficher();
}
document.getElementById('date-infos').innerHTML = infosDate;
}
// On déclenche la fonction qui va chercher s'il y a du texte à afficher
if($("#date-infos").length > 0){
showText(dateNow, listePeriode );
}
});
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum