jquery responsive web

jQuery-responsiveWeb

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.

examples

I have added a barebone html example and also another one of the majestic New York Times Global Edition homepage. you can check the New York Times Global Edition example and see how a mobile version of the very detailed website such as that can be done with this plugin and about 40 lines of js and css. open it and just resize the width smaller than 700px or just check it with your mobile device. just to give you the idea:

check the New York Times Global Edition example now!

how to use?

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.
well, at least I like it. cheers!

  • Eric

    Very cool! Can this be activated on a WordPress platform?

    • http://stild.com stildv

      Hi Eric, it definitely can be used with your wordpress theme.
      My website is a wordpress running with a theme I made and it uses this jquery plugin.

      (btw sorry for very late reply sometimes notifications don’t reach me…)

  • http://twitter.com/b4z81 Stefano Guglielmi

    nice! you should add in a github repo

    • http://stild.com stildv

      I will mate. Thanks.

  • Brian

    I notice on this page (which uses responsiveWeb.js) that the “loadingDiv” is not visible/disabled, but on the examples it is enabled. What is the proper way for hiding/disabling “loadingDiv” so that it behaves like this page (no loading icon flashes over the screen on resize)?

    • http://stild.com/ stildv

      Hi Brian, I’ll publish the new version with more samples in nearest possible chance. With that version you can set anything, true or false, including loading. Thanks.

  • http://www.facebook.com/deny.tb Deny Tb

    why i cant download ? the file only 5kb … :(

    • http://stild.com/ stildv

      It’s fixed now. Sorry about that. Made an optimization to the website and broke the download link. Now fixed, you can download. Thanks.

  • sunnysak

    Have anyone tried this with jquery mobile framework? Any inputs?

  • http://www.facebook.com/rogers.hellman Rogers Hellman

    Trying it out.. Now instead of my screen displaying I just see a gray background with the word: loading… in the upper left hand corner and nothing else. Any ideas what is happening?

    • http://twitter.com/NIMSRULES Nirmal Shah

      The same is happening with me too. Devrim, can you please help us out here? I tried debugging but am not able to find anything there.

      • http://stild.com/ stildv

        Hi Nirmal. I’m trying to create the same issue.
        Can I ask you two things:
        1- What is the jquery version you’re using?
        2- And on which browser do you experience that?

        Thanks.

        • http://twitter.com/NIMSRULES Nirmal Shah

          I’m calling the latest version of jQuery via its CDN and I’m getting the issue in Chrome & Firefox, for those are in which I’ve tried.

      • Bill Anderson

        I experienced this issue also. I noticed by changing
        rearrangeObjects: true to false took loading error away. Not sure what is causing this.

        • http://stild.com/ stildv

          Hi Bill, Thanks for the help.

          The license I chose was “Dual licensed under the MIT or GPL Version 2 licenses.” Cause that’s what jQuery also said :) As this is no better than jQuery itself I copied that. I guess you can pretty much do whatever you want…

  • multplaneta

    I have a site w/ image and mapping, but the plugin dont resize, how i can fix that?

    • http://stild.com/ stildv

      I don’t know if I’m getting you right, but the plugin does not actually resize.. It adds tag css classes so you can do whatever you want with them… Hope this helps. Cheers.