Blog. A place where I write - mainly about useless things.

Display Modal After User Inactivity

Quite a number of websites I frequently visit started adding this rather annoying popup modal after a few seconds of inactivity. Maybe I’m trying to read the article, so sod off and stop getting in my way. Anyway, a recent site I worked on required me to create one of these heinous beasts and here is how I did it.

Firstly, I created the modal, it can contain anything but I’m just going to keep it very simple.

HTML:

<div class="modal">
  <span>Hello! You've been inactive.</span>
  <a href="#" class="close">x</a>
</div>

CSS:

.modal{
  display: none;
  background-color: #47B3F0;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  text-align: center;
}

.modal span{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  line-height: 16px;
}

.close{
  display: block;
  width: 30px;
  height: 30px;
  background-color: #fff;
  text-align: center;
  line-height: 30px;
  color: #47B3F0;
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none;
  font-family: "Helvetica", sans-serif;
}

 

Next up is the jQuery. What this does is detect whether or not the user has moved their cursor or pressed a key. If they haven’t done so after 5 seconds, the modal will fade in. I used 15 seconds in production as 5 is just bonkers!

jQuery:

inactiveTime = 0;
$(document).ready(function () {
  var inactiveInterval = setInterval(inactiveIncrement, 1000);
  $(this).keypress(function (e) {
    inactiveTime = 0;
  });
  $(this).mousemove(function (e) {
    inactiveTime = 0;
  });
});
function inactiveIncrement() {
  inactiveTime = inactiveTime + 1;
  if (inactiveTime > 5) {
    $('.modal').fadeIn('normal');
  inactiveTime = 0;
  }
}

Then of course, the functionality of the close button. But you’d probably want to implement some cookie stuff so it doesn’t show again.

$('.close').click(function() {
  $('.modal').css('display','none');
});

You can see it in action on Codepen below.

See the Pen Display Modal After User Inactivity by Chris Burrows (@cburrows) on CodePen.

Cool Link Hovers

I was experimenting with link hovers and what can be possible with pseudo elements. Below are the results. I’ll keep updating this when I’ve experimented with a few more techniques.

Click the HTML and CSS buttons to see what’s going on with each link.

See the Pen Cool link hovers (In progress) by Chris Burrows (@cburrows) on CodePen.

I’ve recently watched…

Dribbble Design Inspiration

After being invited to Dribbble, I had a really good snoop around at other users’ ‘shots’. There’s some really awesome stuff and I decided to start collating the ones that were most inspirational to me. Here’s the first batch.

Nick Slater

By Nick Slater – @slaterdesign
Studio–JQ

By Studio–JQ – @STUDIOJQ
Ali Sayed

By Ali Sayed – @alisayed
Timo Kuilder

By Timo Kuilder – @slaterdesign
Anano Miminoshvili

By Anano Miminoshvili – @Anano
Brian Steely

By Brian Steely – @BSteely
Mike Creative Mints

By Mike Creative Mints – @creativemints
Justin Mezzell

By Justin Mezzell – @JustinMezzell

A Simple Responsive Menu

For a long time I have been tinkering around with the best way to create a responsive menu and came up with the following method.

Firstly, jump into your JavaScript file and we want to define a couple of variables, the toggle button and the menu itself.

var toggle  = $('.nav__btn');
var menu    = $('.nav');

Next, we create a function that runs when our toggle button is clicked. This can be also be fadeToggle. We don’t want the hash showing in the browser’s address bar so we preventDefault (Only if you use an a tag). This function basically toggles the menu open and closed and the toggle button’s class.

$(function() {
  toggle.on('click', function(e) {
    e.preventDefault();
    menu.slideToggle( 100 );
    toggle.toggleClass('active');
  });
});

Finally, for the jQuery, we want to remove any styling and go back to the normal menu if the browser width is over 768px (or whatever you want).

$(window).resize(function(){
  var w = $(window).width();
  if(w > 768 && menu.is(':hidden')) {
    menu.removeAttr('style');
  }
});

The HTML and CSS are very simple and you can check it all out over on CodePen.