migreyes / jquery.wanker

A jQuery plugin that reveals a takeover when people start excessively resizing their browser.

Home Page:http://migreyes.com/makes/wanker

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

jquery.wanker.js

Responsive design has been a blessing to web crafters everywhere. The web, however, was meant to be read, not squished. jquery.wanker.js is a tiny (549 bytes minified) jQuery plugin that reveals a public service announcement when people start excessively resizing their desktop browser as they try to see your responsive breakpoints.

jquery.wanker.js is the perfect easter egg plugin for designers, photographers, writers, and other creative people with a sense of humor displaying their work on the web wishing their viewers to focus more on their work, and less on the magic of media queries.

Wanker

Installing jquery.wanker.js

Assuming you’re already using jQuery, include the file in your <head>:

<head>
  <script src="jquery.wanker.min.js"></script>
</head>

Design your public service announcement

<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>
  </div>
</div>

Call the wanker() function on your design

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

The message will show up after 1 second of continuous browser resizing, and will disappear 1.5 seconds later. Prefer to choose your own delay and duration? No problem!

$(function() {
  $('[data-wanker]').wanker({delay: 5000, duration: 5000});
});

View (and contribute to!) the list of websites using jquery.wanker.js.

Made with love by @migreyes.

Special thanks to @sstephenson for his code review.

About

A jQuery plugin that reveals a takeover when people start excessively resizing their browser.

http://migreyes.com/makes/wanker

License:MIT License


Languages

Language:JavaScript 38.0%Language:CSS 32.3%Language:CoffeeScript 29.7%