Bonjour,
J’essaye d’ajouter un compteur sur le skin de défilement automatique des diaporamas (cf : Défilement automatique diaporama).
Dans le code, j’ai bien identifié la variable qui sert de compteur (la variable « beat ») mais je ne parviens pas à l’afficher, mes compétences en javascript étant plus que limitées…
Je joins le fichier :
root.zip (1,5 Ko)
Merci d’avance.
Sylvain.
Bonjour,
J’ai essayé d’avancer un peu avec l’aide d’un forum sur le javascript.
J’arrive bien à avoir mon compteur qui s’affiche dans la console si je l’appelle avec un "console.log()".
Je pense qu’il faut que j’arrive à mettre un : "<div id="compteur" style="width:100%; height:100%;" ></div>" et un "document.getElementById('compteur').innerHTML= compt ;"
Mais je ne sais pas où et comment mettre la balise div…
j’ai essayé de prendre exemple sur d’autre parties du code mais rien ne fonctionne !
Merci d’avance.
Sylvain.
Bonjour,
Vous avez à peu près trouvé tous les éléments nécessaires. En fait vous pouvez jouer le même type de code document.getElementById (‹ XXX ›).innerHTML sur un bloc déjà présent (celui où vous pensez ajouter la div) et y ajouter votre div.
un bout de code du genre devrait fonctionner :
var contenu= document.getElementById (‹ XXX ›).innerHTML;
document.getElementById (‹ XXX ›).innerHTML=contenu + «
…
»;
Sinon il y a la fonction appendChild() lié à un noeud du DOM qui est très bien mais demande de créer les sous éléments un à un. Voir par exemple :
Cordialement
Franck
Merci pour votre aide.
Du coup j’ai réussi à le mettre dans le bloc progress-bar qui était déjà fait :
Ce que je n’arrive pas à bien comprendre et à appliquer, c’est la façon de mettre un nouveau bloc, afin de mieux pouvoir le personnaliser (pour l’instant je n’ai pas le choix le compteur est coincé en haut à gauche), car le seul endroit dans le fichier où il y en a une c’est celui-ci :
vPgBarCt.innerHTML = '<div id="progress-bar" style="width:0%; height:100%; transition:width 1s; transition-timing-function:linear;"></div>';
Celui dont je me suis servi d’ailleurs…
Dès que j’essaye d’en rajouter un (en essayant de prendre modèle sur celui déjà fait) il n’y a plus rien qui fonctionne…
je remets la dernière version du fichier :
root.zip (1,5 Ko)
Edit : en attendant de trouver mieux, j’ai rajouté un text-indent: 40px; qui évite au compteur d’être collé.
Bonjour
Pourquoi passer par innerHTML. Je n’ai pas tout suivi alors il y a peut être une raison particulière que je ne connais pas.
Sinon vou pouvez aussi faire :
this.fCounter = scHPS.xAddElt("div", vPgBarCt, "counterClass");
vCounter.id = "progress-bar";
Ainsi ce qui est mis dans style pourra être mis dans le fichier css :
.counterClass {
width:0%; height:100%; transition:width 1s; transition-timing-function:linear;
}
Par ailleurs de cette manière il me semble aussi que l’id progress-bar n’est plus forcément utile puisque vous pourrez faire appel directement à this.fCounter
moveProgressBar : function() {
if (fCounter) {
var w = (beat * (100 / (duration-1)))
hpsAutomator.fCounter.style.width = w + '%';
hpsAutomator.fCounter.innerHTML=compt ;
if ( w > 0 && w <= 100 ) {
hpsAutomator.fCounter.style.visibility = 'visible';
}
else {
hpsAutomator.fCounter.style.visibility = 'hidden';
}
}
},
Je précise que je n’ai pas testé le code et il est possible qu’il y ait des erreurs …
Cordialement,
Nicolas
Merci pour votre réponse.
A vrai dire mes compétences étant plus que limitées dans le domaine j’ai repris ce que j’ai trouvé dans le fichier et sur le net dont les innerHTML.
Pour :
this.fCounter = scHPS.xAddElt("div", vPgBarCt, "counterClass");
vCounter.id = "progress-bar";
Il faut que je le mette où ? en plus dans le onLoad ? A la place de quelque chose ?
Et Je viens de voir que la taille de la police mon compteur reste fixe peu importe la taille de ma fenêtre, alors que je suis arrivé à faire que la barre de progression s’adapte à la taille de la fenêtre en mettre la taille en % mais cela ne fonctionne pas à le texte.
Pourtant, le reste du texte de la page change bien…
Merci.
Cela affiche bien le compteur.
Par contre je n’ai plus la barre de progression, mon idée était d’avoir les deux.
Je suppose qu’en remettant en plus la partie effacée cela devrait fonctionner.
Je n’ai plus le temps d’essayer aujourd’hui mais je regarde dès que je peux.
Sans en voir plus difficile de savoir. En tout cas le code est sensé remplacer le innerHTML.
Cela dit il est possible que ce soit parce que j’ai supprimé l’id et que le css s’appuie dessus …
Donc en dessous de
this.fCounter = scHPS.xAddElt("div", vPgBarCt, "counterClass");
ligne 35
Rajouter :
this.fCounter.id = "progress-bar";
Si cela ne fonctionne pas. Envoyer moi un exemple de publi que je puisse tester directement.
Cordialement
Nicolas
Merci !
Je fais ça dès que possible et reviens vers vous.
Merci, cela fonctionne.
PS : En revenant sur ce post, je viens de m’apercevoir que mon message de remerciements était resté en bouillon…