11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Qui veut un cookie ?

Salut,

J'ai une liste d'images destinée à un portfolio.

J'utilise un lien permettant de switcher la taille des images, soit normales, soit en miniatures …

J'ai ajouté un cookie pour garder en mémoire le dernier affichage choisi par l'internaute.

Il fonctionne bien … sauf que dans le cas où le dernier affichage choisi aurait été celui des images miniatures (donc pas par défaut), lors de l'affichage de la page il faut cliquer 2 fois (au lieu d'une seule fois) sur le lien afin de switcher à nouveau vers l'affichage normal.

Quelqu'un a t-il une idée pour résoudre ce léger bug ?

Merci d'avance

HTML
<a href="#" class="switch_thumb">Switch Thumb</a>
<div class="selecter">
<div class="selecterBtns">
<ul class="nolist">
<li><a href="#" rel="test1" class="active">Test1</a></li>
<li><a href="#" rel="test2">Test2</a></li>
<li><a href="#" rel="test3">Test3</a></li>
</ul>
</div>
<div class="selecterContent">
<ul class="display">
<li>Projet1</li>
<li>Projet2</li>
<li>…</li>
</ul>
</div>
</div>


JavaScript
<script>
jQuery.cookie = function (key, value, options) {
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '',
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
</script>
<script type="text/javascript">
$(document).ready(function(){
if($.cookie("button")=="thumb_view"){
$('ul.display').addClass($.cookie("button"));
$("a.switch_thumb").addClass("swap");
}else{
$('ul.display').removeClass($.cookie("button"));
$("a.switch_thumb").removeClass("swap");
}
$("a.switch_thumb").toggle(function(){
$(this).addClass("swap"); 
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
$.cookie("button", "thumb_view");  
}, function () {
$.cookie("button", "not_thumb_view");
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
}); 
$.cookie("button", "not_thumb_view");
}); 
});
</script>

Modifié par yank (02 May 2012 - 08:46)
Bonjour,
Il semblerait qu'avec un code comme suit, cela fonctionne :
$("a.switch_thumb").click(function(){
    if($.cookie(name)!="thumb_view") {
        $(this).addClass("swap");
        $("ul.display").fadeOut("fast", function() {
            $(this).fadeIn("fast").addClass("thumb_view");
        });
        $.cookie(name, "thumb_view");  
    }
    else {
        $(this).removeClass("swap");
        $("ul.display").fadeOut("fast", function() {
            $(this).fadeIn("fast").removeClass("thumb_view");
        });
        $.cookie(name, "not_thumb_view");
    }
});
Je ne connais pas vraiment bien JQuery, mais il semblerait que la fonction toggle effectue donc une fois la première fonction, puis la deuxième, puis la première, etc.
Donc au premier click, (premier appel), il rentrait toujours dans la première qui met en miniature.
En n'utilisant qu'une seule fonction, tu peux faire un test dedans pour vérifier la valeur du cookie afin d'agir en conséquence plutôt que de forcer la première action qui ordonnait la mise en miniature...
Salut,
A priori cela vient bien de la fonction toggle.
Modifié par yank (02 May 2012 - 09:54)
Salut,

Si vous choisissez l'affichage en bloc, puis rouvrez le site dans un autre onglet, l'affichage sera bien conservé mais il faut à ce moment cliquer 2 fois pour revenir à l'état initial ce qui n'est pas terrible ...

Merci pour votre aide
Modifié par yank (02 May 2012 - 08:45)
Sujet clos
Aller à