Adjustable Layout width using jQuery – Tutorial

To give functionality of change website width to user is a great idea. Its required some jQuery and CSS Stuffs. Here I create one simple tutorial for same, so you can easily implement this functionality in your upcoming websites. Here we go…

Before we start check live preview, so you can get idea what we are going to create.
Live Demo | Download Full Demo

First We create 3 Column HTMLStructure as Below.


<div class="wrapper">
<div class="leftcolm"> text content.... </div>
<div class="rightcolm"> text content.... </div>
<div class="midcont"> text content.... </div>
</div>


Now we will create CSS for 3 column structure of layout.


body { margin:0px; padding:0px; }
.wrapper { width:980px; margin:0 auto; }
.leftcolm { float:left; width:200px; background-color:#99FF99; padding:10px; }
.rightcolm { float:right; width:200px; background-color:#99FF99; padding:10px; }
.midcont { padding:10px; margin-left:230px; margin-right:230px; background-color:#CCCCCC; }


So this way our 3 column CSS and HTML Structure is ready, now we need to add sizing controls from user can change width of website layout.
Here is HTML code for Controls, Create UL sturcutre with 3 LI where we need to apply CSS class (switch_780, switch_980, switch_fluid) to anchor text.


<div class="controls">
<ul>
<li><a href="#" class="switch_fluid">100%</a></li>
<li><a href="#" class="switch_980">980</a></li>
<li><a href="#" class="switch_780">780</a></li>
</ul>
</div>


Here is CSS code for Controls, before that we need to create 3 icons for controls, icon images will apply by CSS this way.


.controls ul, .controls li { margin:0px; padding:0px; list-style:none; display:inline }
.controls li a:link, .controls li a:visited { float:right; display:block; height:15px; width:15px; text-indent:-9999px; overflow:hidden; margin-left:10px; }
.controls li a.switch_780 { background-image:url(images/icon_780.jpg); }
.controls li a.switch_980 { background-image:url(images/icon_980.jpg); }
.controls li a.switch_fluid { background-image:url(images/icon_fluid.jpg); }
.controls li a.select{border:solid 1px #cc0000; width:14px; height:14px;}


JavaScript Code:

Now we need to create jQuery JavaScript, first include core jQuery Script, then we will create 3 different functions for 3 different control links, in that function we will apply “select” class in anchor so we can see which is active layout. and chance width of layout using “animate” function of jquery where we will define width of layout as per selection.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_780").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: 780}, 'slow', function() {;
});
});
$("a.switch_980").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: 980}, 'slow', function() {;
});
});
$("a.switch_fluid").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: '100%'}, 'slow', function() {;
});
});
});
</script>

Thats it!!!, your demo will be ready, Feel Free to post your comment if you find any bugs or issue.
Download Full Demo with all files from here…

9 comments

  1. Andrea   •  

    Fails in Chrome (the central block drops down)

  2. HPadmin   •     Author

    Oh yes Andrea.. I will fix it..
    Thanks for that…

  3. codie   •  

    this is a mean tutorial, love it.

  4. Robert   •  

    Awesome stuff – thanks for this – really looking forward to getting my teeth stuck into some jquery and ajax very soon.

  5. chad   •  

    great!

  6. Knoxville Web Design   •  

    This is really cool. Please let us know when you are able to sort the chrome issue out. Thanks again!

  7. Pingback: Dr Scholl’s Adjustable Arch Pain Relief Orthotics, Women’s 6-10, 1-Pair Packages | Pain Relief

  8. Pingback: Magnetic Adjustable Back Brace Pain Relief Support Wrap | Pain Relief

  9. Deathlock   •  

    Is it possible to done this with cookie? I mean, if we refresh the page, the width will return to default…

Comments are closed.