Bonjour,

Je reviens vers vous pour une toute nouvelle histoire ... En effet, il y a quelques temps j'avais demandé pourquoi mes div ne voulaient pas se cacher : javascript-ajax/creation-une-fonction-s ... 51644.html

A l'époque du message c'était parce que je n'appelais pas correctement la fonction: étant donné que je faisais un PHP ECHO du code HTML et javascript il a fallu que je mette des " \ " pour que l'appel se fasse correctement.

J'avais 'développé' une fonction me permettant d'afficher ou cacher une div par simple clic.
Fonction que j'ai revu depuis grâce au message de Truc.

Voici donc la fonction (made by Turc) que j'utilise actuellement pour afficher / cacher une div :

function showHide (id)
{
      //recuperation de l'etat actuel de l'element et affectation de son opposé
      var showHide = (document.getElementById(id).style.display == 'none' ) ? 'block' : 'none';
      //nouvelle valeur pour l'element id
      document.getElementById(id).style.display = showHide
}

//appel
showHide("documentDetailContainer");
showHide("optionsDetailContainer");

Maintenant, je suis confronté à un problème car il faudrais que le système puisse garder en mémoire les div fermés pour qu'ils restent fermés même après un refesh de la page.

Le truc, c'est que par défaut, TOUS les div doivent s'afficher.
Si un utilisateur clique pour cacher ou afficher une DIV, son état (display:none ou block) doit rester en mémoire même après POST d'un formulaire ou resfresh simple de la page.

Le gros truc ... pour ne pas dire "turc", c'est que je ne sais pas comment faire pour y parvenir...
Comme d'hab, je me demandais si des personnes pouvaient m'aider en postant quelques codes d'exemple commentés pour que je puisse réaliser la fonction par moi-même.

Toutes les contributions, explications, commentaires et suggestions sont franchement les bienvenues.

Merci pour tout,
Raph

Je te conseille de stocker dans un cookie la config de l'utilisateur (identifiant du div + caché ou visible).

Ensuite il va te falloir une fonction loadUserConfig (par exemple) que tu va appeler au chargement de ta page (onload="loadUserConfig();" si tu n'utilise pas de framework Javascript) et qui va récupérer le cookie de configuration pour afficher ou cacher les divs concernés.

Il te faut aussi modifier le code de ta fonction showHide afin d'enregistrer la modification de ta configuration dans le cookie de configuration.

Regarde du côté de JSON pour l'enregistrement des données dans le cookie.

Bon courage.

Si tu veux mémoriser l'état de tes div d'une connexion à l'autre (sur plusieurs jours, semaines ou mois...) il te faut utiliser la méthode décrite par Yosh avec un cookie. Mais si c'est pour la session en cours (tant que le visiteur est connecté sur le site) tu peux aussi utiliser une variable de session.

Tu peux le faire en php
1/ A l'appel de la fonction javascript tu renvoie l'état du div dans un champ de formulaire de type hidden
2/ A la soumission du formulaire par le visiteur, tu enregistre l'état de chaque fenêtre dans une variable de session
3/ Et tu te sert de ces variables de session pour faire afficher ou non tes div tout au long de la session.

A noter qu'avec cette solution l'état de tes div est enregistré lors de la soumission d'un formulaire.

Si tu veux mémoriser l'état d'un div sans que le visiteur ait à soumettre un formulaire il te faut utiliser des cookies javascript (ce qui est beaucoup moins simple).

Voici l'étape 1 avec ta fonction javascript modifiée pour renvoyer les valeurs dans un champ de formulaire :

function showHide (id)
{
      //recuperation de l'etat actuel de l'element et affectation de son opposé
      var showHide = (document.getElementById(id).style.display == 'none' ) ? 'block' : 'none';
      //nouvelle valeur pour l'element id
      document.getElementById(id).style.display = showHide;

     //report des valeurs dans un champ caché du formulaire
     var id_input = id+'_affiche';
     var input;
     if (input = document.getElementById(id_input)) input.value = showHide;


}


//appel
showHide("documentDetailContainer");
showHide("optionsDetailContainer");

...
// inputs à insérer dans ton formulaire
<input type = "hidden"  value="" name = "documentDetailContainer_affiche" id = "documentDetailContainer_affiche"  />
<input type = "hidden"  value="" name = "optionsDetailContainer_affiche" id = "optionsDetailContainer_affiche"  />

Merci pour les infos les gars.
Avez - vous de la doc simple et constructive sur la création et l'utilisation de cookies en javascript ?
Je demande toujours mais je vais faire un tour aussi sur google.

Merci pour tout,
raph

Bonjour,

J'ai trouvé un tuto (exemples) sur la création, la lecture et l'effacement d'un cookie en javascript.
http://www.asp-php.net/tutorial/scripting/cookies.php

Je me demandais maintenant (sans être sûr de ce que je fais et si c'est la bonne solution) comment affecter une variable à un état dans un cookie.
Du style :
- galleryContainer = 1 => voudrait dire que la DIV est ouverte
- galleryContainer = 0 => voudrait dire que la DIV est fermée

En effet, la fonction javascript permettant d'afficher ou cacher une DIV me donne ceci : Comment puis-je affecter le display none à 0 et le display block à 1 dynamiquement (pour l'enregistrer dans un cookie) ?

Sachant que par défaut tous les DIV sont visibles et si un utilisateur clique sur le bouton pour cacher la DIV, la fonction showHide exécute la valeur Display:None et crée une valeur associée à display:none qui est "0" (pour l'enregistrement dans le cookie).

Peut être dois-je simplement enregistrer dans un cookie la valeur de ma DIV simplement (sans chipoter avec des 0 et des 1) ... du style :
galleryContainer = display:none

Ce que je ne comprend pas non plus c'est le principe de fonctionnement de base de la fonction showHide modifiée pour y inclure la gestion cookie.
Comment dois-je procéder pour que :

1. l'utilisateur clique sur le bouton pour afficher ou cacher une DIV
2. la fonction cahe ou affiche la DIV et enregistre le cookie contenant l'état du DIV
3. le cookie doit restituer l'état du (des) DIV lors de la soumission d'un formulaire ou refresh de la page

Je ne sais pas si je suis sur la bonne voie pour la compréhension du fonctionnement mais si vous pouviez m'aider, ce serait franchement cool.


Merci,
Raph

Encore une fois, il faut d'abord définir si tu peux enregistrer tes cookies en php ou non (parce que c'est plus facile tout en étant plus sûr)

C'est à dire définir si l'enregistrement de l'état de tes div se fait à la suite de l'envoi d'un formulaire ou non.
Normalement l'enregistrement d'un état défini par l'utilisateur se fait à sa demande c'est à dire par l'envoi d'un formulaire.

Est-ce que c'est le principe de fonctionnement de ton application ?

Salut et merci à tous pour vos réponses,

Pour l'instant l'état de mes div ne passent pas par un formulaire.
C'est à dire que tous les div concernés s'affichent simplement en display : block.

Il existe néanmois un formulaire dans ma page qui n'est accessible que par l'administrateur.
Ce dernier formulaire est un formulaire de filtrage de données.
Donc les utilisateurs "normaux" n'ont pas accès à ce formulaire, mais il est néanmois nécessaire de pouvoir garder l'état DIV de ce fomulaire en plus des autres DIV.

Comme un exemple vaut mieux qu'un long discours, j'ai créé un utilisateur test qui vous permettrons de voir ou je veux en venir.
Vous êtes logués en tant qu'administrateur temporaire avec droits limités
Bien entendu le site web est en cours de développement et de nombreuses mises à jour de sécurité sont à venir.

Vous remarquerez que à côté du titre de chaque modules il y a un bouton "+ - " qui permet de cacher ou afficher une div
Par défaut tous les div s'affichent. Lorsque tous les DIV sont cachés, mis à part par exemple la galerie photo et que l'on clique sur le diaporama ou sur une photo, les div s'affichent à nouveau alors qu'ils doivent être cachés ==> sauf celui dans lequel on travaille (à savoir la gallerie photo dans cet exemple).
La même chose avec le formulaire de filtrage .

Vous remarquerez également un petit formulaire intitulé "filtrage des options liées".

Les div doivent donc s'afficher ou se cacher selon le choix de l'utilisateur et rester en état même après refresh de la page ou envoi du formulaire "filtrage des options liées" TOUT en étant lié quelque part à la session utilisateur (c'est à dire si le user se déconnecte , le cookie contenant l'état des div s'efface).

Je pense que le cookie doit se créer lorsqu'un utilisateur clique sur le bouton "+ -" (pour réduire ou afficher une div).

Avez vous maintenant une idée plus claire de ce que je tente de faire et pouvez-vous m'aider ?

Merci pour tout,
raph

Oui enfin sur le principe on ne gère pas des affichages différents pour le visiteur depuis une page adminsitrateur avec des display block ou display none car il suffirait au visiteur de faire afficher le code source de la page pour tout voir y compris les display none.

J'espère que j'ai mal compris mais si c'était ton intention il faut revoir ta méthode et faire cette partie sensible (dépendante de l'administrateur qui donne des droits) tout en php : c'est php qui affichera les blocs ou non suivant la valeur d'une variable de session qui autorise les droits - et cela ne passe surtout pas par javascript ou par un cookie.

Pour résumer il faut bien faire la distinction entre les droits que l'administrateur autorise et les choix de configuration de l'utilisateur car la méthode de traitement est totalement différente.

Salut,

Tu as mal compris =D>

Je ne gère pas l'affichage de mes DIV par l'administarteur.
Chaque utilisateurs (y compris l'admin) gère la fermeture / ouverture de ses propres DIV... c'est à dire qu'en fait, la page est la même que tu sois admin ou user (les même noms de div pour tout le monde) ... sauf que l'admin à des "outils en plus" par rapport aux utilisateurs comme le formulaire de filtrage des données. C'est pour ça que j'ai donné un accès Administrateur avec droits limités ... pour que vous puissiez comprendre.

Donc j'en reviens au moutons ... J'ai plusieurs container DIV avec chacun un bouton "+ - " pour cacher ou afficher les div. Le code javascript pour afficher/cacher une div est le même pour tout le monde (admin et user). Je ne désire pas cacher une div pour "sécuriser" les données mais simplement pour faire de "la place" quand j'ai une longue page.

J'en suis à ce stade point de vue javascript :

function showHide (id)
{
      //recuperation de l'etat actuel de l'element et affectation de son opposé
      var showHide = (document.getElementById(id).style.display == 'none' ) ? 'block' : 'none';
      //nouvelle valeur pour l'element id
      document.getElementById(id).style.display = showHide
}

Je désirerai implémenter en javascript une gestion cookies par utilisateur (admin compris car admin est aussi un utilisateur) pour y stocker l'état de mes div.

- Au chargement de la page pour la première fois, tous les DIV s'affichent normalement
- Lorsque un utilisateur (ou administarteur) clique sur un de ses DIV pour par exemple le cacher, le cookies stocke l'état du div et même après refresh ou $_POST d'un formulaire, l'état reste caché. (IDEM pour afficher une DIV.)

Donc en exemple concret, tu te loggue sur le site que j'ai donné, tu réduis tous les DIV sauf par exemple la galerie photo et il faut que tous les DIV SAUF la galerie photo restent cachés même lorsque tu cliques sur une photo ou lorsque tu joues le diaporama.


Ma 1ere question est : Est-ce réalisable aisément ?
Ma 2eme question : Comment faire structurellement pour coder une telle fonction ? comment dois-je procéder ?

Merci pour tout,
Raph

Bonjour tout le monde ...

J'ai trouvé un javascript tout fait pour cacher une DIV avec support de cookies mais il est incomplet et je me demandais si une âme charitable pouvait m'aider à le compléter/modifier ...

<html>
<head>

<script type="text/javascript">

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function setTheDivStyle() {
if(!readCookie('wroteIt')) {
// if cookie not found display the div and create the cookie
document.getElementById("theLink").style.display="block";
createCookie('wroteIt', 'wroteIt', 1);  // 1 day = 24 hours persistence
}
else {
// if cookie found hide the div
document.getElementById("theLink").style.display="none";
}
}
</script>

</head>

<body onload = "setTheDivStyle()">

<div id = "theLink" style="display:block">Your Message Here And You See It Only Once Per 24 Hours</div>

</body>
</html>

Ce script sert à afficher une div et son contenu une fois toutes les 24heures même si on fait un refresh de la page.
Je me suis dit que c'était un bon début et qu'il suffirait de modifier ce script pour arriver à une solution viable pour mon site.

De mon côté je vous ré explique ce que le script modifié doit pouvoir faire :

- Tout d'abord, il faut savoir que tous mes div s'affichent par défaut "display block" lorsque je visite la page pour la première fois.
- Ensuite; lorsque un utilisateur clique sur le bouton [+ -] pour cacher la div (ou l'afficher si elle est cachée), l'état de ce dernier (display:block ou none) doit être enregistré dans un cookie pour restituer les valeurs (display:block ou none) lors d'un refresh de page et ainsi cacher ou afficher le(s) div concerné(s).

Voici le code javascript qui me permet actuellement de cacher/afficher une div

function showHide (id)
{
      //recuperation de l'etat actuel de l'element et affectation de son opposé
      var showHide = (document.getElementById(id).style.display == 'none' ) ? 'block' : 'none';
      //nouvelle valeur pour l'element id
      document.getElementById(id).style.display = showHide
}

Et voici un exemple de DIV de mon site web avec appel de la fonction javascript showHide();
Remarque : j'ai plusieurs div avec différentes ID

// bannerGalleryContainer = CSS affichage image arrière-plan
<div id="bannerGalleryContainer"><a name="photoweb"></a>

// bannerGalleryTitle1 = CSS affichage du titre de la galerie et de son icône
<p class="bannerGalleryTitle1"><img class="home" src="medias/images/icon-photoweb.png" />Ma galerie photo ...</p>

// showhide = CSS affichage et positionnement des icônes (bouton retour accueil et bouton [+ -])
<div id="showhide">
<a href="#home"><img src="medias/images/home.png" /></a>
<a href="#photoweb" onclick="showHide('galleryContainer')"><img src="medias/images/icon-plusmoins.png" /></a> 
</div>
</div>

// galleryContainer = DIV qui doit être caché ou affiché
<div id="galleryContainer">
CONTENU QUI DOIT ETRE AFFICHE OU CACHE
</div>

Voilà, j'espère avoir donné assez de renseignements ...

Merci 1000 fois pour votre aide,
raph

C'est bon, j'ai trouvé comment faire grâce à l'appui de Grisom par Skype ... vive SKYPE !!

Et oui les amis, c'en est fini de mon monologue ... après la réflexion, l'action ...

Voici donc un code permettant de cacher/afficher un ou plusieurs DIV situés sur une page avec gestion du cookie.
Testé sur Firefox 3.6, google chrome et IE8 mais IE8 réclame le mode compatibilité et "déconne sans déconner" (on connais tous micro$oft => micrologiciel pour maximum dollars)

Ce script requiert les éléments suivants :

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

Voici donc la partie Javascript (entre balises <head>):

<script type="text/javascript">

$(document).ready(function(){
 var cookie = $.cookie("hidden");
 var hidden = cookie ? cookie.split("|").getUnique() : [];
 var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date

 // Remember content that was hidden
 $.each( hidden, function(){
  var pid = this; //parseInt(this,10);
  $('#' + pid).hide();
  $("#showhide div[name='" + pid + "']").addClass('add');
 })

 // Add Click functionality
 
 /* // For use this : <div class="showhide" id="div_id">bla bla bla to hide</div>
 // When click on the div ==> hide (actually disabled function)
 $('.showhide').click(function(){
  $(this).hide();
  $("#showhide div[name=" + this.id + "]").addClass('add');
  updateCookie( $(this) );
 });*/
 
 $("#showhide div").click(function(){
  $(this).toggleClass('add');
  var el = $("div#" + $(this).attr('name'));
  el.toggle();
  updateCookie( el );
 });

 // Update the Cookie
 function updateCookie(el){
  var indx = el.attr('id');
  var tmp = hidden.getUnique();
  if (el.is(':hidden')) {
   // add index of widget to hidden list
   tmp.push(indx);
  } else {
   // remove element id from the list
   tmp.splice( tmp.indexOf(indx) , 1);
  }
  hidden = tmp.getUnique();
  $.cookie("hidden", hidden.join('|'), { expires: cookieExpires } );
 }
}) 

// Return a unique array.
Array.prototype.getUnique = function() {
 var o = new Object();
 var i, e;
 for (i = 0; e = this[i]; i++) {o[e] = 1};
 var a = new Array();
 for (e in o) {a.push (e)};
 return a;
}

// Fix indexOf in IE
if (!Array.prototype.indexOf) {
 Array.prototype.indexOf = function(obj, start) {
  for (var i = (start || 0), j = this.length; i < j; i++) {
   if (this[i] == obj) { return i; }
  }
  return -1;
 }
}
</script>

Voici maintenant la partie HTML permettant d'afficher / cacher le DIV (2 exemples de DIV) :

<div id="bannerGalleryContainer"><a name="photoweb"></a>
		 <p class="bannerGalleryTitle1">Ma galerie photo ...</p>
		 <div id="showhide">
		 <div name="galleryContainer"><a href="#photoweb"><img src="medias/images/icon-plusmoins.png" alt="ICONE PLUS ET MOINS" /></a></div>
		 </div></div>

/*<div class="showhide" id="galleryContainer">*/
/*<div id="galleryContainer">*/
PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO (SOMETHING TO HIDE)
</div>

<br /><br /><br />

<div id="bannerVideoContainer"><a name="videoweb"></a>
		 <p class="bannerVideoTitle1">Ma galerie video ...</p>
		 <div id="showhide">
		 <div name="videoContainer"><a href="#videoweb"><img src="medias/images/icon-plusmoins.png" alt="ICONE PLUS ET MOINS" /></a></div>
		 </div></div>

<div class="showhide" id="videoContainer">
VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO (SOMETHING TO HIDE)
</div>

Les div restent cachés suivant l'action de l'utilisateur et sont gérés par 1 cookie que l'on met à jour.


J'espère que ça servira à beaucoups de personnes,

Raph

Dans ton code html tu devrais pourvoir supprimer les id="showhide" qui normalement ne servent à rien et qui rendent ton code invalide (les id doivent être unique dans une même page).

EDIT : Un petit tuto complet et fonctionnel sans utiliser jquery

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" ?


+1 pour AB

Raph

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" ?


+1 pour AB

Raph

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
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... le code original qui ne nécessite pas un div conteneur est plus souple d'emploi