enavu webdevmania tutsvalley psdestination
visit the enavu network
9 Comments Article Title Overlay

jQuery/CSS Incremental Layout Size Adjuster

Using jQuery and CSS we will create an incremental layout size adjuster that can make our whole website become either larger or smaller depending on the users preference.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Using jQuery and CSS we will create an incremental layout size adjuster that can make our whole website become either larger or smaller depending on the users preference.

In professional templates for blogs especially you will see an icon with a large A and a small A, by clicking on each you can either increase or decrease the font size of the page. What if you took that a step further and increased or decreased the size of the whole website. Today I will go over a concept I have not seen before that can make your website very unique. This will more or less imitate the browser zoom you may be accustomed to.

First we will start with a very simple html layout.

<body>
<div class="header">
	<h1>Lorem Design</h1>
</div><!--header-->
<div class="left_col">
	<p> Lorem...ros. </p>
</div><!--left_col-->
<div class="right_col">
	<p> Ut...cus. </p>
	<p> Integer ...ec. </p>
</div><!--right_col-->
</body>

This layout is very traditional, header and two columns. Now that we have the layout let’s add the styling.

body {
	font-size:16px;
}
.header { width:50.63em; /* 810px */}
.header h1 {font-size:1.75em;  /* 28px */}
.left_col {
	width:18.75em; /* 300px  */
	float:left;
	margin-right:1.25em; /* 20px */
}
.left_col p {
	font-size:1em;  /* 16px */
}
.right_col {
	width:31.25em; /* 500px */
	float:left;
}
.right_col p {
	font-size:1.19em; /* 19px */
}

As you can see I have used EM for every single size on the page, from width’s and margins to font-size. If you haven’t done this before here is what you need to know. You should always set a custom body font-size, once you set that font size you use it to find the exact width of the rest of the elements. Here is a nice online calculator that will help you with this. Once you have used EM’s for everything our job becomes so easy a 1st grader can do it ;) .

Now for the jQuery part. Let’s add the necessary controls in our webpage, something like this:

<div class="controls"><a class="up">up</a> | <a class="down"></a></div><!--controls-->

And now we need the jQuery to incrementally increase and decrease the Layout.

$(document).ready(function(){
	var size = 16;
	$(".controls .up").click(function(){
		size++;
		$("body").animate({fontSize: size});
	});
	$(".controls .down").click(function(){
		size--;
		$("body").animate({fontSize: size});
	});
});

So the jQuery sets a variable with the default font-size. And then on click of either control it will increase and decrease the size respectively.

Here is a working demo of the concept.

Related posts:

  1. Simple Fast and Dirty Introduction to jQuery
  2. How To: Jquery Scroll to Anchor and Scroll To Top (simple)
  3. Top 10 jQuery Snippets (including jquery 1.4)
  4. Use HTML5 Placeholder Input Attribute Today using jQuery!
  5. Mock Design Slice HTML CSS JavaScript – Modern Approach to Creating Websites

Did you absolutely LOVE this article... share it!

Comments

  • For a beginner you are absolutely right!

    However for professionals, you shouldn’t be using templates. Firstly, customizing other people’s code and design can be more time consuming than if you code yourself (well assuming you are a pro coder) especially if the code is not well documented. Secondly, it might make you lose an opportunity to design better (you use existing image/design from template whereas you could have done better). Thirdly, when the client wants certain changes to the template or layout, it might be time consuming and confusing.

  • I’m sorry Steven i don’t know why you assumed i was condoning the use of Templates… i was referring to an element commonly seen in those… only as a reference.

    As far as time consumption you are partially wrong as you control the size of the whole website with only one value…. that means faster not slower changes of the layout.

    Also you missed the point of this article! It was a proof of concept allowing people to use features like increase font size across a website and make it easier for people with poor vision to increase the size via jQuery and read things easily.

    And as for your third point, consider creating website in a standard manner and you will find it less time consuming to go back and edit your own work :)

  • IMO the article was not about templates at all. It was just mentioned in the beginning as an example of where something similar could be found. The demonstration of a page-wide layout adjustment can be applied anywhere – in fact this would work best for a custom site built from the ground up, whereas a template would likely require enormous amount of adjustment just to implement the example.

  • Nice concept! But demo seems a bit lame when you push one link very often. I think locking the links during resize could be important.

  • Eric you are absolutely correct, i did not at all have this in mind for Templates and the mention of them was merely to give you an idea of the possible uses! And yes implementing this to an existing site would be too much work, and if indeed the need for this appears in a project it could be beneficial to use. All i tried to do is give people the proof of concept, and an idea of using EM’s in designs as a great measurement of all things size.

  • Dennis keep in mind this is a proof of concept not an actual website element that should be used as is. I really wanted for people to take away the idea of EM’s and a little awesome jquery code to inspire you in the future.

  • Very nice, thanks

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting