jquery - Using a cookie to save the state of a toggled division -


while i've found same question asked number of times here , on other sites, i've spent hours , hours trying answers work on site no avail; i'm plain stumped. possibly because i'm new javascript, self-taught, , i'm doing in first place try expand skills, i'm missing blatantly obvious else.

in event, on website have div sidebar, , i'm using jquery toggle , adjust parent div compensate absence when it's hidden via button. i'd able use cookie can refresh without returning default state, i've never used cookie before , every tutorial can find on subject , every answer can find similar question has resulted in code plain doesn't work reasons can't figure out.

here's jsfiddle of simplified version of website. (though toggle script isn't working there reason - works on website! missed when simplifying it, can't life of me figure out what.)

the html:

<div class="bgcontainer_center">     <div id="sidebar">         <p>sidebar content</p>     </div>     <div id="wrapper">         <div id="toggle">             <input type="button" value="toggle sidebar">         </div>         <p>main content</p>     </div> </div>

the css:

.bgcontainer_center {     position: relative;     margin-left: auto;     margin-right: auto;     width: auto;     max-width: 500px;     background-color: #ff00ff;     height: 100%; } .bgcontainer_center.clicked {     max-width: 350px; } #sidebar {     float: left;     width: 25%;     max-width: 125px;     background-color: #00ff00;     height: 100%;     left: 0px; } #wrapper {     width: auto;     max-width: 350px;     background-color: #0000ff;     overflow-x: hidden; }

and jquery:

$(document).ready(function () {     $("#toggle").click(function () {         $("#sidebar").toggle("slow");         $(".bgcontainer_center").toggleclass('clicked');     }); });

help me? bonus points if can explain me understand instead of giving me code works - i'm trying learn here! , feel free let me know if i've done else dumb coding.

edit: working version, tweaked function intended: https://jsfiddle.net/eo12xw79/3/

you can use localstorage store state.

see comments inline in code:

$(document).ready(function () {     var sidebarvisible = localstorage.getitem('sidebar') == 'true'; // value localstorage     $('#sidebar').toggle(sidebarvisible); // toggle sidebar, true: show, false: hide     $('.bgcontainer_center').toggleclass('clicked', sidebarvisible); // add class true: add, false: don't add      $("#toggle").on('click', function () {         $("#sidebar").toggle("slow", function () {             localstorage.setitem('sidebar', $('#sidebar').is(':visible')); // save visibility state in localstorage         });          $(".bgcontainer_center").toggleclass('clicked');     }); });

demo: https://jsfiddle.net/tusharj/eo12xw79/2/

localstorage

the localstorage property allows access local storage object. localstorage similar sessionstorage. difference that, while data stored in localstorage has no expiration time, data stored in sessionstorage gets cleared when browsing session ends - when browser closed.

doc: https://developer.mozilla.org/en-us/docs/web/api/window/localstorage


Comments

Post a Comment

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

i have web app developed using google app script htmlservice , html form, populating excel sheet in google drive using spreadsheetapp . , 1 section calling contentservice download data excel file. function doget(e) { // read excel sheet //getappfile(); // render application html template return htmlservice.createtemplatefromfile('index').evaluate() .settitle('go smart') .setsandboxmode(htmlservice.sandboxmode.iframe); } function downloaddoublequatecsvfile() { var sheetid = propertiesservice.getscriptproperties().getproperty('sheetid'); var ss = spreadsheetapp.openbyid(sheetid).getactivesheet(); //var ss = spreadsheetapp.getactivespreadsheet().getactivesheet(); var maxcolumn = ss.getlastcolumn(); var maxrow = ss.getlastrow(); var data = ss.getrange(1, 1, maxrow, maxcolumn).getvalues(); if (data.length > 1) { var csv = ""; (var row = 0; row < data.length; row++) { (var c...
Read more

javascript - Function overwritting -

is there way overwrite function or event handling in function? using addeventlistener, can have many event handlers on element want var test=document.getelementbyid("div"); test.addeventlistener("click",function(){alert("im first");},false); test.addeventlistener("click",function(){alert("im second");},false); // alerts "im first" , after "im second" but if want overwrite function/event example based on client width example this function one() { alert("first"); } function two() { alert("second"); } window.onresize = function() { var test = document.getelementbyid("div"); if (window.innerwidth > 500) { test.onclick = 1 } else { test.onclick = two; } } is possible in javascript? in case use effective little known approach. addeventlistener can accept object property handleevent event handler. in case it's easy overwr...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more