[TUTO] afficher masquer div et memoriser son etat

19 mars 2010, 00:32

Bonjour,

Suite au tutoriel de AB (faq-tutoriels/afficher-masquer-div-memo ... 51830.html) concernant l'un de mes messages (javascript-ajax/afficher-cacher-une-div ... 51772.html), je me permet de revenir à la charge car un j'ai un gros problème.

En effet, le tuto de AB est certainement plus efficace que ce que je n'aurais fait et rentre exactement dans le contexte pour lequel je l'utilise.
Tout fonctionnait donc bien, mes div se fermaient et s'ouvraient à la guise.

Mais voilà que l'on me demande d'insérer dans le module gallerie photo du site un système LightBox2 (http://www.huddletogether.com/projects/lightbox2/).
Ce que j'ai fait ... mais pour utiliser lightbox, il faut utiliser le framework "prototype.js"

Il s'avère malheureusement que le prototype.js rentre en conflit avec une des parties du code du tutoriel de AB.
Je pense que le framework rentre en conflit avec la fonction "InitShowDiv()" car les div s'ouvrent et se ferment en cliquant sur le bouton [+-] MAIS lorsque l'on rafraichit la page les div ne restent pas en l'état (ils reprennent leur valeur par défaut => display:none).

N'ayant pour ma part que de très maigre connaissances en javascript, je me retourne donc vers vous pour savoir si quelqu'un pouvait m'aider...
Il faut soit modifier le tutoriel de AB, soit effacer ou modifier une partie du code du framework.

La version du framework que j'utilise est dispo ICI : http://www.150.be/temp/prototype.js

Concernant le framework (si le tuto n'est pas adaptable pour éviter de modifier le framework), j'ai repéré une piste (du moins je le crois).
Voir ligne : 1565 à 1584.

Merci pour votre aide,
Raph

19 mars 2010, 01:04

Cela peut être un problème de cookie puisque la mémorisation des états se fait à l'aide d'un cookie.
Ou peut-être la fonction onload qui bug parce qu'un de tes script se l'est appropriée.

Sinon j'ai regardé ton code mais je ne vois ni une des fonctions du tuto ni quelque chose qui ressemble à un appel à ces fonctions...

Enfin bon on va supposer que c'est un conflit de onload, d'ailleurs avec une galerie photo ce serait assez normal qu'elle utilise cet évènement.

Remplace la fonction InitShowDiv du tuto par le code indiqué ci dessous (qui est une fonction identique avec un gestionnaire de chargement) et testes pour voir.

Code : Tout sélectionner

function InitShowDiv () {


        if (window.addEventListener) 
        {
         window.addEventListener("load",InitShowDiv,false);
        }
        else if (window.attachEvent) 
        {
        window.attachEvent("onload",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);     
                        }                      
                }
              
}
InitShowDiv ();

19 mars 2010, 10:38

Hello,

tu pourras peut-être t'inspirer de ça:

http://www.xul.fr/ecmascript/lightbox-css.html

19 mars 2010, 11:17

l'incompatibilité vient bien du load, prototype utilise window.onload pour son usage personel le plus simple étant de wrapper le script de AB à l'intérieur du onload de prototype en remplaçant:

Code : Tout sélectionner

<body onload = "InitShowDiv()">

par

Code : Tout sélectionner

<body>

et en rajoutant une ligne de javascript dans le head en bas après avoir loadé prototype

Code : Tout sélectionner

Event.observe(window, 'load', function() {
 InitShowDiv ();
});

19 mars 2010, 13:08

Salut !

Merci à tous pour vos réponses ... j'ai testé vos sulutions mais asns résultats probants.
Je me suis donc retourné vers une solution lightbox "maison" que j'ai réalisé grace à ce tuto :
http://www.xul.fr/ecmascript/lightbox.html

Merci encore pour tout et votre patience,
raph

19 mars 2010, 15:30

juste en passant, la methode habituellement employée avec prototype pour remplacer le window.onload c'est :

[javascript]
document.observe('dom:loaded', function(){
// et là tu fait tes opérations

});
[/javascript]

ou pour en revenir à ton souci :

[javascript]
document.observe('dom:loaded', InitShowDiv);
[/javascript]

@++

22 mars 2010, 04:03

Salut !

Merci à tous pour vos réponses ... j'ai testé vos solutions mais sans résultats probants.

Effectivement il n'y avait pas que le pb du onload (mon premier post résolvait déjà ce pb).
Mais prototype inscrit des valeurs dans le cookie qui le rende inutilisable même en changeant les fonctions getcookie et setcookie.

Testé également avec prototypev1.6.1 sans plus de succès.

Par contre aucun souci en chargeant jQuery v1.4.2

[TUTO] afficher masquer div et memoriser son etat

Qui est en ligne