Wanker Responsive

by Matthew Day

HTML

<div class="wanker" data-wanker>
  <div class="wanker-content">
    <h1>The web was meant to be read, not squished.</h1>
    <p>Prevent excessive browser resizing and get people back to reading.</p>
    <p>Download <a href="https://github.com/migreyes/jquery.wanker">jquery.wanker.js on GitHub</a>.</p>
  </div>
</div>

CSS

.wanker {
  /* Full-screen takeover… */
  background: #000;
  color: #FFF;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2014;
}

JavaScript

(function() {
	(function(jQuery) {
		return $.fn.wanker = function(options) {
			var settings;
			settings = $.extend({
				delay: 300,
				duration: 1500
			}, options);
			return this.each(function() {
				var $message, elapsed, fired, mobile, reset, start, timer;
				$message = $(this);
				mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
				if (!mobile) {
					fired = false;
					start = null;
					elapsed = null;
					timer = null;
					reset = function() {
						fired = false;
						return elapsed = null;
					};
					return $(window).resize(function() {
						if (fired) {
							elapsed = Math.abs(new Date() - start);
						} else {
							start = new Date();
							fired = true;
						}
						if (elapsed > settings.delay) {
							$message.fadeIn();
						}
						if (timer) {
							clearTimeout(timer);
						}
						return timer = setTimeout(function() {
							$message.fadeOut();
							return reset();
						}, settings.duration);
					});
				}
			});
		};
	})($);

}).call(this);

$(function() {
  $('[data-wanker]').wanker();
});