A handy jQuery solution for blocking responsive, IE, or incomplete bits from being seen while in development.
Features:
- Block responsive web design - gives you the ability to demo coded previews without worrying about how the project might look on mobile devices.
- Block the homepage - show a polite message that a page isn't yet ready to be viewed to keep visitors out of broken or unfinished areas of preview sites.
- Block Internet Explorer - duh.
- Customizable and friendly blocking messages - because good UX is the right thing to do.
- Bypass for developers - for sanity.
- Include jQuery.
- Include
dist/jquery.projectblocker.min.js. - When the
documentisready(), initializeProjectBlocker:
$(document).on('ready', function() {
$.projectBlocker();
});$(document).on('ready', function() {
$.projectBlocker({
responsive: 'hide',
minWidth: 1200,
homepage: 'hide',
homepageSelector: '#wrapper.homepage',
ie: 'hide'
});
});When all else fails, check out the demo/.
ProjectBlocker blocks responsive web design by throwing up the friendly blocking message plus overlay, but also adds a CSS max-width property to the <body/> so that things don't look broken underneath. We just thought you might like to know.
Once ProjectBlocker has been initialized using the Getting Started steps, it will be immediately active for all visitors. This is awesome, but becomes a huge pain once development resumes. To fix that, we have some handy URL flags:
Append this to the end of your URL to bypass ProjectBlocker and enable Developer Mode. You'll get a handy console notification letting you know that ProjectBlocker is still running (after the first refresh), but is letting you through since you're cool.
Additionally the script will write a localStorage key value pair matched to the URL on which you're browsing. This means that you only have to use ?dev=true once and it will continuously let you through without bugging you each time, even if you don't use this URL flag in future. How nice.
Append this to the end of your URL to turn off Developer Mode to see the ProjectBlocker warnings as usual.
| Option | Type | Default | Description |
|---|---|---|---|
responsive |
string | 'hide' |
Hides or shows responsive web design to the visitor. Used along with minWidth. |
minWidth |
int | '0' |
The minimum viewing width of the page before the warning is introduced. |
homepage |
string | 'show' |
Hides or shows the homepage of the site. Used along with homepageSelector. |
homepageSelector |
string | null |
Any time this jQuery selector is matched the page will be hidden. Handy for the homepage or anything you're trying to block. |
ie |
string | 'hide' |
Hides or shows Internet Explorer. |
Grunt was used to develop and build ProjectBlocker - this makes it very easy to grab a fork and modify the HTML and styles (written in LESS) to your bidding.
GruntJS.com Getting Started: Working with an Existing Grunt Project
ProTip: Don't forget to head into html/jquery.projectblocker.html and change the "Author" name!
The DOM structure of the overlay as well as the styles are not included in the main source script file (src/jquery.projectblocker.js). They exist in their respective folders (html/, less/) and are made available in the minified version of the script through global variables.
HTML is built from html/jquery.projectblocker.html, and is made available in the global variable pbOverlayDOM.
Styles are built from less/jquery.projectblocker.less, and are made available in the global variable pbStyles.
To build a fresh custom copy of ProjectBlocker first get started with Grunt by running npm install, then run grunt build. This will recompile the HTML (from html/) and LESS (from less/) into JavaScript global variables and append them into a freshly minified version at dist/jquery.projectblocker.min.js.
One gotcha is that changes to the DOM of ProjectBlocker will likely require changes to the responsive design. Womp womp.
It is encouraged that developers inspect the demo as well as the HTML and LESS before customizing by running grunt server.
Remember to remove ProjectBlocker before going live! Or for peace of mind write a conditional to only load it on development and staging URLs.
- Initial public release.
Mike Zarandona | http://twitter.com/mikezarandona
ProjectBlocker is available under the MIT license.