cookie corner

Pops out a corner menu from the bottom right with options

by ericbaumann

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="offer-container">
    <div class="menu"><i class="fa fa-bell-o" aria-hidden="true"></i>
      <div class="another">
      Use <span class="promoItem" id="promo1"></span>15 for onboard credit.<br>
      Use <span class="promoItem" id="promo2"></span>10 for 10%.<br>
      <a href="#" id="backToOffer">Back to Offer</a>
      </div>
    </div>
</div>

CSS

.offer-container {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 350px;
    width: 215px;
    padding:10px;
}
.menu {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #dd3333;
    height:50px;
    width: 50px;
    transition: all .3s ease;
    color:#fff;
    font-family:'arial';
    text-align:center;
}
.expanded .menu {
    height:100px;
    width: 350px;
    transition: all .3s ease;
}
.expanded #wow{
  display:block;
}
#wow{
  display:none;
}
.expanded .another{
  display:block;
}
.another{
  display:none;
}

JavaScript

//Corner Functionality

jQuery('.menu').click(function () {
    jQuery('.offer-container').toggleClass('expanded');
});

//Set cookies
var $promoURL = '/jazzwise/'
var $promoKey = 'bns-promo1';
var $promoCode = 'jazzwise';
$.cookie($promoKey, $promoCode, { expires: 1, path: '/' });
$.cookie('promoURLKey', $promoURL, { expires: 1, path: '/' });

var $new = $.cookie($promoKey);

//Retrieve cookies
var $retrieveURL = $.cookie('promoURLKey');
var $retrievePromo = $.cookie($promoKey);


$('.promoItem').text($retrievePromo);
$('#backToOffer').html('<a href="'+$retrieveURL+'">Back to Offer</a>');