it-jonction-promo-banners for floating banner on top

it-jonction-promo-banners

<div hidden id="it-jonction-promo-banners-tag-desktop">
	<div id="promo-banners-tag-desktop-block" class="promo-banners-tag hide-on-mobile">
		<!--  For Desktop Collapsed view -->
		<img 
			class="img-responsive promo-banners-tag-desktop-block open" 
			id="desktop-open-code"
			src="!!! Change This here !!!"
			alt="promo-banners-tag">
			
		<!--  For Desktop Expanded view -->
		<img 
			class="img-responsive promo-banners-tag-desktop-block desktop-img close"
			id="desktop-show-code"
			src="!!! Change This here !!!"
			alt="promo-banners-tag">
	</div>
	
</div>

<div hidden id="it-jonction-promo-banners-tag-tablet">

	<div id="promo-banners-tag-tab-block" class="promo-banners-tag hide-on-desktop">
		<!--  For Tablet Collapsed view -->
		<img 
			class="img-responsive promo-banners-tag-tab-block open" 
			id="tab-open-code"
			src="!!! Change This here !!!"
			alt="promo-banners-tag">
		<!--  For Tablet Expanded view -->
		<img 
		class="img-responsive promo-banners-tag-tab-block close" 
		id="tab-show-code"
		src="!!! Change This here !!!"
		alt="promo-banners-tag">
	</div>

</div>

<div hidden id="it-jonction-promo-banners-tag-mobile">
	<div id="promo-banners-tag-mobile-block" class="promo-banners-tag hide-on-desktop">
		<!--  For Mobile Collapsed view -->
		<img 
			class="img-responsive promo-banners-tag-mobile-block open" 
			id="mobile-open-code"
			src="!!! Change This here !!!"
			alt="promo-banners-tag">
		<!--  For Mobile Expanded view -->
		<img 
			class="img-responsive promo-banners-tag-mobile-block close" 
			id="mobile-show-code"
			src="!!! Change This here !!!"
			alt="promo-banners-tag">
	</div>
</div>
<style>
	.promo-banners-tag{
		background: rgb(0,0,0);
		background: linear-gradient(90deg, #002892 0%, #213070 100%);
		padding: 5px!important;
		position: relative;
	}

	.promo-banners-tag img{
		margin: 0 auto;
		display: block;
	}
	#promo-banners-tag-desktop-block + #header-nav{
		margin-top: 0;
	}
  
	#promo-banners-tag-desktop-block,
	#promo-banners-tag-mobile-block,
	#promo-banners-tag-tab-block{
		display: none;
	}

	@media screen and (min-width: 1081px){
		#promo-banners-tag-desktop-block{
			display: block;
		}
		#promo-banners-tag-desktop-block a img{
			width: 90%;
		}
	}

	@media screen and (max-width: 1080px){
		#promo-banners-tag-tab-block{
			display: block;
		}
	}

	@media screen and (max-width: 650px){
		#promo-banners-tag-tab-block{
			display: none;
		}
		#promo-banners-tag-mobile-block{
			display: block;
		}
		#promo-banners-tag-mobile-block a img{
			margin: 20px 10px;
		}
	}
</style>
<script>
	var itJonctionPromo = itJonctionPromo || {};

	itJonctionPromo.promo = function(){
		var self = {
			cookieNamePrefix: "!!! Change This here !!!",
			init: function(){				
				jQuery(document).ready(self.ready);
			},
			
			ready: function(){
              	if(jQuery("#it-jonction-promo-banners-tag-mobile #promo-banners-tag-mobile-block").length> 0 && jQuery("#it-jonction-promo-banners-tag-tablet #promo-banners-tag-tab-block").length > 0){
                  self.newYear();
                } else {
                	setTimeout(self.ready, 100);
                }
				
			},
			
			newYear:function(){
				console.log("New Year2019:", "Init");				
				
				var mobileBFClone = jQuery("#it-jonction-promo-banners-tag-mobile #promo-banners-tag-mobile-block")[0].outerHTML;
				var tabBFClone = jQuery("#it-jonction-promo-banners-tag-tablet #promo-banners-tag-tab-block")[0].outerHTML;
				var desktopBFClone = jQuery("#it-jonction-promo-banners-tag-desktop #promo-banners-tag-desktop-block")[0].outerHTML;
				jQuery("body").prepend(mobileBFClone);
				jQuery("body").prepend(tabBFClone);
				jQuery("body").prepend(desktopBFClone);
				//jQuery(desktopBFClone).insertBefore('#header-nav');
				

				jQuery(document).on("click", ".promo-banners-tag  img.close", self.open);
				jQuery(document).on("click", ".promo-banners-tag  img.open", self.close);
				
				if( typeof self.getCookie(self.cookieNamePrefix + "promo-banners-tag-state") === "undefined"){
					self.open();
					console.log(self.cookieNamePrefix + " Promo banner:", "Banner Minimized");
				} else {
					self.close();
					console.log(self.cookieNamePrefix + " promo banner:", "Banner Expanded");
				}			
			},		

			open: function(){
				jQuery(".promo-banners-tag  img.open").show();
				jQuery(".promo-banners-tag  img.close").hide();
				if( typeof self.getCookie(self.cookieNamePrefix + "promo-banners-tag-state") !== "undefined"){
					/** Expire the cookie by setting to hour before now */
					self.createCookie(self.cookieNamePrefix + "promo-banners-tag-state", "true", -1);
				}
			},
			
			close: function(){
				jQuery(".promo-banners-tag img.open").hide();
				jQuery(".promo-banners-tag img.close").show();	
				/** Set cookie for one hour so that bar will re appear after one hour since last visit */
				self.createCookie(self.cookieNamePrefix + "promo-banners-tag-state", "true", 1);
			},
			
			createCookie: function(name, value, hours)
			{
				if (hours){
					var date = new Date();
					date.setTime(date.getTime()+(hours*60*60*1000));
					var expires = "; expires="+date.toGMTString();
				} else {
					var expires = "";
				}
				document.cookie = name+"="+value+expires+"; path=/";
			},
			
			getCookie: function(name) {
			  var value = "; " + document.cookie;
			  var parts = value.split("; " + name + "=");
			  if (parts.length == 2) return parts.pop().split(";").shift();
			}
			
		};
		return self;
	}();
	itJonctionPromo.promo.init();

</script>