jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">

	<style type="text/css">
		* {padding:0;margin:0;}
        body { font-family:'Roboto';}
        h1 { margin:50px auto; text-align:center;}
	</style>


	
	<script>
		
		$(document).ready(function(){

			$.stickToMe({
				layer: '#stickLayer'			
			});
						
		});
		
	</script>

<title>jQuery Stick to me Demo</title>
</head>
<body>
<h1>jQuery Stick to me Demo</h1>
<div class="jquery-script-ads" align="center"><script type="text/javascript"><!--
google_ad_client = "Add your add client here";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
	<div id="stickLayer" style="display:none;" class="stick_popup">
	  <div class="stick_close" onclick="$.stick_close()">X</div>
		<div class="stick_content">
            <h1>Please dont' go</h1>
            <p style="text-align:center"><img src="https://media.giphy.com/media/76S1OT5sp12da/giphy.gif" width="15%"/></p>
		</div>
	</div>
	<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '']);
  _gaq.push(['_setDomainName', '']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>

CSS

.body {
  width:100%;
  padding: 10px;
  background: #ed355c;
}

.img { 
  display: block;
  margin: 0 auto; 
}

.stick_block_layer {
	background-image: url("pattern.png");
	opacity: 0.7;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

.stick_popup {
	height: 200px;
	width: 80%;
	box-shadow: 0px 0px 7px #4a4a4a;
	-moz-box-shadow: 0px 0px 7px #4a4a4a;
	-webkit-box-shadow: 0px 0px 7px #4a4a4a;
	background: #f2f2f2;
	-webkit-animation: zoomin 0.7s;
	animation: zoomin 0.7s;
}

.stick_content {
	padding: 20px;
}

.stick_close {
	cursor: pointer;
	position: relative;
	top: 0px;
	left: 0px;
	float: right;
	font-family: Arial;
	font-size: 17px;
	background-color: #d1d1d1;
	color: #4c4c4c;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
}

/* 
CSS3 animation keyframes.
*/
@-webkit-keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform: scale(1.04);
		opacity: 1;
	}
  
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}
@-ms-keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform: scale(1.04);
		opacity: 1;
	}
  
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	
}
@keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform: scale(1.04);
		opacity: 1;
	}
  
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

JavaScript

(function ($) {

    $.stickToMe = function ( configs ) {

        var defaults = {
            layer: "",
            fadespeed: 400,
            trigger: ['top'],
            maxtime : 0,
            mintime : 0,
            delay: 0,
            interval: 0,
            maxamount : 0,
            cookie : false,
            bgclickclose : true,
            escclose : true,
            onleave : function (e) {},
            disableleftscroll : true	// chrome disable
        };


        var settings = $.extend({}, defaults, configs);

        $(settings.layer).hide();

        var startuptime = new Date().getTime();
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();
        var offsetbind = false;
        var howmanytimes = 0;
        var lasttime = 0;
        var chromealert = true;
        var lastx, lasty = 0;

        if (/Chrome/.test(navigator.userAgent))
        {
            var chrome = true;
            if ($(document).width() > windowWidth && settings.disableleftscroll == true)
            {
                chromealert = false;
            }
        }

        var conth = parseFloat($(settings.layer).css("height"));
        var contw = parseFloat($(settings.layer).css("width"));
        var reqsettings = {
            backgroundcss: {'z-index':'1000','display':'none'},
            boxcss: {'z-index':'1000','position':'fixed','left':'50%','top':'50%','height': (conth) + 'px','width': (contw ) + 'px', 'margin-left':(-contw/2)+'px', 'margin-top':(-conth/2) + 'px'}
        };

        $.extend(true, settings, reqsettings);

        $(document).bind('mousemove',function(e)
        {
            lastx = e.pageX;
            lasty = e.pageY;
        });

        $(document).bind('mouseleave', function(e) { setTimeout(function(){ontheleave(e);}, settings.delay); });

        if (chrome)
        {
            $(document).unbind("mouseleave");
            chromefix();
        }

        function chromefix()
        {
  ...