iggyweb iggyweb - 11 days ago 5
Javascript Question

jQuery SlideReveal Won't Show onLoad

I wonder if someone can please help, I am using the jquery.slidereveal.js from 'https://nnattawat.github.io/slideReveal/' the code plugin itself works fine if I click the trigger manually to open and close the menu.

I would however like it to default on page load, to whatever state the user has previously clicked.

For example if they click to show and then navigate to another screen, when the JS loads again I want it to check the last state which is saved to localStorage and if it's true, show the hidden panel automatically.

Please see my code below:

$(document).ready(function () {
var panelOpen = localStorage.getItem("panelOpen");

if (panelOpen == "true") {
$("#slidermenu-bar").slideReveal("show");
}
});

$(function () {
$("#slidermenu-bar").slideReveal({
push: false,
position: "left",
trigger: $(".handle"),
shown: function (obj) {
localStorage.setItem("panelOpen", true);
obj.find(".handle").html('<span class="glyphicon glyphicon-chevron-left"></span> Open');

},
hidden: function (obj) {
localStorage.setItem("panelOpen", false);
obj.find(".handle").html('<span class="glyphicon glyphicon-chevron-right"></span> Close');
}
});
});


If anyone can assist, it would be much appreciated :-)

Answer

You code is real close to be working.

First, from what I know, $(document).ready(function () { and $(function () { both are "on ready" blocks.
If there is a difference between them, it is pretty subtile because I never noticed!

So you can place all your script in the same "ready" block.
Now just instantiate slideReveal on $("#slidermenu-bar") before the check in local storage.

;)