jResize is a responsive web development tool, built in jQuery to assist the workflow of developers on responsive projects. There are various tools for responsive development, iframes at different widths embedded in the page, and the tedious resizing of the browser. So hereâs a different approach which grabs all your HTML, and resizes it inside the browser when you click the width you want. Itâs dead simple.
Table of contents
Updated! Use jResize in the browser too, without installation: Browser Development
Letâs talk you through the plugin.
jQuery Options
First we declare our Plugin defaults, to which are some popular viewport widths. Any you specify in the plugin will overwrite these.
$.jResize.defaults = {
viewPortSizes : ["320px", "480px", "540px", "600px", "768px", "960px", "1024px", "1280px"],
backgroundColor : '444',
fontColor : 'FFF'
}
options = $.extend({}, $.jResize.defaults, options);
Variables/Arrays
Here we define some variables for background color, font color and an array for the viewport widths.
âvar resizerâ is our first variable, which as you can see we create an HTML structure from, with some inline styles, so we need nothing more than just pure jQuery and no stylesheets. In here, we create a div which contains an empty unordered list.
var resizer = "<div class="viewports" style="overflow:auto;background:#"><ul class="viewlist">" + "</ul><div style="clear:both"></div></div>";
These are our viewport widths (hence the name), which get pulled in from the Pluginâs options. Any width sizes you specify will end up here.
var viewPortWidths = options.viewPortSizes;
This just defines some inline styles for our list elements which weâll call later.
var viewPortList = "display:inline-block;cursor:pointer;text-align:center;width:100px;border-right:1px solid #555;padding:10px 5px;"
Wrapping the HTML
To be able to resize the webpage inside the browser, we need to wrap all your HTML inside an empty div. We could piggyback off the body tag, but creating our own markup to resize is better.

Free eBook
Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs havenât grasped every concept in this eBook.
-
Observables and Async Pipe
-
Identity Checking and Performance
-
Web Components <ng-template> syntax
-
<ng-container> and Observable Composition
-
Advanced Rendering Patterns
-
Setters and Getters for Styles and Class Bindings
Using jQueryâs âwrapInnerâ and targeting the body tag, this allows us to wrap absolutely everything inside our div tag with an ID of âresizerâ. Now weâve got hold of all the HTML inside our newly created tag, this sets us up perfectly.
$('body').wrapInner('<div id="resizer" />');
Prepending the Plugin
jQueryâs âbeforeâ function allows us to insert content before a targeted element. We donât want to put our navigation inside our resizer div, as this will resize, so using âbeforeâ allows us to inject our navigation after the body tag, but before the resizer content wrap. Here you see we call our âresizerâ variable, and use CSS margin, zero auto to center all content.
$('#resizer').css({margin: '0 auto'}).before(resizer);
Looping the Array and ViewPort widths
Hereâs where things get awesome. We loop through our array, which weâve setup to be a little bit smart. Our specified viewport widths act as a width animator and also a classname, which allows us to have super control with minimal code. Using jQueryâs âeachâ function (similar to PHP foreach), we then target our unordered list element from our variables above (.viewlist) and append a list item for each variable.
This basically means, if we set 320px as a variable, it will become a class for us to hook onto for clicking, and act as a width that feeds in to automatically make the browser this width.
$.each(viewPortWidths, function (go, className) {
$('.viewlist').append($('' className ''));
$('.' className '').click(function () {
$('#resizer').animate({
width: '' className ''
}, 300);
});
});
Animated Entrance
We declare a height variable, which gets the outerHeight value from our viewlist, which would equal the height of our plugin. From this we hide the viewports (our navigation) then use the âslideDownâ function to show the nav. We then use our height variable, to animate the exact height of the nav, and add a top margin to our resizer div, which holds our content. This allows our plugin to push down the page content and also remain fixed in position.
var height = $('.viewlist').outerHeight();
$('.viewports').hide().slideDown('300');
$('#resizer').css({margin: '0 auto'}).animate({marginTop : height});
Reset
Also included is a reset button, which drops all widths youâve manipulated with jResize. We prepend a separate list element for this as itâs not part of our array. This also has a custom class of âresetâ.
$('.viewlist').prepend('<li class="reset" style="' + viewPortList + '">Reset</li>');
Using the custom class of âresetâ, we can then ensure that when the user clicks, it drops all pixel width styling to our resizer. We canât really remove our width specifically from an inline style, so here weâll just declare the content to flow to âautoâ which drops all styling â allowing or content to go back to normal without refreshing the page.
$('.reset').click(function () {
$('#resizer').css({
width: 'auto'
});
});
Using and calling jResize
Simply include jresize.js in your page (in the download) and call it like so:
<script src="js/jresize.js"></script>
<script>
$(function() {
$.jResize({
viewPortSizes : ['320px', '480px', '540px', '600px', '768px', '960px', '1024px', '1280px'], // ViewPort Widths
backgroundColor : '444', // HEX Code
fontColor : 'FFF' // HEX Code
});
});
</script>
Scrollbars
Nothing major, just thinking in terms of scrollbars. Mac OS X (which I use) tends not to have scrollbars that are visible or take up content space, so if youâre using a browser such as FireFox, or a Windows machine where scrollbars are standard, you might wish to widen each width accordingly (probably best to inspect element and get an exact width of the pixels, but usually around 15-20px extra to cater for scrolling).