1

I am working on a project which has 2 pages.

1) Index and 2) Settings

I have button to close an element and hide it on Settings page. The issue is, I want to hide the elements on Index page when I click on close in Settings page and select save. I am unable to achieve the same. Any help would be appreciated. Most of the solutions I found are just re-directing to other page using Jquery but I want to trigger an event and not just re-direct.

I have created a codepen for the same : http://codepen.io/crazycoder775/pen/pNYJOw

  $(".list_sbar li").click(function(e) {
    if ($(this).outerWidth() - 34 <= e.offsetX)
        $(this).remove();
});
$(".list_sbar li").click(function(e) {
    if ($(this).outerWidth() - 34 <= e.offsetX)
        $(this).remove();
});
$(document).ready(function(){
    $("#hide").click(function(){
        $(".test1").hide();
    });
    $("#show").click(function(){
        $(".test1").show();
    });
});
$(document).ready(function(){
    $("#hide2").click(function(){
        $(".test2").hide();
    });
    $("#hide3").click(function(){
        $(".test3").hide();
    });
});

In the above codepen, I have 3 div's and 2 close buttons, on click on any close button, the respective div will be appended a hide class.

coderakki
  • 260
  • 1
  • 4
  • 13
  • I didn't got your question. actually you want hide a div while clicking a close button?? – Sarath Kumar Dec 31 '16 at 08:23
  • Yes, I want to close a div when the close button is clicked. You can check the same in the above codepen but currently both the events are on the same page. I want them to be on different pages. – coderakki Dec 31 '16 at 08:29

1 Answers1

1

You could combine a cookie value (which can be set when the close button is clicked) with $(window).focus event listener that checks the cookie value and hides or reveals the element based on the value when the index page is focused.

Cookies documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Try the following: 

  $(document).ready(function(){
    if( document.cookie.indexOf('element_closed=')== -1){
        document.cookie = 'element_closed=false; path=/';
     }
    // document.cookie = "element_closed=true"; // uncomment to test focusing window with element hidden
    // used to get an individual cookie by name
    // from http://stackoverflow.com/questions/10730362/get-cookie-by-name
    function getCookie(name) {
      var value = "; " + document.cookie;
      var parts = value.split("; " + name + "=");
      if (parts.length == 2) return parts.pop().split(";").shift();
    }

    function hideElement(){
      $(".toggle_target").hide();
      document.cookie = 'element_closed=true; path=/'
      console.log(document.cookie);
    }

    $(window).focus(function(){
      //console.log(document.cookie);
      console.log(getCookie('element_closed'));
      if(getCookie('element_closed') == 'true'){
        hideElement();
      }
    });

    $(".toggle").on('click', function(e){
      e.preventDefault();
      hideElement();
    });
  });

Working jsfiddle: https://jsfiddle.net/b1nyczht/20/

Seb Cooper
  • 564
  • 2
  • 13
  • Thank you for your effort. I am trying with JS cookie but yet to fix it. Will try and see if this can help. https://github.com/js-cookie/js-cookie – coderakki Dec 31 '16 at 08:45
  • Will look forward to your code. I am trying in the mean time and will update if I got the answer – coderakki Dec 31 '16 at 09:06
  • Correction - that code need adjustment, will comment when done. – Seb Cooper Dec 31 '16 at 09:15
  • Thank you for the code. Now I have some questions for you. The code is working fine on the same page but how to use them on separate pages? From your jsfiddle code, I am using div tag on index page and a tag on settings page. I tried the script on both the pages but it is not working. Don't we have to define the path of other page we are trying to trigger the event on ? – coderakki Dec 31 '16 at 09:43
  • Updated code the set a path property on the cookie. – Seb Cooper Dec 31 '16 at 10:02
  • Updated with check for cookie set before setting to false. – Seb Cooper Dec 31 '16 at 10:16