SRRP Announcement Bar 2X button

This is the announcement bar on the SRRP website. It displays two distinct buttons for the user to take action on. It also checks for MSIE too

by Chris Vitalos

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <script>
      function browserCheck(f, e) {
        var msie = window.navigator.userAgent.indexOf("MSIE ");
        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
          console.log('browser check failed')
          if (typeof e === "function") {
            e()
          }
          return false // if IE then do not execute f
        } else { // If another browser, execute f
          console.log('browser check passed')
          if (typeof f === "function") {
            f()
          }
          return true
        }
      }

    </script>
  </head>

  <body>
    <div id="hellobar-bar" class="regular closable" style="visibility:hidden;">
      <!-- verify the HREF URL points to the correct donation site -->

      <div class="hb-content-wrapper">
        <div class="hb-text-wrapper">
          <div class="hb-headline-text">
            PLEASE consider
          </div>
        </div>
        <button id="hbButton1" type="button" class="hb-cta hb-cta-button">
          <div class="hb-text-holder">
            Signing
          </div>
        </button>
        <div class="hb-text-wrapper">
          <div class="hb-headline-text">
            <span> our petition and </span>
          </div>
        </div>
        <button id="hbButton2" type="button" class="hb-cta hb-cta-button">
          <div class="hb-text-holder">
            <span>Donating</span>
          </div>
        </button>
        <div class="hb-close-wrapper">
          <a id="theX" href="javascript:void(0);" class="icon-close">&#10006;</a>
        </div>
      </div>
      <!-- 
<p id="test">
Yo!
</p>
<button id="b" type="button">
Love...

CSS

/* Start AnnouncementBar Specific CSS Styling */


body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#hellobar-bar {
  font-family: "Open Sans", sans-serif;
  width: 100%;
  margin: 0;
  height: 18px;
  display: table;
  font-size: 14px;
  font-weight: 400;
  padding: .33em .5em;
  -webkit-font-smoothing: antialiased;
  color: white;
  position: fixed;
  background-color: #FD3A0F;
  z-index: 1000;
  box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.15);
}

#hellobar-bar.regular {
  height: 18px;
  font-size: 14px;
  padding: .2em .5em;
}

.hb-content-wrapper {
  text-align: center;
  text-align: center;
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

.hb-content-wrapper p {
  margin-top: 0;
  margin-bottom: 0;
}

.hb-text-wrapper {
	margin-left: .25em;
  margin-right: .25em;
  display: inline-block;
  line-height: 1.3;
}

.hb-text-wrapper .hb-headline-text {
  font-size: 1em;
  display: inline-block;
  vertical-align: middle;
}

#hellobar-bar .hb-cta {
  display: inline-block;
  vertical-align: middle;
  margin: 5px 0;
  color: white;
  background-color: #FD3A0F;
  border: 2px solid white;
}

.hb-cta-button {
  opacity: 1;
  color: white;
  display: block;
  cursor: pointer;
  line-height: 1.5;
  max-width: 22.5em;
  text-align: center;
  position: relative;
  border-radius: 3px;
  white-space: nowrap;
  margin: 1.75em auto 0;
  text-decoration: none;
  padding: 0;
  overflow: hidden;
}

.hb-cta-button .hb-text-holder {
  border-radius: inherit;
  padding: 5px 15px;
}

.hb-close-wrapper {
  display: table-cell;
  width: 1.6em;
}

.hb-close-wrapper .icon-close {
  font-size: 14px;
  top: 15px;
  right: 25px;
  width: 15px;
  height: 15px;
  opacity: .3;
  color: black;
  cursor: pointer;
  position: absolute;
  text-align: center;
  line-height: 15px;
  z-index: 1000;
  text-decoration: none;
}

#hellobar-bar a {
	color: white;
	text-decoration: underline;
}

/* End AnnouncementBar Specific CSS Styling */

JavaScript

function privacy() {
  if (localStorage.getItem('policyAccepted') !== 'yes') {
    $('#hbMessage').html('<span>Usage subject to our <a href="/privacy">Privacy</a> and <a href="/terms"> Terms</span>')
    $('#hbButtonText').text('Agreed')
    $('#theX').bind('click', () => {
      donate();
    })
    $('#hbButton').bind('click', () => {
      console.log('i accept!')
      localStorage.setItem('policyAccepted', 'yes')
			  donate()
    })
  } else {
    console.log('i bought in already!')
		  donate()
  }
}

function donate() {
  $('#hbMessage').html('<span>Success takes resources!</span>')
  $('#hbButtonText').text('Donate')
  $('#theX').bind('click', () => {
    $('#hellobar-bar').fadeOut(1000);
  })
  $('#hbButton').bind('click', () => {
    console.log('i donated!')
    // window.location.href = "/donate";
  })
}

$(document).ready(() => {
	localStorage.setItem('policyAccepted','no');
  browserCheck(()=>{
    privacy()
    $('#hellobar-bar').css('visibility', 'visible')
    $(document).bind('mousemove touchstart touchend', () => {
      setTimeout(() => {
        $('#hellobar-bar').fadeOut(1000);
      }, 10000);
    })
	})
});