0

Trying to create a privacy policy notification bar at the footer of a page and only showing for new visitors. Looking to dismiss the notification on click of acceptance. Right now the bar is showing up fixed at the bottom of page but I can't seem to get the notification bar to dismiss on click.

<span class="banner tracking-banner p-t-1">
<div class="container">
<div class="row">
  <div class="col-sm-10 text-left m-b-1">
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.
  </div>
  <div class="col-sm-2 m-b-1">
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
  </div>
</div>
</div>
</span>

JS

$(".banner").fadeIn("slow").append(".container");
$(".dismiss").click(function(){
   $(".banner").fadeOut("slow");
});
Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
adammm
  • 45
  • 1
  • 4

2 Answers2

3

wrap your code inside document ready function 

$(document).ready(function(){

$(".banner").fadeIn("slow").append(".container");
$(".dismiss").click(function(){
   $(".banner").fadeOut("slow");
});
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="banner tracking-banner p-t-1">
<div class="container">
<div class="row">
  <div class="col-sm-10 text-left m-b-1">
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.
  </div>
  <div class="col-sm-2 m-b-1">
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
  </div>
</div>
</div>
</span>
Erik Philips
  • 53,428
  • 11
  • 128
  • 150
Muhammad Omer Aslam
  • 22,976
  • 9
  • 42
  • 68
  • I've wrapped the code inside a document ready function as mentioned but it's not dismissing. Here is a link - http://dev.childcaresuccesssummit.com – adammm Nov 06 '17 at 23:35
  • run the code snippet above it is working as you expect , you should verify in your code that there arent any more buttons with the same class `.dismiss`. – Muhammad Omer Aslam Nov 06 '17 at 23:37
  • Looks like based on your site, you are including jquery AFTER the script. jquery needs to exist before you start to use it. – Anthony Rivas Nov 06 '17 at 23:40
  • Great! Thanks, @MuhammadOmerAslam. I was calling on my jquery after the script. Relocated it into my header and all is working now. Is there a way to simply add to the query so that it is only showing up for unique or new visitors and not the same visitor every time? – adammm Nov 06 '17 at 23:49
  • Thanks @AnthonyRivas. I relocated it into the header as mentioned – adammm Nov 06 '17 at 23:49
  • Looks like it is showing up on every page and not just on initial landing. Is there a way around this? – adammm Nov 06 '17 at 23:56
0

Change your span to div? make your fadeOut working.

<div class="banner tracking-banner p-t-1">
<div class="container">
<div class="row">
  <div class="col-sm-10 text-left m-b-1">
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.</div>
  <div class="col-sm-2 m-b-1">
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
  </div>
</div>
</div>
</div>
Calvin Ananda
  • 1,440
  • 1
  • 14
  • 30