5568 sujets

Sémantique web et HTML

[Résolu] Afficher/cacher un div (Résultat : Div vide)

Bonjour,
Nouveau sur ce forum je viens à vous pour vous demander votre aide.
J'ai un code "simple" pour afficher/cacher un div en cliquant sur un lien.
Ce code marche très bien sous Firefox et partiellement sur IE.
Sous IE, le div s'affiche bien mais la table qui est à l'interieur (et donc le texte) ne s'affiche pas.
Sous Firefox, il n'y a aucun soucis.
Voila le code : 

<html>
<title>Toto</title>
<style type="text/css" media="all">
.cachediv{
	visibility: hidden;
	overflow: hidden;
	height: 1px;
	margin-top: -1px;
	position: absolute;
}
</style>
<script type="text/javascript">
function DivStatus(divID){
	// Pour les navigateurs récents
	if ( document.getElementById && document.getElementById( divID ) ){
		Pdiv = document.getElementById( divID );
		PcH = true;
	}
	// Pour les veilles versions
	else if ( document.all && document.all[ divID ] ){
		Pdiv = document.all[ divID ];
		PcH = true;
	}
	// Pour les très veilles versions
	else if ( document.layers && document.layers[ divID ] ){
		Pdiv = document.layers[ divID ];
		PcH = true;
	}
	else{
		PcH = false;
	}
	if ( PcH ){
		if(Pdiv.className == 'cachediv'){
			Pdiv.className = '';
		}else{
			Pdiv.className = 'cachediv';
		}
	}
}
</script>
<body>
	<table width="100%" cellspacing="2" cellpadding="2" border="0">
		<tr>
			<td>
				<a href="javascript:DivStatus('rub6');">x</a>
				&nbsp;&nbsp;Afficher/Cacher le Div
			</td>
		</tr>
	</table>
	<div class="cachediv" id="rub6" style="background-color:#FF0000;">
		<table width="100%" cellpadding="3" cellspacing="2" border="1">
			<tr><td>Texte<br />Texte<br />Texte</td></tr>
			<tr><td>Lien<br />Lien<br />Lien</td></tr>
		</table>
	</div>
</body>
</html>


Voila, j'espere que ca ira.
Je pense pas qu'il y ait grand chose mais ca ne marche pas... Smiley decu
Par avance, merci de votre aide.

Steph
Modifié par tete-jaune (24 Nov 2006 - 16:39)
Bonjour tête jaune et bienvenue...

Au vu du résultat que tu comptes obtenir, je ne peux que te conseiller d'utiliser cette méthode qui fonctionne très bien :
- Afficher / Masquer des "calques" sans javascript Smiley cligne

S'il s'agit d'un problème dû à ton JS, l'emploi de cette méthode résoudra le problème Smiley cligne

Edit de conjugaison par mpop (je dissipe le doute : c'est « résoudra », pas « résolvera »... me dit le correcteur orthographique de Firefox 2.
Modifié par mpop (24 Nov 2006 - 12:25)
Merci pour ta réponse mais ce n'est pas exactement ca que je veux faire.
En fait j'ai une série de DIV géré par PHP permettant de lister un contenu dans la base de données.
Pour mon soucis j'ai simplifié mon code mais si ca marche pour 1 div je suppose que ca fonctionnera pour n Div.

Voila un image du resultat sous firefox :
upload/9648-exemple-FF.jpg

Et sous IE :
upload/9648-exemple-IE.jpg

Avec cet exemple, peut etre que ce sera plus clair.
Commence par des précautions élémentaires :
- vérification que les navigateurs reçoivent bien le même code source ;
- vérification du Doctype (il n'est pas cité dans ton code ci-dessus, mais j'ose supposer que tu en as utilisé un) ;
- vérification des différences de rendu avec Javascript désactivé.

Ça te permettra de savoir s'il s'agit d'un bug de rendu d'IE, ou d'un problème javascript, ou encore de quelque chose plus en amont.
Modérateur
bonjour ,

en testant avec IE , on s'aperçoit que la <table> recevant les div s'affiche bien , et que les div et leur contenu non.

Il s'agit bien d'un bug de rendu de IE , lié au haslayout qui n'est pas actif .

pour modifié simplement ceci , ajoute une classe , par exemple :
.voitdivIE {
	zoom:1;/* ou une valeur conferant le layout */
}


et donne la a l'affichage dans ton js :

if ( PcH ){
		if(Pdiv.className == 'cachediv'){
			Pdiv.className = 'voitdivIE'; /* ICI  ! */
		}else{
			Pdiv.className = 'cachediv';
		}
	}


si le test te semble efficace , alors peut-etre passer le css de la class suplementaire en Commentaire Conditionnels" .

++
Je reviens à vous en cette fin d'aprem (réunion oblige... Smiley cligne )
Je viens de tester la proposition de gcyrillus et ca marche.
Je te remercie pour cette solution.

Merci

Tete Jaune
Sujet clos
Aller à