Bonjour,
j'ai trouvé un code pour afficher/masquer un DIV et mémoriser son état en Javascript.
Je l'ai mis en application, par contre j'ai un soucis. Un texte 'indésirable' s'affiche en haut de page depuis le code php:
$value) echo $key. ' = ' .$value. '
'; } } ?>
Malgré cela le code fonctionne très bien, pour preuve:
http://www.patissierconsultant.com/a1.html
En effaçant les lignes 18 et 19, j'arrange le problème, mais je ne connais pas assez le php pour savoir si cela peut avoir une répercussion. Voici les 2 lignes en questions:
foreach ($tab_affiche_div as $key => $value)
echo $key. ' = ' .$value. '<br />';
Et voici le code complet:
Modifié par thomas67 (02 Aug 2013 - 14:30)
j'ai trouvé un code pour afficher/masquer un DIV et mémoriser son état en Javascript.
Je l'ai mis en application, par contre j'ai un soucis. Un texte 'indésirable' s'affiche en haut de page depuis le code php:
$value) echo $key. ' = ' .$value. '
'; } } ?>
Malgré cela le code fonctionne très bien, pour preuve:
http://www.patissierconsultant.com/a1.html
En effaçant les lignes 18 et 19, j'arrange le problème, mais je ne connais pas assez le php pour savoir si cela peut avoir une répercussion. Voici les 2 lignes en questions:
foreach ($tab_affiche_div as $key => $value)
echo $key. ' = ' .$value. '<br />';
Et voici le code complet:
<?php
header('Content-type: text/html; charset=UTF-8');
$fichier_courant = substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'));
$name_cookie = $fichier_courant == '/index' ? $_SERVER['SERVER_NAME'] : $fichier_courant;
if(isset($_COOKIE[$name_cookie]))
{
$cookie_affiche_div = (get_magic_quotes_gpc())? stripslashes($_COOKIE[$name_cookie]) : $_COOKIE[$name_cookie];
$tab_affiche_div = unserialize($cookie_affiche_div);
if(is_array($tab_affiche_div))
{
natsort($tab_affiche_div);
foreach ($tab_affiche_div as $key => $value)
echo $key. ' = ' .$value. '<br />';
}
}
?>
<!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 () {
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);
}
}
}
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;
}
#conteneur div {
border:1px solid #CCCCCC;
}
</style>
</head>
<body onload = "InitShowDiv()">
<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" >BBBBBBBBBBBBB </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>
Modifié par thomas67 (02 Aug 2013 - 14:30)
