[quote="visualight"]Franchement, merci AB pour ce formidable tuto qui m'a beaucoup aidé à compléter un manquement au niveau du code que j'ai fait avec Grisom par skype interposé.
J'ai testé ton tuto et il marche impeccablement mis à part un petit bug.
Si un DIV est fermé (display:none) et que je l'ouvre (display:block) ET QUE après je fais un rafraichissement de la page,
le DIV en question se referme pendant quelques mico-secondes (presque 1 seconde) pour s'ouvre à nouveau.
N'y a t'il pas moyen de faire une sorte de préchargement pour éviter ce petit problème "de clignottement" ?
[b]+1[/b] pour AB
Raph[/quote]
Ah oui effectivement, c'est possible que tu observe ça mais c'est pas un bug. Les fonctions javascript s'exécutent au chargement de la page. Si un div était display:none en css il va commencer par s'afficher fermé puis la fonction javascript va l'ouvrir.
Mais tu ne devrais pratiquement pas pouvoir observer ce phénomène au chargement de la page, mais seulement au rafraichissement de la page (donc peu fréquent). Par ailleurs cela ne devrait pas se produire avec Firefox qui possède une gestion de l'affichage plus intelligente que IE.
Sinon il reste une alternative pour faire plus propre avec IE qui consiste à mettre le block "conteneur" (pour reprendre l'exemple de mon tuto) en visibility:hidden en css puis de le faire afficher en js avec style.visibility = 'visible' en ajoutant une ligne à la fin de la fonction InitShowDiv
En reprenant l'exemple du tuto cela donne
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Afficher ou masquer un DIV et garder son état en mémoire en Javascript</title>
<script type="text/javascript">
<!--
function ShowDiv (id) {
var id_show;
//Si l'id correspond à un id existant
if (id_show = document.getElementById(id))
{
// Inverse l'état du div : s'il est à "display : none", sa largeur id_show.offsetWidth = 0
var showHide = id_show.offsetWidth > 0 ? 'none' : 'block';
id_show.style.display = showHide;
var tab_cook_showDiv;
// Cherche le cookie affecté à cette page et s'il existe le désérialise
tab_cook_showDiv = (tab_cook_showDiv = GetCookie(SetNomCookie())) ? Unserialize(tab_cook_showDiv) : null;
// Vérifie que le résultat tab_cook_showDiv est un tableau sinon initialise cette variable en tableau
tab_cook_showDiv = (typeof tab_cook_showDiv == 'object' && tab_cook_showDiv instanceof Array) ? tab_cook_showDiv : new Array();
// Enregistre l'état de la div avec l'id comme index de l'élément dans le tableau (crée l'élément ou le remplace)
tab_cook_showDiv[id] = showHide;
// Envoi le tableau sérialisé dans un cookie dont le nom est "SetNomCookie()"
SetCoockie (SetNomCookie(), Serialize(tab_cook_showDiv));
}
}
function InitShowDiv (conteneur) {
var cookie_showDiv;
// Cherche le cookie affecté à cette page (ayant pour nom SetNomCookie()) et s'il existe ...
if (cookie_showDiv = GetCookie(SetNomCookie()))
{
// Désérialise le tableau enregistré dans le cookie
var tab_cook_showDiv = Unserialize(cookie_showDiv);
// Si tab_cook_showDiv est un objet et un tableau
if(typeof tab_cook_showDiv == 'object' && tab_cook_showDiv instanceof Array)
{
// Affiche les div suivant leur état "block" ou "none" enregistrés dans le tableau du cookie de la page
// Liste le tableau associatif
for (var id in tab_cook_showDiv)
{
var affiche_id;
// Si l'index de l'élément du tableau correspond à un id existant de la page en cours, affecte son affichage "style.display" avec la valeur enregistrée
if (affiche_id = document.getElementById(id)) affiche_id.style.display = tab_cook_showDiv[id];
}
// Et renvoie le même cookie pour prolongation de sa durée de vie dès le chargement de la page
SetCoockie (SetNomCookie(), cookie_showDiv);
}
}
var block;
if (block = document.getElementById(conteneur)) block.style.visibility = 'visible';
}
function SetNomCookie() {
var fich = window.location.pathname;
if (fich != '/')
{
//Enlève tout ce qu'il y a après de dernier point
fich = fich.substr(0,fich.lastIndexOf('.'));
//Si fich = "/index" on est sur la page d'accueil et l'on renvoie le nom de domaine
var name = (fich == '/index')? window.location.host : fich;
}
else
{
//si fich == '/' on est sur la page d'accueil et l'on renvoie le nom de domaine
var name = window.location.host;
}
return (name);
}
function SetCoockie (nom, valeur) {
//http://fr.selfhtml.org/javascript/exemples/visites_pages.htm ... script légèrement modifié
var peremption = 1000*60*60*24*365;//durée de validité : 1an
var maintenant = new Date();
var temps = new Date(maintenant.getTime() + peremption);
document.cookie = nom+"="+escape(valeur)+"; expires="+temps.toGMTString()+";";
}
function GetCookie(nom) {
//http://www.asp-php.net/tutorial/scripting/cookies.php ... script légèrement modifié
var deb,fin;
deb = document.cookie.indexOf(nom + "=");
if (deb >= 0)
{
deb += nom.length + 1;
fin = document.cookie.indexOf(";",deb);
if (fin < 0) fin = document.cookie.length;
return unescape(document.cookie.substring(deb,fin));
}
else return false;
}
function Serialize (txt) {
/*auteur : XoraX
info : http://www.xorax.info/blog/programmatio ... e-php.html ... script légèrement modifié*/
switch(typeof(txt))
{
case 'string':
return 's:'+txt.length+':"'+txt+'";';
case 'number':
if(txt>=0 && String(txt).indexOf('.') == -1 && txt < 65536) return 'i:'+txt+';';
return 'd:'+txt+';';
case 'boolean':
return 'b:'+( (txt)?'1':'0' )+';';
case 'object':
var i=0,k,ret='';
for(k in txt)
{
//alert(isNaN(k));
if(!isNaN(k)) k = Number(k);
ret += Serialize(k)+Serialize(txt[k]);
i++;
}
return 'a:'+i+':{'+ret+'}';
default:
return 'N;';
//alert('var undefined: '+typeof(txt));return undefined;
}
}
function Unserialize(txt){
/*auteur : XoraX
info : http://www.xorax.info/blog/programmatio ... e-php.html ... script légèrement modifié*/
var level=0,arrlen=new Array(),del=0,final=new Array(),key=new Array(),save=txt;
while(1)
{
switch(txt.substr(0,1))
{
case 'N':
del = 2;
ret = null;
break;
case 'b':
del = txt.indexOf(';')+1;
ret = (txt.substring(2,del-1) == '1')?true:false;
break;
case 'i':
del = txt.indexOf(';')+1;
ret = Number(txt.substring(2,del-1));
break;
case 'd':
del = txt.indexOf(';')+1;
ret = Number(txt.substring(2,del-1));
break;
case 's':
del = txt.substr(2,txt.substr(2).indexOf(':'));
ret = txt.substr( 1+txt.indexOf('"'),del);
del = txt.indexOf('"')+ 1 + ret.length + 2;
break;
case 'a':
del = txt.indexOf(':{')+2;
ret = new Array();
arrlen[level+1] = Number(txt.substring(txt.indexOf(':')+1, del-2))*2;
break;
case 'O':
txt = txt.substr(2);
var tmp = txt.indexOf(':"')+2;
var nlen = Number(txt.substring(0, txt.indexOf(':')));
name = txt.substring(tmp, tmp+nlen );
//alert(name);
txt = txt.substring(tmp+nlen+2);
del = txt.indexOf(':{')+2;
ret = new Object();
arrlen[level+1] = Number(txt.substring(0, del-2))*2;
break;
case '}':
txt = txt.substr(1);
if(arrlen[level] != 0)
{
//alert('var missed : '+save);
return undefined;
}
//alert(arrlen[level]);
level--;
continue;
default:
if(level==0) return final;
//alert('syntax invalid(1) : '+save+"\nat\n"+txt+"level is at "+level);
return undefined;
}
if(arrlen[level]%2 == 0)
{
if(typeof(ret) == 'object')
{
//alert('array index object no accepted : '+save);
return undefined;
}
if(ret == undefined)
{
//alert('syntax invalid(2) : '+save);
return undefined;
}
key[level] = ret;
}
else
{
var ev = '';
for(var i=1;i<=level;i++)
{
if(typeof(key[i]) == 'number')
{
ev += '['+key[i]+']';
}
else
{
ev += '["'+key[i]+'"]';
}
}
eval('final'+ev+'= ret;');
}
arrlen[level]--;//alert(arrlen[level]-1);
if(typeof(ret) == 'object') level++;
txt = txt.substr(del);
continue;
}
}
-->
</script>
<style type="text/css">
#div_B {
display:none;
}
#div_D {
display:none;
}
.inverse_aff {
cursor:pointer;
text-decoration:underline;
}
#conteneur {
margin-top:2em;
padding:2em;
border:3px solid green;
visibility:hidden;
}
#conteneur div {
border:1px solid #CCCCCC;
}
</style>
</head>
<body onload="InitShowDiv('conteneur')">
<p class="inverse_aff" onclick = "ShowDiv('conteneur')">Afficher / masquer Tout</p>
<div id = "conteneur">
<p class="inverse_aff" onclick = "ShowDiv('div_A')">Afficher / masquer div A</p>
<div id = "div_A" >AAAAAAAAAAAAA </div>
<p class="inverse_aff" onclick = "ShowDiv('div_B')">Afficher / masquer div B</p>
<div id = "div_B" ><img src="PHOTO/bimbo.jpg" alt="" width="137" height="405" /> </div>
<p class="inverse_aff" onclick = "ShowDiv('div_C')">Afficher / masquer div C</p>
<div id = "div_C" >CCCCCCCCCCCCC </div>
<p class="inverse_aff" onclick = "ShowDiv('div_D')">Afficher / masquer div D</p>
<div id = "div_D" >DDDDDDDDDDDDD </div>
<p class="inverse_aff" onclick = "ShowDiv('div_E')">Afficher / masquer div E</p>
<div id = "div_E" >EEEEEEEEEEEEE </div>
</div>
<p>Autre bloc de texte</p>
</body>
</html>[/code]
Cela ne supprime pas totalement le pb mais le rend moins visible (et suppose que tu mette des div dans un conteneur comme dans cet exemple).
Mais bon comme je l'ai dit plus haut, ce pb d'affichage n'est quasiment pas perceptible au chargement de la page mais seulement en cas de rafraichissement et encore uniquement avec IE (sous FF je n'observe pas ce pb) donc... [url=http://forum.phpfrance.com/faq-tutoriels/afficher-masquer-div-memoriser-son-etat-javascript-t251830.html]le code original[/url] qui ne nécessite pas un div conteneur est plus souple d'emploi :wink:
