19 files/overlay.html
View file
@@ -0,0 +1,19 @@
<div id="overlay">
<button class="btn btn-primary" id="closeOverlay" type="button">X</button>
<div class="overlay-content">
<h3 class="overlayHeader">You're leaving? Wait!</h3>
<div class="overlayLead">
<p>Enter your email below to subscribe.</p>
<p class="padding">This way, you will not miss out on updates and news!</p>
</div>
<form id="overlayForm" name="overlayForm">
<fieldset class="form-group">
<input class="form-control overlay-input" id="sign-up-overlay" placeholder="Your E-mail" required type="email">
<small class="text-muted">We promise we won't spam you!</small>
</fieldset>
<button class="btn btn-block btn-info overlay-input" id="submit" type="submit">Subscribe</button>
</form>
<h3 class="subscribeThanks">Thank you!</h3>
</div>
<div class="overlayImageContainer"><img alt="" class="overlayLogo" height="75" src="./files/logo@2x.png" width="120"></div>
</div>
67 js/overlay.js
View file
@@ -0,0 +1,67 @@
$("#form").submit(function(event) {
/* Storing name entered by user */
var nameEntered = $('#nameEntered').val();
/* Finding the leters after spaces using regex */
var matches = nameEntered.match(/\b(\w)/g);
/*joining all matches together with no space */
var initials = matches.join('');
_itq.push($('#sign-up').val(), initials);
event.preventDefault();
/* RESET FORM ON SUBMIT, USED ONLY FOR THIS LOCAL SUBMIT */
$('#form').each(function() {
this.reset();
});
});

$("#overlayForm").submit(function(event) {
_itq.push($('#sign-up-overlay').val());
$("#overlay")
.delay(1000)
.fadeOut(300)
.removeClass("show");
$(".subscribeThanks").addClass("show");
event.preventDefault();
$('#overlayForm').each(function() {
this.reset();
});
});

/** Listener for mouse leaving **/
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}

/** Created a variable to detect whether the user has already seen the overlay in current sesssion
This is to improve usability and not annoy the user if they keep having to click off screen i.e. other monitor **/
var shown = false;

/** Detects whether the user has moved more than 200px down the page, if so, overlay runs when mouse leaves **/
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
/** pass in the document/whole page, with event of mouseout **/
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
/** If mouse leaves html document, and, hasnt been shown before then ... **/
if (shown === false) {
if (!from || from.nodeName == "HTML") {
$("#overlay")
.fadeIn(200)
.addClass("show");
shown ^= true;
}
}
});
}
});


$("#closeOverlay").on('click', function() {
$("#overlay")
.fadeOut(300)
.removeClass("show");
});
120 popup.html
View file
@@ -0,0 +1,120 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/overlay.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<nav class="navbar navbar-default colour">
<div class="container-fluid padding">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://KieranRigby.github.io"><img src="img/logo.png" alt="logo" class="logo"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#projects">projects</a></li>
<li><a href="#about">about</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<div class="container">
<div class="row info">
<h2 class="title">Simple pop up</h2>
<div class="list-container">
<p>Features:</p>
<ul>
<li>Will only pop up when the users mouse leave the window</li>
<li>This only activate once per session, whether they closed or entered it</li>
<li>It will only detect the mouse leave only if they have scrolled</li>
<li>It is responsive</li>
<li>If it detects the mouse getting closer to the toolbar, then come back, it'll show</li>
</ul>
<a href="files/overlay.html" download class="download">Download HTML</a>
<a href="files/overlay.css" download class="download">Download CSS</a>
<a href="js/overlay.js" download class="download">Download JS</a>
</div>

</div>
</div>
<div class="background-wrapper">
<div class="container">
<div class="row">
<h4>Scroll to the bottom to test it out!</h4>
</div>
</div>
</div>

<div id="overlay">
<button class="btn btn-primary" id="closeOverlay" type="button">X</button>
<div class="overlay-content">
<h3 class="overlayHeader">You're leaving? Wait!</h3>
<div class="overlayLead">
<p>Enter your email below to subscribe.</p>
<p class="padding">This way, you will not miss out on updates and news!</p>
</div>
<form id="overlayForm" name="overlayForm">
<fieldset class="form-group">
<input class="form-control overlay-input" id="sign-up-overlay" placeholder="Your E-mail" required type="email">
<small class="text-muted">We promise we won't spam you!</small>
</fieldset>
<button class="btn btn-block btn-info overlay-input" id="submit" type="submit">Subscribe</button>
</form>
<h3 class="subscribeThanks">Thank you!</h3>
</div>
<div class="overlayImageContainer"><img alt="" class="overlayLogo" height="75" src="./files/logo@2x.png" width="120"></div>
</div>

<div class="scroller">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/overlay.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>