Download
User Rating: 0/5 ( 0 votes)
What is it?
it is a simple jquery plugin helping design more responsive and adaptive websites and web applications with almost no setup.
What does it do?
it adds dynamic classes to the <body> depending on the operating system, browser and resolution.
Why?
because for ideal responsive web design css is just not enough. it chokes at some point, or has cross-browser and cross-platform issues much more than the wonderful jquery framework.
and also mobile websites don’t have to be ugly, or boring with bulky iphone buttons and very trimmed content, a similar mobile version of the website can be done with this plugin easily. check out the New York Times Global Edition example in the zip or after the jump.
Compatibility
I have tried it with microsoft internet explorer v7 and v8, firefox, google chrome, safari, opera on windows, and also with an android device. works perfectly on all of them. on the android device (samsung galaxy s) handles the orientation change nicely too.
Source: stild.com
1. INCLUDE JS FILES
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="../../js/jquery.responsiveWeb.js"></script>
2. JAVASCRIPT
just add “$(window).responsiveWeb();” somewhere in your document, either inside a <script> block or inside a “.js” file, then it will initiate. it can be anywhere in your document, the head or the foot, it doesn’t matter. simple as that. of course you have to load jQuery somewhere in the page too. any version higher than v1.2.x of jQuery framework it can get along with.
$(document).ready(function(){
$(window).responsiveWeb();
});
details and options
if you want options it has some options, and you can set them like this, and also below you can see the default values for the options:
$(document).ready(function(){
$(window).responsiveWeb({
applyBodyClasses: true,
applyResolution: true,
applyPlatform: true,
applyBrowser: true,
applyBrowserVersion: true,
manipulateDesign: true,
rearrangeObjects: true,
debug: false
});
});
all of the options do what their names suggest. you might first want to try with debug mode on, in order to get the hang of it. cause it logs on the right top corner what classes the plugin adds to body class. and it updates on every resize.
also there are two functions attached to the plugin, which I thought could be useful to create a responsive website or web application.
two functions
there are two functions which are set to be called or not at the options. one of them is “manipulateDesign()” and the other is “rearrangeObjects()”. there is slight difference between them.
“manipulateDesign()” is called when the script inits. it is good for init time manipulations you want to do on your objects.
for example:
$(document).ready(function(){
$(window).responsiveWeb();
});
function manipulateDesign() {
$("img.withcaption").each(function(){
var caption = $(this).attr('title');
$(this).wrap('</pre>
<div class="imgwithcaption"></div>
<pre>
');
$(this).after('');
$(this).next('span.thecaption').text('"' + caption + '"');
});
}
“rearrangeObjects()” is called on every page resize. it is good for moving your objects around depending on the resolution and orientation of the page. actually orientation on mobiles is only a simple resolution change. so the responsiveWeb also handles that.
for example:
$(document).ready(function(){
$(window).responsiveWeb();
});
function rearrangeObjects() {
if (jQuery('body').hasClass('w1024') || jQuery('body').hasClass('w1280') || jQuery('body').hasClass('w1440')) {
$('#MainMenu').appendTo('#Column1');
$('#ServiceMenu').prependTo('#Header');
$('#Column1').prependTo('#ContentWrapper');
$('#Columns, #Navigation').hide();
}
else {
$('#MainMenu').appendTo('#Navigation');
$('#ServiceMenu').appendTo('#Navigation');
$('#Column1').prependTo('#Columns');
$('#Columns, #Navigation').show();
}
}
anyways, you can get the idea from the download file, which has an example on how to use it, and what you can do with it. if there is anything just drop me a line below. anything more than a line contact me. if you love it you are always more than welcome to donate. and sorry if anything is unusual up till now I kept everything I made to myself, and used them on my own projects only. I decided to change that recently.
oh and I forgot, this website uses the plugin, you can check what is does right now. resize the page to see the objects move around. two column to single column layout swap in a breeze.
JS Tutorial
