Affichage de cadres en CSS

03 août 2007, 18:01

Bonjour à tous,

aujourd'hui c'est le javascript qui me donne des cheveux blancs (ou les fait tomber, c'est selon...). ^^

Voici le problème : sur une page de mon site j'affiche des cadres en CSS (des div) à l'aide du code JS suivant :

Code : Tout sélectionner

function affichEtudes() {
	document.getElementById('etudes1').style.visibility='visible';
	document.getElementById('etudes1').style.marginBottom=15;
	document.getElementById('etudes1').style.height=140;
	
	i=2;
	
	while (i<6) {
		document.getElementById('etudes'+i).style.visibility='hidden';
		document.getElementById('etudes'+i).style.height=1;
		document.getElementById('etudes'+i).style.marginBottom=0;
		i++;
	}
}


function affichExper() {
	document.getElementById('etudes2').style.visibility='visible';
	document.getElementById('etudes2').style.marginBottom=15;
	document.getElementById('etudes2').style.height=140;
	
	i=1;
	
	while (1<6) {
		if (i == 2){
			i++;
			continue;
		}
		
		document.getElementById('etudes'+i).style.visibility='hidden';
		document.getElementById('etudes'+i).style.height=1;
		document.getElementById('etudes'+i).style.marginBottom=0;
		i++;
	}
}

Différents liens permettent d'afficher ou masquer ces cadres :

echo '			<a href="#" class="cv" onclick="affichEtudes();">'
		.'				Etudes'
		.'			</a>'
		.'<div id="etudes1" style="position:relative;'
		.'	left:10px; top:10px;'
		.'	width:480px; height:1px; text-align:center; vertical-align:middle;'
		.'	background-color:#d6e4eb; margin-left:0; margin-bottom:0px;'
		.'	padding:auto; visibility:hidden; overflow:hidden;'
		.'	border:1px solid #637a84; z-index:2;">'
		.'		<p>'.$etude_txt.'<p>'
		.'</div>'
		

		.'			<a href="#" class="cv" onclick="affichExper();">'
		.'				Exp&eacute;rience'
		.'			</a>'
		.'<div id="etudes2" style="position:relative;'
		.'	left:10px; top:10px;'
		.'	width:480px; height:1px; text-align:center; vertical-align:middle;'
		.'	background-color:#d6e4eb; margin-left:0; margin-bottom:0;'
		.'	padding:auto; visibility:hidden; overflow:hidden;'
		.'	border:1px solid #637a84; z-index:3;">'
		.'		<p>'$exp_txt.'</p>'
		.'</div>';

Pour condenser je n'ai mis en exemple que deux liens (il y en a cinq au total sur mon script d'origine), mais ça n'a pas d'incidence sur le résultat...

Bref, en l'état ce code fonctionne bien sur IE6 et 7, à savoir que les cadres s'intercalent entre les liens lorsqu'on clique sur ces derniers, avec le texte qui correspond à l'intérieur.

Par contre sur Firefox les cadres ne sont pas redimensionnés (ils gardent en hauteur la valeur indiquée dans la définition du calque, à savoir 1 pixel), comme cela devrait être le cas lorsqu'on clique sur un lien, ce qui fait que les textes à l'intérieur ne sont pas visibles (évidemment l'attribut overflow n'y est pas étranger, mais je ne veux pas qu'apparaissent dans les cadres des barres de défilement). Est-ce que la fonction "height" en javascript serait incompatible avec ce navigateur ?

Par ailleurs les cadres s'affichent bel et bien sous les liens, mais lorsqu'un cadre apparaît il se superpose aux liens qui sont en dessous, alors que l'effet souhaité serait de décaler les liens en dessous du cadre affiché (ce qui est effectivement le cas sur IE).

Ensuite j'ai encore un soucis, mais cette fois avec Opera. En effet ce dernier affiche correctement les cadres, de la même façon que IE, à la différence près que ceux-ci ne sont pas visible plus d'une seconde, après quoi ils disparaissent à nouveau. En fait j'ai l'impression qu'Opera rafraîchit les pages en continu et par conséquent réinitialise à l'état d'affichage par défaut, donc en "visible:hidden;". Est-ce en effet un comportement normal de ce navigateur ? Et si oui est-il possible de désactiver cela ?

Voilà, je bénis le jour qui verra naître des navigateurs capables d'interprêter uniformément le code, qu'il soit JavaScript, CSS ou autres...

Merci à vous pour tout renseignement susceptible de m'aider (ou non).

03 août 2007, 18:26

déjà tu pourrais raccourcir ton code, surtoût si tu a plusieurs cadres à afficher, en faisant une fonction générique :

Code : Tout sélectionner

function affichCadre(id_cadre,i) { 
   document.getElementById(id_cadre).style.visibility='visible'; 
   document.getElementById(id_cadre).style.marginBottom=15; 
   document.getElementById(id_cadre).style.height=140;  
    
   while (i<6) { 
      document.getElementById(id_cadre+i).style.visibility='hidden'; 
      document.getElementById(id_cadre+i).style.height=1; 
      document.getElementById(id_cadre+i).style.marginBottom=0; 
      i++; 
   } 
}

crois moi c'est bien plus agréable.

Sinon pour l'attribut height en CSS, il me semble que internet explorer augmente la taille du cadre si son contenu dépasse, par contre firefox garde le cadre fixe à la taille défini dans height.[/php]

03 août 2007, 19:03

Oui en effet, je peux raccourcir le code.

Par contre ça ne va pas résoudre mon problème d'affichage. D'habitude c'est IE qui me cause des soucis... Ca me surprend venant d'un excellent navigateur tel que Firefox. En gros j'ai tout intérêt à me passer du javascript et m'arranger pour trouver une autre méthode d'affichage.

Sinon concernant l'attribut "height" en CSS, IE adapte en effet la taille des cadres en fonction de leur contenu, sauf si on ajoute l'attribut "overflow:hidden;"... Dans ce cas le contenu qui dépasse du cadre est coupé. Avec "overflow:auto;" le contenu est également coupé mais cela ajoute des barres de défilement horizontale et/ou verticale si nécessaire.

Affichage de cadres en CSS

Qui est en ligne