Hide div with jquery and cookies not hiding properly

Question

So I'm using this script:

$(document).ready(function() {
  if ($.cookie('noShowWelcome')) $('.welcome').hide();
  else {
    $("#close-welcome").click(function() {
      $(".welcome").fadeOut(1000);
      $.cookie('noShowWelcome', true);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>

<div class="welcome">
</div>

To show the div "welcome" only the first time a user visits my website and then to hide it forever.

For the cookies I used jQuery.cookie javascript as suggested in this post:

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

Everything works great. The only problem is that I still can not figure out how to avoid the hidden div flashing for a second and then hiding when users visit my website after closing the div "welcome". Can somebody help me with that?

Thank you. I have tried that but display:none; hides the div even the first time the user visits my website. How can i avoid that? — John Grischam, Sep 27 '18 at 10:28

DenseCrab · Answer 1 · 2018-09-27T10:28:58.493

1

Give it attr "hidden" by default and just show it when you need to.

$(document).ready(function() {
    if (!$.cookie('noShowWelcome')){
        $('.welcome').show();
        $("#close-welcome").click(function() {
           $(".welcome").fadeOut(1000);
           $.cookie('noShowWelcome', true);    
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome" style="display:none;">
Welcome
  </div>

edited Sep 27 '18 at 10:28

answered Sep 27 '18 at 10:24

DenseCrab

1,273
11
22

Thank you. I have tried that but display:none; hides the div even the first time the user visits my website. How can i avoid that? – John Grischam Sep 27 '18 at 10:28
@JohnGrischam I have answered that for you. – Praveen Kumar Purushothaman Sep 27 '18 at 10:29
if (!$.cookie('noShowWelcome')) $('.welcome').show(); – DenseCrab Sep 27 '18 at 10:30
if (!$.cookie('noShowWelcome')) $('.welcome').show(); is not showing div. it still remain hiden – John Grischam Sep 27 '18 at 10:44

Praveen Kumar Purushothaman · Accepted Answer · 2018-09-27T10:57:34.637

1

For the FOUC, what you need to do is to use a small script to convert everything from CSS / Properties into JavaScript. For browsers that do not support hidden property, you can use:

$(function () {
  $(".hide-me-by-js").hide().removeClass("hide-me-by-js");
  // Write your other conditional logic here...
});

.hide-me-by-js {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide-me-by-js">Initially Hidden</div>

If you want to leverage the new hidden property (at a cost of browser compatibility), use the following:

$(function () {
  $("[hidden]").hide().removeAttr("hidden");
  // Write your other conditional logic here...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>Initially Hidden</div>

Solution

In your case, it would be typically this:

$(function() {
  $(".hide-me-by-js").hide().removeClass("hide-me-by-js");
  // Write your other conditional logic here...
  if ($.cookie('noShowWelcome'))
    $('.welcome').hide();
  else {
    $('.welcome').show();
    $("#close-welcome").click(function() {
      $(".welcome").fadeOut(1000);
      $.cookie('noShowWelcome', true);
    });
  }
});

.hide-me-by-js {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
<div class="hide-me-by-js welcome">Initially Hidden</div>

Note: The demo will not work because the stack snippets iframe is sandboxed. Please just use the code and check in your system.

Added a Fully Working Code Demo.

edited Sep 27 '18 at 10:57

answered Sep 27 '18 at 10:28

Praveen Kumar Purushothaman

164,888
24
203
252

1

@AlivetoDie `Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.` So it's not our problem... – Praveen Kumar Purushothaman Sep 27 '18 at 10:34
oh noah! (thats why it's better to use jsfiddle that is so badly unrecommended lately) – Flash Thunder Sep 27 '18 at 10:37
@FlashThunder True that, but the problem is they aren't indexed or versioned. `:(` – Praveen Kumar Purushothaman Sep 27 '18 at 10:39
Is not working. It flashes the div for a second and then it hides even the first time. – John Grischam Sep 27 '18 at 10:46
@JohnGrischam I am unable to replicate that. Does it flash in the snippet above? – Praveen Kumar Purushothaman Sep 27 '18 at 10:46
So the first visit div disappears after flashing for a second then flashes on every page as it previously flashed – John Grischam Sep 27 '18 at 10:50
@JohnGrischam Works fine for me here: http://output.jsbin.com/nadawahofo/1. Since you don't have the full HTML, the close button is what sets the cookie... – Praveen Kumar Purushothaman Sep 27 '18 at 10:54
@JohnGrischam Fully working code: **http://output.jsbin.com/retavuzitu/1**. – Praveen Kumar Purushothaman Sep 27 '18 at 10:57
Thank you for your help but flashing remains the same. I can not get rid of flashing for a second every time a new page or post is clicked. – John Grischam Sep 27 '18 at 11:01
@JohnGrischam Are you finding the flashing on the snippet or the code I have used or the link I have sent you? Confirm me that. Coz I am on a low end machine as well as a decent android mobile and I cannot find the flashing at all. Have you added the CSS too? – Praveen Kumar Purushothaman Sep 27 '18 at 11:03
It works perfectly. Thank you very much sir. I gave wrongly a block style to the welcome div which was overriding display none. – John Grischam Sep 27 '18 at 12:32
@JohnGrischam Ha ha... Glad that it helped you. Have a nice day. – Praveen Kumar Purushothaman Sep 27 '18 at 12:50

Hide div with jquery and cookies not hiding properly

2 Answers2

Solution