13

I want to show a welcome div only once per user or session. I know that there is Jquery option. Since am a newbie to jquery, I have not been able to resolve it myself. Please help

$(document).ready(function() {
  $("#close-welcome").click(function() {
    $(".welcome").fadeOut(1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome">
  <div>
    <h1>Hello..!<br> Welcome to ABC
    <br>
    </h1>
    <h2>We wish you a Great Day..!</h2>
    <br>

    <h2><a id="close-welcome" href="#">Thank you.. and please take me to the     website</a> </h2>
  </div>
</div>

I want to show this welcome page only once, till the user closes the browser.. Awaiting valuable help

Kld
  • 6,970
  • 3
  • 37
  • 50
Gops
  • 687
  • 2
  • 7
  • 20
  • If you already have a login system attach that info to the login session cookie, otherwise use mkhatib answer and a cookie only for that. Also remember that server-side http only cookies are safer. – Francisco Afonso May 03 '13 at 08:28

3 Answers3

31

Set a cookie.

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

You need to include jQuery.cookie javascript file.

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

consuela
  • 1,675
  • 6
  • 21
  • 24
mkhatib
  • 5,089
  • 2
  • 26
  • 35
  • Hi mkhatib, thanks for a faster response.. I copied the script and given reference to the jquery.cookie.js as indicated by you. However the same is not working.. Did i miss something.. Pls advice – Gops May 03 '13 at 08:34
  • I just noticed that my code was missing the closing parenthesis for the `ready` function. That might have been it. If not, can you check the console if you get any javascript errors? – mkhatib May 03 '13 at 17:59
  • This is the error shown by the console Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'cookie' – Gops May 03 '13 at 18:16
  • That means that you haven't included the jquery.cookie.js file correctly. Try saving it locally and include it in your html. – mkhatib May 03 '13 at 18:50
  • I did exactly what you have told, still there is the issue.The welcome div always shows..if you go to the home page ie index.html – Gops May 03 '13 at 19:12
  • Are you sure you included jquery.cookie.js file? Can you share your index.html code? – mkhatib May 03 '13 at 21:19
  • Thanks a ton... it works now.. Somehow it didnt work locally, but when uploaded to the server it works.. The small issue am facing is when going to the index page, The hidden div flashes for a second and then hide.. Also not working in IE ..! Thanks again for your time and good work – Gops May 04 '13 at 12:30
  • You should probably hide the div by default and only show it if there's no cookie. Basically reversing what I did. Not sure about IE problem. – mkhatib May 04 '13 at 17:01
  • Hi @mkhatib your code is working great but how can the html disappear on the second load/refresh and not clicking it... its because I have an audio in my site and want it to stop playing when it loads/refresh or change page... – Francis Alvin Tan Dec 02 '13 at 01:04
  • In case you want the cookie to expire in 7 days (or any other number of days), change the last line inside the click function to: `$.cookie('noShowWelcome', true, { expires: 7 });` – consuela Nov 26 '14 at 10:59
  • Hi but this code doesnt work on Chrome and safari.It works fine in mozilla and IE –  Feb 18 '15 at 06:22
  • Hi. I love this solution but still can not figure out how to avoid the hidden div flashing for a second and then hiding. Can somebody help me with that? Thank you – John Grischam Sep 27 '18 at 10:05
4

In case your client doesn't eat cookies

You can use sessionStorage, after all that's what they are meant for exactly, keep a collection of data at hand throughout the session.

For best user experience, you should start with initial [wellcomeElement].style.display = "none" property in your existing CSS.

So, the whole procedure would become as simple as...

  1. check if the welcome message has been shown
  2. Show! : Take-no-action!

Done.

Example Code:

  "message" in sessionStorage ? 0 :
  [wellcomeElement].style.display = "block",
  sessionStorage.setItem("message",true);

The code snip can be put, (but more than preferably) in a script-tag right after the welcome message element.

However, for full backward compatibility, you can always fall back to using the session name property as in:

 /message/.test( name ) ? 0 :
 [wellcomeElement].style.display = "block",
 name = 'message';

Regards.

Bekim Bacaj
  • 5,707
  • 2
  • 24
  • 26
1

It's better because we won't see blinking when hiding on fly 

<a href="" id="close-edu" class="waves-effect"><span class="edu" style="display: none;">New</span></a>

jquery

$(document).ready(function() {
    if ($.cookie('noShowEducation')) ;
    else {
        $('.edu').show();
        $("#close-edu").click(function() {
            $(".edu").fadeOut(1000);
            $.cookie('noShowEducation');    
        });

    }
});
Artem Bernatskyi
  • 4,185
  • 2
  • 26
  • 35