jquery fadeout pas une solution

Question

Avec le code ci-dessous je suis en train de fondre quelques divs, mais quand je recharge la page, les divs sont visibles à nouveau. Je ne veux pas que cela arrive; Ce dont j'ai besoin, c'est que si l'utilisateur clique sur un bouton de retour ou sur le lien d'accueil, il devrait revenir au format d'origine, sinon les divs doivent rester cachés lorsque la page est rechargée.

$(document).ready(function() { 
    $("#prodoneid").click(function() { 
     $("#sliderid, .prodcls").fadeOut(250); 
    }); 
}); 

ci-dessous est mon code html

<div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div> 

    <div id="prodtwoid" class="prodcls"> 
    <img src="images/zara/thumbnails/2.png" alt="ZARA"/> 
    </div> 

    <div id="prodthreeid" class="prodcls"> 
    <img src="images/puma/thumbnails/1.png" alt="PUMA"/> 
    </div> 

    <div id="prodfourid" class="prodcls"> 
    <img src="images/hermes/thumbnails/1.png" alt="HERMES"/> 
    </div> 

</div> 

Answer 1

Vous devrez enregistrer le fait que les divs sont cachés soit dans un cookie ou stockage local HTML5 (navigateurs plus récents seulement) et le processus qui a sauvé des informations lors du chargement de la page afin de restaurer la page dans l'état exact précédemment enregistré. Le navigateur ne le fait pas pour vous.

Les pages Web sont normalement sans état sur le client. Ils sont supposés charger le serveur à chaque fois, sauf si vous concevez vous-même un état côté client dans la page. Donc, si vous voulez créer un état côté client, vous devez soit stocker cet état sur le serveur (souvent avec ajax) et remettre cet état dans la page quand il est à nouveau chargé par cet utilisateur particulier. Ou, vous devez enregistrer l'état dans le navigateur local (généralement en utilisant des cookies ou le stockage local HTML5), le récupérer à partir de là lorsque la page est chargée et agir sur elle pour mettre la page dans l'état désiré.

Voici quelques pseudo-code pour utiliser les cookies pour cela:

$(document).ready(function() { 
    /* read the cookie "sliderHidden" and if it's is set to 1, 
     then: */ 
    $("#sliderid, .prodcls").hide(); 


    $("#prodoneid").click(function() { 
     $("#sliderid, .prodcls").fadeOut(250); 
     /* write a cookie called "sliderHidden" set to 1 
      that remembers that that these items are hidden */ 
    }); 
}); 

Pour jQuery, il y a un cookie plug-in qui le rend facile à lire les cookies/écriture.

Answer 2

Vous devrait utiliser fadeOut, mais vous devez également utiliser une technologie comme les cookies, ou HTML5 localStorage si vous voulez faire partie de la technologie de pointe des saignements de sorte que vous pouvez persister le réglage entre les charges de page.

Lorsque vous fadeOut les éléments, vous devez écrire l'état que vous avez choisi de stockage, et au chargement de la page, vous devez vérifier le stockage pour voir si un état antérieur existe; et hide() le div si nécessaire. Vous pouvez en savoir plus sur localStorage here et cookies here. Un jQuery plugin existe qui résume l'interface de cookie de bas niveau, et vous pouvez trouver cela intéressant. En fait, votre meilleure option peut-être regarder this plugin, qui tente d'utiliser localStorage, mais retombe dans les cookies s'ils ne sont pas pris en charge dans le navigateur actuel.

Answer 3

Vous devez utiliser une sorte de cookie pour sauvegarder l'état 'caché' de l'élément. Recherchez le plugin cookie jQuery (http://archive.plugins.jquery.com/project/Cookie).

Answer 4

Hm- HTML est statique!

Je pense que vous devez gérer cela par une session (dépend du langage de programmation) ou un cookie.

Pour le Cookie un coup d'oeil à: this tutorial

Answer 5

Vous pourriez envisager d'utiliser une sorte de variable d'état de session ou un cookie, qui est une solution faible cependant.Votre question n'est pas très claire, mieux serait peut-être de reconsidérer la structure de votre page et/ou le modèle de vue (en supposant que MVC ici?)