Fullscreen slide-toggle with cookie

Question

I'm working with a slide toggle which is vertical and it's as high the page is, and the same goes for the width. For default, the toggle appears opened. I want that toggle to remain opened even if when refreshing the page. I've read another questions and aswers, and I know I can achieve this by using jquery Cookie (by Klaus H.) I tried understanding this by reading other responses similar to what i'm looking for, but they all contain parts I don't need and i can't differentiate what I really need. I'm still very new at this, so I would really appreciate some of your help!

This is the script till now:

   jQuery(document).ready(function(){
   var r=0, dir=true;
   jQuery(".slide").click(function() {
   dir = !dir;
   r = dir? -1300 : 0;
   jQuery(this).stop().animate({left: r+'px'}, 800);
   });
   });

This is the css

.blunt {
background: #fff;
height: 100%;
position: fixed;
top: 0;
width: 1356px;
z-index: 999;
}

.slide {
background: #fff;
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}

This ones where questions and answers I tried to understand:

Here the code I have

If you need more explanation, I will be glad to go and give it another try (since english it's not my native tongue). Thank you very much!

Which part do you need help on? setting and reading the cookie? :) — Spaceman, Nov 23 '15 at 23:40
Yes, I'm sorry, I didn't make it clear! Yes, I need to know how to set it! Thanks for taking a look at this! — Andréade Ylönen, Nov 23 '15 at 23:41

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

So for one I would use local storage as it seems you only want to deal with client side data. See here: Local Storage vs Cookies.

And to set it use the following.

localStorage[key] = value

To get the value use.

localStorage[key];

In your case something like.

$(function(){ // Page Load Function
    var defaultToggleState = true;
    var localStorageValue = localStorage["displayToggled"];
    // if localStorageValue not set then use default
    var displayToggled = localStorageValue === undefined ? defaultToggleState : localStorageValue;

    if(displayToggled){
        // DO STUFF
        // DEPENDING ON STUFF SET localStorage["displayToggled"] to a value.
    }
})

I have a added a working example here.

https://jsbin.com/pubobekuze/edit?js,output

Another more in depth example

$(function(){ // Page Load Function
    var defaultToggleState = true;
    var localStorageValue = localStorage["displayToggled"];
    // if localStorageValue not set then use default
    var displayToggled = localStorageValue === undefined ? defaultToggleState : localStorageValue;
    // Now get the page load offset value
    var rightValue = displayToggled === "true" ? 0 :-280;
    // Now set the page load offset
    $("#slide").css({left: rightValue+'px'});

    // Bind the click event
    $("#slide").click(function() {
        // Get Value
        var localDisplayToggled = localStorage["displayToggled"];
        // Invert or Default
        localStorage["displayToggled"] = localDisplayToggled === undefined ? 
            false : 
            (localDisplayToggled === "true" ? false : true);
        // Get Value again as it has changed
        localDisplayToggled = localStorage["displayToggled"];

        var rightValue = localDisplayToggled === "true" ? 0 : -280;
        $(this).stop().animate({left: rightValue+'px'}, 800);
    });
});

edited May 23 '17 at 11:51

Community

1
1

answered Nov 23 '15 at 23:51

Spaceman

1,181
11
38

(I'm sorry, I'm really an amateur at this) So... do I have to add this code to the one I showed above? – Andréade Ylönen Nov 24 '15 at 00:19
@AndréadeYlönen So whats happening in my example above is on page load we check if we have a value storage if we do we use it otherwise we use the default. In this case the value is a boolean. So the if statement should contain your code to toggle the item you want toggled. And on your toggle event you should bind it to set the localStorage value to true or false, so next time the page is loaded it will remember what state it should be in :). – Spaceman Nov 24 '15 at 00:22
@AndréadeYlönen I have added a working example above – Spaceman Nov 24 '15 at 00:36
After taking my good time looking at the code, I think I understand what you mean. But I can't help but wonder if I explained myself wrong. Because indeed, that's the result I want to achieve! But I want to apply that to the "slide" box. Look at the link I added to my original post "Here the code I have" (Sorry if i'm being an idiot, this is my first time asking something) – Andréade Ylönen Nov 24 '15 at 02:34
@AndréadeYlönen Check out https://jsbin.com/xanijeyoye/2/edit?js,console this I think is a complete working example of what you want.. i think – Spaceman Nov 24 '15 at 03:40
OH MY GOD. YES. I'm sorry for being a total idiot, but wow, thank you very much. I'm so happy :') I will marry you, thank you! – Andréade Ylönen Nov 24 '15 at 04:48
@AndréadeYlönen ha! unfortunately for you i'm already married :P. If there is any part you don't understand don't hesitate to ask. I can expand on any part of the explination. – Spaceman Nov 24 '15 at 04:55

Fullscreen slide-toggle with cookie

1 Answers1