Guardar cambios css con jquery mientras navega por la web

[neodani]

Buenas,

Tengo varios apartados en el sidebar de la pagina, con su cabecera y lista ul y li. De estos "modulos" tengo varios por todo el sidebar. Le he añadido una la propiedad toggle y ahora cuando se pulsa encima del titulo del apartado se encojen y si vuelves a pulsar se expanden

El problema que tengo es que cuando el usuario cambia de página el "efecto seleccionado" (ej. si el apartado del sidebar estaba encogido) desaparece al recargar la página y vuelve a estar como en su estado inicial, expandido...
Me interesa conservar esos cambios mientras el usuario navegue por la página.

¿Sabéis de que forma lo puedo hacer? con cookie? con sesiones? cual es la mejor forma?

Muchas gracias de antemano!

[chichote]

bueno hay muchas maneras, podria ser con las q mencionas, o bien capturando la url de la web q se esta ejecutando, y con jquery en el document ready hacer un simple if y aplicar toggle o bien show, q se yo al div o lista especifica.

saludos.

[neodani]

Creo que la que veo más viable es la de las cookies, le daré un par de vueltas a ver cómo puedo implementarlo.

Gracias

[neodani]

Muy buenas,

Estoy intentado trabajar con cookies y jquery para conseguir guardar el estado de unos desplegables cuando el usuario cambia de pagina pero no lo consigo, agradecería que alguien me echase un mano.

Ya me he bajado la libreria jquery.cookie.js https://github.com/carhartl/jquery-cookie y se crear cookie básicas y leerlas pero no como lo quiero hacer.

Tengo varios widgets así los llamo, que no son mas que capas independientes en el sidebar de la página. Y con un toggle hago que se encoja la información de estos widgets. Me interesa guardar el estado de los widgets de la página para que si el usuario navega por otra sección, los widgets se muestren tal y como los dejó el usuario en la página anterior.

Código Javascript:

$("#widget1 p").click(function(){
        $("#widget1 ul.toggle").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
    $("#widget2 p").click(function(){
        $("#widget2 ul.toggle").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
    $("#widget3 p").click(function(){
        $("#widget3 ul.toggle").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
 

Cómo puedo almacenar el estado de ellos, si la propiedad que tengo es toggle, si creo dentro de ahí una cookie me guardará el estado cada vez que se pulse pero como se yo que está desplegado o encogido, no veo la forma.

Me podéis ayudar?

Muchas gracias de antemano

[neodani]

Lo he conseguido de forma individual

Código Javascript:

$("#widget1 p").click(function(){
        $("#widget1 ul.toggle").toggle("fast");
        $(this).toggleClass("active");
        $.cookie('show_widget1', 
                $(this).is(".active") ? 'expanded' : 'collapsed');
        return false;
    });
 

El problema es que no quiero crear 1 cookie por cada widget sino agregar de alguna forma un array así

opciones_widget=
widget1:expanded,widget2:collapsed,widget3:expande d,widget4:expanded

¿De qué manera me aconsejáis?

Muchas gracias

[tredio]

prueba poniendo la clase "widget" a todos los widgets y prueba algo asi:

Código Javascript:

var saveCookie = function(){
    var widgetsEstate = [];
    $('.widget').each(function(i,elem){
        var widget = $(elem);
        widgetsEstate.push( elem.attr('id') + ':' + (widget.is(".active") ? 'expanded' : 'collapsed') ) );
        $.cookie('show_widget', widgetsEstate.join(','));
    });
} 
 
$(".widget p").click(function(){
        $("ul.toggle", this).toggle("fast");
        $(this).toggleClass("active");
        saveCookie();
        return false;
    });
 

[neodani]

Hola tredio, muchas gracias por tu comentario

Lo estoy intentando pero me da un error de sintaxis en la consola del firebug que no consigo solucionar.

missing ; before statement
widgetsEstate.push( elem.attr('id')...ve") ? 'expanded' : 'collapsed') ) );

Lo tengo de la siguiente manera

Código Javascript:

var saveCookie = function(){
        var widgetsEstate = [];
        $('.boxSidebarNEW').each(function(i,elem){
            var widget = $(elem);
            widgetsEstate.push( elem.attr('id') + ':' + (widget.is(".active") ? 'expanded' : 'collapsed') ) );
            $.cookie('show_widget', widgetsEstate.join(','));
        });
    }; 
 
    $(".boxSidebarNEW p").click(function(){
            $("ul.toggle", this).toggle("fast");
            $(this).toggleClass("active");
            saveCookie();
            return false;
        });
 

He puesto .boxSidebarNEW porque así es como se llama la clase de los widgets que te pego su estructura html para que los veas

Código HTML:

<div id="widget1" class="boxSidebarNEW">
            <p class="head">Articulos populares</p>
            <ul class="toggle">
                <li><a href="#">Articulo 1</a></li>
                <li><a href="#">Articulo 2</a></li>
                <li><a href="#">Articulo 3</a></li>
            </ul>
        </div>
 
        <div id="widget2" class="boxSidebarNEW">
            <p class="head">Comentarios recientes</p>
            <ul class="toggle">
                <li><a href="#">Comentario 1</a></li>
                <li><a href="#">Comentario 2</a></li>
                <li><a href="#">Comentario 3</a></li>
            </ul>
        </div>
        
        <div id="widget3" class="boxSidebarNEW">
            <p class="head">Articulos al azar</p>
            <ul class="toggle">
                <li><a href="#">Articulo 1</a></li>
                <li><a href="#">Articulo 2</a></li>
                <li><a href="#">Articulo 3</a></li>
            </ul>
        </div>
 

Muchas gracias de antemano

[neodani]

El error de depuración lo he conseguido solucionar así

Código Javascript:

var saveCookie = function(){
        var widgetsEstate = [];
        $('.boxSidebarNEW').each(function(i,elem){
            var widget = $(elem);
            widgetsEstate.push( elem.attr('id') + ':' + (widget.is(".active") ? 'expanded' : 'collapsed') );
            $.cookie('show_widget', widgetsEstate.join(','));
        });
    }; 
 
    $(".boxSidebarNEW p").click(function(){
        $("ul.toggle", this).toggle("fast");
        $(this).toggleClass("active");
        saveCookie();
        return false;
    });
 

Pero la cookie no me la crea y tampoco me encoje y despliega los items del sidebar al pulsar sobre la cabecera del sidebar :S

Mirando la consola veo que al pulsar sobre el widget me sale el siguiente error:

elem.attr is not a function
widgetsEstate.push( elem.attr('id')...ive") ? 'expanded' : 'collapsed') );

Pude haber cambiado algo en la depuración anterior? :S

Gracias de antemano!

[neodani]

Más datos para haber si encontramos el fallo.

Esta trozo no funciona del todo porque solo me hace el toggleclass, no me hace el toggle de la lista.

$(".boxSidebarNEW p").click(function(){
$("ul.toggle", this).toggle("fast");
$(this).toggleClass("active");
//saveCookie();
return false;
});


<div id="widget1" class="boxSidebarNEW">
<p class="head active">Articulos populares</p>
<ul class="toggle">
<li><a href="#">Articulo 1</a></li>
<li><a href="#">Articulo 2</a></li>
<li><a href="#">Articulo 3</a></li>
</ul>
</div>

Creo que el error del post anterior seguirá existiendo pero solucionar este comportamiento también es necesario. No entiendo porque no funciona el toggle.

Muchas gracias de antemano

[tredio]

Iniciado por neodani

Hola tredio, muchas gracias por tu comentario

Lo estoy intentando pero me da un error de sintaxis en la consola del firebug que no consigo solucionar.

missing ; before statement
widgetsEstate.push( elem.attr('id')...ve") ? 'expanded' : 'collapsed') ) );

ok ahi veo que se me paso un parentesis, el codigo lo escribi aqui mismo sorry por eso.

Iniciado por neodani

Pero la cookie no me la crea y tampoco me encoje y despliega los items del sidebar al pulsar sobre la cabecera del sidebar :S

Mirando la consola veo que al pulsar sobre el widget me sale el siguiente error:

elem.attr is not a function
widgetsEstate.push( elem.attr('id')...ive") ? 'expanded' : 'collapsed') );

trata haciendo esto, ahi tambien se me paso otra cosita

Código Javascript:

widgetsEstate.push( widget.attr('id') + ':' + (widget.is(".active") ? 'expanded' : 'collapsed') );
 

[neodani]

Ahora no veo que de ningún error en la consola ;)

Crea la cookie pero los valores no cambian siempre son los mismos a pesar que voy pulsando encima los widgets

widget1:collapsed,widget2:collapsed,widget3:collap sed,widget4:collapsed,widget5:collapsed

Y el problema de que no se encoje la lista no he conseguido solucionarlo en el código que escribiste.

Código Javascript:

var saveCookie = function(){
        var widgetsEstate = [];
        $('.boxSidebarNEW').each(function(i,elem){
            var widget = $(elem);
            widgetsEstate.push( widget.attr('id') + ':' + (widget.is(".active") ? 'expanded' : 'collapsed') );
            $.cookie('show_widget', widgetsEstate.join(','));
        });
    }; 
 
    $(".boxSidebarNEW p").click(function(){
        $("ul.toggle", this).toggle("fast");
        $(this).toggleClass("active");
        saveCookie();
        return false;
    });
 

Por qué puede ser que no se encoja la lista ul.toggle? quizas porque .boxSidebarNEW p son todos los widgets??

Muchas gracias de antemano

[tredio]

ok me doy cuenta que la clase active se la pones al p, no me habia fijado en eso antes

Código Javascript:

var saveCookie = function(){
        var widgetsEstate  = [];
        $('.boxSidebarNEW p').each(function(i,elem){
            var widget = $(elem);
            widgetsEstate.push( widget.attr('id') + ':' + (widget.is(".active") ? 'expanded' : 'collapsed') );
            $.cookie('show_widget', widgetsEstate.join(','));
        });
    }; 
 
    $(".boxSidebarNEW p").click(function(){
        $("ul.toggle", this).toggle("fast");
        $(this).toggleClass("active");
        saveCookie();
        return false;
    });
 

[neodani]

Gracias tredio

Si lo dejo así tengo que cambiar el id del widget y en lugar de ponerlo arriba en la capa, tengo que ponerlo dentro de las etiquetas <p></p>
Ejemplo: widget1 así funcionaria y el widget2 no funcionaria porque en las cookies no saldría a qué widget está haciendo referencia.

<div class="boxSidebarNEW">
<p id="widget1" class="head">Articulos populares</p>
<ul class="toggle">
<li><a href="#">Articulo 1</a></li>
<li><a href="#">Articulo 2</a></li>
<li><a href="#">Articulo 3</a></li>
</ul>
</div>

<div id="widget2" class="boxSidebarNEW">
<p class="head">Comentarios recientes</p>
<ul class="toggle">
<li><a href="#">Comentario 1</a></li>
<li><a href="#">Comentario 2</a></li>
<li><a href="#">Comentario 3</a></li>
</ul>
</div>

widget1:expanded,:collapsed,:collapsed,:collapsed,:collapsed,:collapsed

El ul.toggle sigue sin funcionar como antes. No se despliega ni encoje.

A qué hace referencia el this?
$("ul.toggle", this).toggle("fast");

En el ejemplo del widget2 funcionaria poniendo
$("#widget1 ul.toggle").toggle("fast");

Pero cómo ha cambiado la forma y ahora el id está dentro del P porque es así cómo guarda el ID del widget en la cookie, ya no puedo aplicarlo

Esto es un lio!

[neodani]

Iniciado por neodani

El ul.toggle sigue sin funcionar como antes. No se despliega ni encoje.

Conseguido!

$(".boxSidebarNEW p").click(function(){
$(this).next("ul.toggle").toggle("fast");
$(this).toggleClass("active");
saveCookie();
return false;
});

Cuando cargo nuevamente la página se mantiene la cookie con los estados, ahora en función de esos estados debería mostrar el widget desplegado o no según toque.

Algun consejo para recorrer esta cookie y mostrar el widget encogido o desplegado?

Muchas gracias de antemano!

[tredio]

has una funcion que separe el contenido de la cookie por comas, luego por ':', si la parte derecha es "active" le agregas la clase al id que te indica la parte izquierda, siendo la parte derecha e izquierda el arreglo que te va a retornar la funcion split cuando separes la cadena por ':'