0

I need some help implementing jQuery cookies. I made a masonry grid in codepen where you can minimize and maximize the div blocks. 

<div class="container">
    <br>
    <div class="row">
        <div id="panel1" class="col-xs-6 col-lg-4">
           <div id="title"><b>Block 1</b>
            <div class="button" onclick="Close1()">-</div>
        </div>
          1</div>
        <div id="panel2" class="col-xs-6 col-lg-4 tall">
           <div id="title"><b>Block 2</b>
            <div class="button" onclick="Close2()">-</div>
        </div>
          2</div>
        <div class="col-xs-6 col-lg-4">3</div>
        <div class="col-xs-6 col-lg-4 tall">4</div>
        <div class="col-xs-6 col-lg-4 taller">5</div>
        <div class="col-xs-6 col-lg-4">6</div>
        <div class="col-xs-6 col-lg-4 tall">7</div>
        <div class="col-xs-6 col-lg-4">8</div>
        <div class="col-xs-6 col-lg-4">9</div>
        <div class="col-xs-6 col-lg-4 taller">10</div>
    </div>
</div>


   <div id="footer">
    <div id="icon1" class="icon" onclick="Open1()">Open 1</div>
    <div id="icon2" class="icon" onclick="Open2()">Open 2</div>

     </div


$('.row').masonry({
  itemSelector : '.col-xs-6'
});




        "use strict";


 // End of what's configurable.
        var clicked = null;

        var pane = document.getElementById('panel1');


        function Close1() {
            document.getElementById("panel1").style.opacity = "0";
            document.getElementById("panel1").style.display = "none";
            document.getElementById("icon1").style.display = "inline-block";
        }

        function Open1() {
            document.getElementById("panel1").style.opacity = "1";
            document.getElementById("panel1").style.display = "block";
            document.getElementById("icon1").style.display = "none";
        }


        function Close2() {
            document.getElementById("panel2").style.opacity = "0";
            document.getElementById("panel2").style.display = "none";
            document.getElementById("icon2").style.display = "inline-block";
        }

        function Open2() {
            document.getElementById("panel2").style.opacity = "1";
            document.getElementById("panel2").style.display = "block";
            document.getElementById("icon2").style.display = "none";
        }

https://codepen.io/ariellbell/pen/bQMyOX

I want to be able to store these settings using jquery cookies (and/or html web storage) and after the user clicks on the button maybe add an (ajax) refresh setting to reorganize the div blocks in the masonray.

I am new to using jquery (and also cookie settings). So i have difficulty implementing this in the code.

Any help is appreciated! Thanks

So i made a new pen with cleaned up jquery functions and added the cookies. However the cookies work partly. I have trouble setting it for multiple divs.

What goes wrong? 

if(Cookies.get("cohide")=="Enabled"){
  $(".block1").addClass('minimalize');
   $(".icon").addClass('inline');
}
if(Cookies.get("coshow")=="Enabled"){
  $(".block1").removeClass('minimalize');
     $(".icon").removeClass('inline');
}



        "use strict";


 // End of what's configurable.
    //var clicked = null;

$('.block1').click(function(){


    // remove set darkmode cookie, add lightmode cookie
    Cookies.remove('coshow');
    Cookies.set('cohide', 'Enabled');

    $(this).addClass('minimalize');
 var id1 = $(this).data().value;
     //var y = document.getElementById(id1);
  document.getElementById(id1).classList.add("inline");
     console.log("Setted Cookie cohide");


});

$('.icon').click(function(){

  Cookies.remove('cohide');
   Cookies.set('coshow', 'Enabled');

    $(this).removeClass('inline');
 var id2 = $(this).data().value;

    document.getElementById(id2).classList.remove("minimalize");
 // document.getElementById(id1).style.display = "inline";
      console.log("Setted Cookie coshow");
});

https://codepen.io/ariellbell/pen/jQKYaz

Missblues
  • 101
  • 10
  • what have you tried so far? – Hamza Haider Nov 25 '18 at 07:51
  • i did a lot of searching. There are lots of examples with cookie and toggleclass or add /remove classes. But i have difficulty to add the extra class on the menu link as well in the cookie – Missblues Nov 25 '18 at 07:55
  • https://stackoverflow.com/questions/1599287/create-read-and-erase-cookies-with-jquery and (function(){if(readCookie(name)){Open2();}})(); – Choo Hwan Nov 25 '18 at 08:02
  • i rewrote the original jquery to make everything shorter and not double. Just 2 click functions for multiple divs https://codepen.io/ariellbell/pen/WYybEM however i still need to implement the cookie. – Missblues Nov 25 '18 at 17:01

0 Answers0