This is my second in a series of jQuery plugins that I am sharing. You can check out the tooltip plugin from my first post here. I’ve recently been paying more attention to the mobile space and trying to build websites whose layout changes at different resolutions. The idea here is to make the same code work on everything from 1920×1200 screens to 240×400. As a UI developer I don’t have (and probably don’t want) every device available to me for testing my interfaces. I can do all my testing on my desktop but needed a way to re-size the browser to specific dimensions. So, I whipped up a jQuery plugin to re-size the browser to exact dimensions.
On top of that I decided to put some basic controls on it so that you can easily switch between different sizes. You can set the sizes with an array of value pairs. Each control group is optional but set to show as a default. You can also ‘play’ the plugin and it will loop through the different sizes at a user defined speed. I have put a text form in so that you can enter specific values on the fly too. You can also set the browser scroll bars to display or not.
Also, I noticed when building it that under certain sizes the control bar will break. I did not find an elegant CSS solution so I decided to put in some key commands just in case. left and right arrow keys will navigate you through the list of sizes and the ‘m’ key will toggle the minimised and maximised views. In mini view, the control panel is hidden so you can see the full page.
Check out the demo page, the code is also being hosted on Github repository. Feel free to make suggestions or request new features. I put this together in a couple of hours so I haven’t paid a whole lot attention to it, but I am using it, and finding it a good little tool for my UI dvelopment.