faire clignoter un texte

Version imprimable

Bonjour,

j'ai fait un code qui s'inspire de ce post : http://www.developpez.net/forums/d38...-balise-blink/, la seule différence étant que j'ai remplacé l'id par une classe, mais ça ne clignote pas. Pourquoi ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test1</title> <script language="javascript"> function cligno() { if(document.getElementsByClass("cligno").style.visibility != 'hidden'){ document.getElementsByClass("cligno").style.visibility = 'hidden'; } else{ document.getElementsByClass("cligno").style.visibility = 'visible'; } } var timer=setInterval("cligno()", 1000); </script> </head> <body> <span class="cligno">HELLO</span> </body> </html>

:salut:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script>
function blink(Obj)
{
if (Obj.style.visibility == "visible" )
{
Obj.style.visibility = "hidden";
}
else
{
Obj.style.visibility = "visible";
}
}
setInterval("blink(bl)",500);
</script>
</head>
<body>
<center><br><br><br>
<div id="bl" style="visibility:visible"><font size=+2 color=red>Texte Clignotant !!!</font></div>
</body>
</html>

un autre exemple de Texte-clignotant

23/02/2013, 13h06
SpaceFrog

Deux causes probables

getElementsByClass n'existe pas ...
l'objet n'est pas instancié lorsque le script est appelé
23/02/2013, 13h52
NoSmoking

Bonjour,
effectivement cette méthode ,document.getElementsByClass("cligno"), n'existe pas sauf si elle à été définie ce qui n'est pas le cas dans le code que tu fournis.

De plus le s dans getElementsByClass signifie que l'on récupères une liste donc il y a lieu d'accéder à un élément via un index.

On écrira donc var oElem = document.getElementsByClass("cligno")[ind].

Je rajouterais qu'il est plus propre d'écrire "var timer=setInterval("cligno()", 1000);" sous la forme var timer=setInterval( cligno, 1000);, en passant à la méthode setInterval la référence à la fonction.

Remarque très perso le mode blink peut devenir vite ~~à ch...~~ une horreur :mrgreen:.
23/02/2013, 15h31
laurentSc

@SpaceFrog : avec un Id à la place de la Class, ça marchait, donc je pense que l'explication de l'élément pas encore existant ne tient pas ;

@ NoSmoking : Blink NAC (nul à ch...) certes, mais je réponds à un cahier des charges...Rajouter un indice (document.getElementsByClass("cligno")[ind]) ne change rien...;

@hackoofr : ton exemple marche si on attribut un id à l'élément, ce que j'arrivais déjà à faire, mais comme je voudrais faire plusieurs textes clignotants, j'aurais préféré créer une classe...
23/02/2013, 15h36
NoSmoking

tu oublies l'essentiel

Citation:

Envoyé par SpaceFrog

getElementsByClass n'existe pas ...

Citation:

Envoyé par NoSmoking

effectivement cette méthode ,document.getElementsByClass("cligno"), n'existe pas sauf si elle à été définie ce qui n'est pas le cas dans le code que tu fournis.
23/02/2013, 15h58
laurentSc

OK, mais comme tu as bien compris ce que je cherche à faire, comment ferais tu ?

J'ai déjà répondu

Citation:

Envoyé par NoSmoking

Remarque très perso le mode blink peut devenir vite ~~à ch...~~ une horreur :mrgreen:.

donc je ne ferais pas :ptdr:

bon allez dans le cadre d'un bon voisinage

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>BLINK BLINK</title>
<script>
var oBlink = null;
function cligno(){
  // recup des éléments si pas encore fait
  oBlink = oBlink || document.getElementsByClassName("cligno");
  var i, nbr= oBlink.length;
  for( i=0; i < nbr; i++){
    // change visibility suivant le cas
    oBlink[i].style.visibility = oBlink[i].style.visibility == 'hidden' ? 'visible' : 'hidden';
  }
}
var timer=setInterval( cligno, 1000);
</script>
</head>
<body>
<span class="cligno" style="visibility:hidden">EN HAUT</span><br>
<span class="cligno">EN BAS</span>
</body>
</html>

Attention toutefois getElementsByClassName n'est pas connu sous IE<9

23/02/2013, 16h30
SpaceFrog

Le fait que cela fonctionnait avec un id n'empeche pas qu'il y a un souci d'instanciation d'objet ! Les premières itérations du setInterval plantent

pour ce qui est de getElemetnsByClass, regade putot du coté de getElementsByClassName qui comme le souligne plus haut NoSmo contient un S
23/02/2013, 16h31
laurentSc

Merci, je comprends donc pourquoi ça marche sous FF mais pas sous IE8...
23/02/2013, 16h44
SpaceFrog

Pour ton souci de getElement(s)
http://www.developpez.net/forums/d75...filtre-regexp/

Sinon il y a Jquery
http://javascript.developpez.com/faq...Other#EffetCSS

Comme j'avais la flemme d'étudier les liens de SpaceFrog, j'ai fait ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  <script language="javascript">
function cligno() {
if(document.getElementById("txt1").style.visibility != 'hidden'){
document.getElementById("txt1").style.visibility = 'hidden';
}
else{
document.getElementById("txt1").style.visibility = 'visible';
}
if(document.getElementById("txt2").style.visibility != 'hidden'){
document.getElementById("txt2").style.visibility = 'hidden';
}
else{
document.getElementById("txt2").style.visibility = 'visible';
}
if(document.getElementById("txt3").style.visibility != 'hidden'){
document.getElementById("txt3").style.visibility = 'hidden';
}
else{
document.getElementById("txt3").style.visibility = 'visible';
} }
var timer=setInterval("cligno()", 500);
  </script>
...
Retrouvez <a href="---" target="_blank"><span id="txt1">ici</span></a>
--- <br>
                                          <br>
Retrouvez <a href="---" target="_blank"><span id="txt2">ici</span></a>
---<br>
                                          <br>
Retrouvez <a href="---" target="_blank"><span id="txt3">ici</span></a>

et je sais qu'il aurait fallu écrire <br/>...

24/02/2013, 13h00
Auteur

Une question de débutant (:oops:), mais je suis surpris que le code proposé par hackoofr fonctionne sous Firefox car on trouve :

Code:

setInterval("blink(bl)",500);

moi qui croyais que sous Firefox on ne pouvait accéder à un élément uniquement en utilisant la méthode getElementById(). Or ici on passe directement l'id de l'élément en paramètre (et encore sans guillemets)...
Une personne aurait une explication à donner ?
24/02/2013, 14h51
laurentSc

Auteur, je n'ai pas pris le code fourni par hackoofr, mais celui de ce post : http://www.developpez.net/forums/d38...-balise-blink/.
Mais pour vérifier, j'ai testé celui de hackoofr, et ça clignote aussi sous FF (et sous Chrome).

Question subsidiaire : au bout de combien d'années peut-on accéder au statut de débutant (que je revendique) ? :mouarf:
24/02/2013, 16h02
Auteur

Citation:

Envoyé par laurentSc

Auteur, je n'ai pas pris le code fourni par hackoofr, mais celui de ce post : http://www.developpez.net/forums/d38...-balise-blink/.
Mais pour vérifier, j'ai testé celui de hackoofr, et ça clignote aussi sous FF (et sous Chrome).

Je sais qu'il fonctionne je l'ai testé également, mais j'aimerai comprendre pourquoi ;)

Citation:

Envoyé par laurentSc

Question subsidiaire : au bout de combien d'années peut-on accéder au statut de débutant (que je revendique) ? :mouarf:

pas compris :aie:
24/02/2013, 16h46
laurentSc

Citation:

pas compris :aie:

:mouarf: