Problème avec la mise en place du compte à rebours

[Natharatatouille]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://sinastra.1fr1.net

Description du problème

Bonjour, j'ai tenté de suivre ce tuto pour mettre un compte à rebours sur mon forum.

Un événement va arriver le 24 février à midi, et je voulais le symboliser par un compte à rebours et, lorsque celui-ci se termine, qu'un bloc de texte contenant un lien apparaisse (partie du tuto concernant le compte à rebours avec personnalisation), mais je bloque dès le début du tutoriel ... (le code et moi ça fait 3).

Dès les premières lignes, il est question de "div" et d'une ligne à remplacer selon cette "div" ... sauf que je ne sais pas ce que c'est, ni où la trouver - -'

Pardon si ma question est idiote ...

Est-ce que quelqu'un pourrait m'expliquer de manière simple comment appliquer ce code à mon forum ?

Merci !

[Neptunia]

Bonjour ^^


Si vous ne voulez pas comprendre la syntaxe, il vous suffit de passer directement au point 4.

[Natharatatouille]

Je ne me suis peut-être pas exprimée très clairement, ou peut-être que je n'ai rien compris x)

Mon problème ne concerne pas la partie sur la syntaxe. Il m'a semblé comprendre, en lisant les premières lignes du tutoriel, qu'il fallait remplacer "cible" dans le code par quelque chose en lien avec une "div", et c'est ça qui me bloque ...

[Neptunia]

Il n'y a pas de lien avec une div mais avec le contenu de votre page.


Si je reprends l'exemple du paragraphe 4, votre page comportera un span nommé id-horloge, le javascript devra commencer par la ligne :

Code:

var x=new horloge($("#id-horloge"));

En fait ce qui importe n'est pas le type d'élément utilisé (div, span, p...) mais son identifiant, ici id-horloge.

---

Formulé autrement, si vous voulez mettre un compte à rebours quelque part, il faut d'abord créer le quelque part. Et ensuite adapter le script au contenu de votre quelque part.
Dans la vraie vie, si vous voulez utiliser un chronomètre, il vous faut une main pour vous en servir. Et pour une montre, un poignet s'avère utile. Et si on veut vous parler de la montre on ne vous parlera pas de montre analogique ou digitale, mais on vous parlera de la montre située à votre poignet gauche.

[Natharatatouille]

Merci pour votre rapidité de réaction et pour la reformulation, c'est beaucoup plus clair comme ça !

Ce "quelque part" où mettre l'horloge existe-t-il déjà, ou bien dois-je le créer ?

[Neptunia]

C'est à vous de le savoir. Mais généralement ça reste à créer.

Supposons que vous souhaitiez le mettre au milieu du message de la page d'accueil c'est à vous de créer le "contenant" entre les deux lignes où vous voulez insérer le compte à rebours.

[Natharatatouille]

C'est exactement là où je veux le mettre !

Mais dois-je créer ce contenant avec du code ? Du genre, insérer une ligne dans le CSS ? Ou créer un nouveau code JS ? Ou encore autre chose ?

Désolée, en matière de code je suis supra-débutante ...

(Si ça doit effectivement se créer en code, je veux bien l'explication sur la manière de le faire. Mais ça peut attendre demain, vu l'heure).

Merci du temps que vous prenez à réfléchir à mon problème et y répondre !

[Neptunia]

Il s'agit de créer le code en HTML :

Je vais prendre un exemple pour un compteur pour la Saint Valentin.

2- Préparation :
Rien à faire excepté placer le javascript du tuto sur toutes les pages. Ce script n'affiche rien, son unique utilité est de permettre de créer des horloges ou comptes à rebours.

4- Mise en place :
Mon message d'accueil contient deux éléments :
- Une bannière défilante continue qui utilise d'ailleurs le même principe qu'ici. Un conteneur vide, et le remplissage s'effectuant par script.
- Un diaporama (celui proposé ici même)

Je vais donc insérer un conteneur entre les deux parties de mon code existant.

Code:

<div align="center" id="valentine-day"></div>

div c'est le type de conteneur. valentine-day le nom du conteneur et align="center" me permet de centrer ma div sur l'accueil.
J'enregistre le message d'accueil.

Je crée un nouveau javascript qui aura pour but de définir où intégrer l'horloge et le type d'horloge voulue. Comme il ne va agir que sur le message d'accueil, je vais le placer uniquement sur l'index.

Code:

$(function(){
var x=new horloge($("#valentine-day"));
x.a_rebours("14/02/2019-00:01:00");
});

Pour cet exemple le compte à rebours atteindra zéro, une minute après minuit.

A ce niveau, le compte à rebours est fonctionnel mais pas très appétissant.

5- Personnaliser l'affichage :
Le tuto dit peut-être qu'il faut aller voir ailleurs pour pouvoir personnaliser. N'empêche qu'on peut tout de même agir sur le texte via la feuille de style CSS.

Code:

#valentine-day {
  font-size: 18px;
  font-weight: bold;
  color: red;
}


Ici j'utilise :
- une taille de police de 18px, la taille par défaut était rikiki.
- Des caractères gras
- Le tout en rouge.

1- Aperçu :

En hide pour éviter de rameuter les moteurs de recherche :

[Natharatatouille]

Bonjour Neptunia,

Merci beaucoup ! Ça fonctionne ! J'ai réussi à mettre le compte à rebours que je voulais

J'ai une dernière question : dans la deuxième partie du tuto, il est dit que l'on peut programmer un code qui s'exécutera à la fin du compte à rebours. Je voudrais qu'un bloc de texte apparaisse, ou au moins un lien. Comment puis-je faire ?

Encore merci pour le temps que tu passes à me répondre !

[Adam_sfp]

Bonjour

En prenant l'exemple avec l'id utilisé par @Neptunia

Dans cette partie du code

Code:

fin_a_rebours:function(){try{/*votre code*/}catch(e){console.log(e)}},

Essayez en remplaçant

Code:

/*votre code*/

par pour du texte

Code:

$('#valentine-day').text('VOTRE TEXTE ICI');

pour un lien

Code:

$('#valentine-day ').html('<a href="ICI votre lien">le nom du lien</a>');

Cdt.

[Natharatatouille]

Merci Adam_sfp !
En mettant les deux codes à la suite l'un de l'autre, pourrai-je avoir un texte ET un lien qui apparaissent ?

Merci !

[Adam_sfp]

Bonjour

Essayez comme ceci

Code:

 $('#valentine-day ').html('<span>VOTRE TEXTE ICI</span><br/><a href="ICI votre lien">le nom du lien</a>');

Cdt.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.