[résolu] Problème css Javascript

Bonjour,

J'essaye de rendre un élément visible ou invisible au click. J'ai donc créé un petit script... qui bien sur ne marche pas -___-"

Si vous pouvez m'aider, vous êtes les bienvenus

      <script language="JavaScript">
      	<!-- 
      	function switch(class_name){
      		if(class_name=="visible"){
      			document.getElementById('connexion').className=visible;
      		}
      		else{
      			document.getElementById('connexion').className=hidden;
      		}
      	}
      	-->
      </script>

      <div id="connexion" class="hidden">
      	<p>bla bla bla
      		<img src="fermer.png" alt="fermer"/>
      		<form action="rechercher.php" method="post" id="rechercher">
      		</form>
      	</p>
      </div>

<a href="#" onClick="switch(visible)">Se connecter</a>

#connexion{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:black;
}

.hidden{
	visibility:hidden;
}

.visible{
	visibility:visible;
}

Modifié par smon (11 Jun 2007 - 14:03)

essaie plutot un truc du genre

function switch(){
var doc = document.getElementById('connexion')
if(doc.className == 'visible'){
     doc.className = 'hidden';
}else{
     doc.className = 'visible';
}
}

ou essaie de change le css

.hidden{
	display:none;
}

.visible{
	display:block;//ou autre que block celui qui va bien.
}

<a href="#" onClick="switch(visible)">Se connecter</a>

etait un appel erronné en tous cas. il faut passer les chaines entre quote '.
Modifié par CPascal (11 Jun 2007 - 11:40)

Le css fonctionne lorsque je le fait manuellement donc je ne pense pas que ca vienne de là...

J'ai essayé ca aussi comme tu as dis mais... ca n'a pas marché

function switch(){

var doc = document.getElementById('connexion')

if(doc.className == 'visible'){

     doc.className = 'hidden';

}else{

     doc.className = 'visible';

}

}

CPAscal, tu veux dit qu'il faut écrire ca : <a href="#" onClick="switch('visible')">Se connecter</a> ?

oui.

maintenant ton passage par les classes j'en suis pas fan.

je suis un adepte du simple ( en tentant le pas simplet )

<div id="connexion" [b]style="visibility:hidden"[/b]> 
// ou visible selon l'etat initial. l'ecrire est important sinon ca marche pas
      	<p>bla bla bla
      		<img src="fermer.png" alt="fermer"/>
      		<form action="rechercher.php" method="post" id="rechercher">
      		</form>
      	</p>
      </div>

function switch(){

var doc = document.getElementById('connexion')[b];[/b] // le ; manquait au code de ashesheart

if(doc.style.visibility == 'visible'){

     doc.style.visibility = 'hidden';

}else{

     doc.style.visibility = 'visible';

}

}

au revoir les classes hidden et visible.

alors

<a href="#" onClick="switch();">Se connecter</a>

pas testé mais ça devrait le faire.
Modifié par CPascal (11 Jun 2007 - 12:22)

ça ne marche pas...

Mais j'ai un doute tout d'un coup, en fait mon code exact c'est ca :

echo'<a href="#" onclick="switch();">Se connecter</a>';

Ca pourrait être le php qui fait bugger le truc? Normalement non vu qu'il s'execute sur le serveur et que le java c en local mais...
Modifié par smon (11 Jun 2007 - 12:32)

bon cherche plus ça fonctionne mais tu n'aurais pas du donner a ta fonction un nom de mot-clé du javascript.

switch() switch2()

pascal

lol, je nesavais aps que switch était une fonction de javascript

ca marche très bien, merci a vous =)

Hello,

L'avantage de passer par les classes css plutôt que l'objet style est qu'on peut contrôler le media auquel se rapportent les propriétés attribuées. Il me semble que ce n'est pas ou très peu implémenté côté JS. Par exemple, dans le cas du texte caché par un visibility: hidden; ou display: none; on peut n'affecter que le media screen et pas le media print.

Au dela de ça, on peut véritablement dissocier la présentation du comportement, ce qui me semble être un avantage non négligeable lors de la maintenance (tous les styles au même endroit ; inutile de chercher).

Personnellement, les propriétés de style que j'attribue via JS sont rares, pour les animations le plus souvent.