0

I have this text banner on my site. I want it to show it only to new visitors using cookies. I have very little knowledge of JS so please help me how can I show it to only first-time visitors.

I am using it on Discourse-based this Android forum site which is already built on Node.js.

<style>
.top  {
  background: linear-gradient(to right, #141517, #6A9113);
    border-radius: 10px;
    font-size: 20px;
    color: white;
    opacity: 0.9;
    text-align: center;
    padding: 25px;
    line-height: 30px;
    margin: 10px 0px 30px 0px;

}
</style>


<div class="top">
Welcome to the forum. This is demo text.
</div>
Hamza Ahmad
  • 71
  • 1
  • 1
  • 10

2 Answers2

0

Go for this code:

.top should be by default display: none;

$(document).ready(function() {
     var visited = $.cookie("visited")
     if (visited == null) {
         $('.top').show();
         alert($.cookie("visited"));         
     }
     $.cookie('visited', 'yes', { expires: 1, path: '/' });
});
Felix Haeberle
  • 1,530
  • 12
  • 19
0

Here is the full code... Working demo https://jsfiddle.net/hdas2012/6yjo346k/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div class="top">
<h2>You will only see it once</h2>
  Welcome to the forum. This is demo text.
</div>

<script>
    $(document).ready(function(){
      if(!$.cookie('welcomeMsg')){
        $(".top").show();
        $.cookie('welcomeMsg', 'Y', { expires: 365*3 });
      }
    });
</script>
<style>
    .top  {
      background: linear-gradient(to right, #141517, #6A9113);
        border-radius: 10px;
        font-size: 20px;
        color: white;
        opacity: 0.9;
        text-align: center;
        padding: 25px;
        line-height: 30px;
        margin: 10px 0px 30px 0px;
        display: none;
    }
</style>
Hari Das
  • 10,145
  • 7
  • 62
  • 59
  • But it didn't work for me, as I earlier said Discourse is fully built with JS libraries so maybe there are some conflicts. Is it possible to do it only with Javascript instead of Jquery? – Hamza Ahmad Apr 25 '17 at 17:01