Important Notice: Anyone who tried to download the Notification Bubbles PSD yesterday will have noticed it was empty. It's been fixed now!
The Finished Box

Digital Resource Magazine

Subscribe
Options
About tfbox
Share

Changing Website Dimensions based on Browser Width

Loading...
0
5307
Changing Website Dimensions based on Browser Width

Learn how to use jQuery to change your website’s dimensions depending on your browser width with this quick tutorial.

Love it? 16
Tutorial Details
Tutorial Type
jQuery
Difficulty
Easy
Estimated Time
10 Minutes

Web design has come along way over the years along with screen resolutions. As it’s evolved you can no longer just expect people to be using the typical 1024*768 screen resolution. Screen’s nowadays come in all shapes and sizes some people even use HDTV’s, why not make use of some of that potential extra space you have and adapt your site to sustain larger and smaller resolutions for a better user experience? It is 2011 remember technology is far superior to how it was 5 years ago.

In this tutorial I will show you how you can easily execute two custom styles for your site using the power of jQuery.

STEP 1

Getting Started

Lets start off with a basic HTML Structure:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Changing Website Dimensions based on Browser Width</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script>
        //jQuery goes here
    </script>
</head>
<body>
    <div id="wrapper">
        <div id="container">
            <div id="main">
            
            </div>        
            <div id="sidebar">
            
            </div>
        </div>
    </div>
</body>
</html>

Now that we have our simple HTML Structure we will first apply some css to it, add the following:

html,body,#wrapper { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    font-family:arial;
}

#container {
    width:960px;
    height:100%;
    margin:0 auto;
}

#main { 
    width:760px; 
    height:100%; 
    background:#333; 
    float:left;
}

#sidebar { 
    width:200px; 
    height:100%; 
    background:#666; 
    float:left;
}
This will be the small (default) css.
STEP 2

Create the large css

Now you will want to create the larger version of your site, how wide you do it is up to you but in this example it will be done as follows:

#container {
    width:1160px;
}

#sidebar { 
    width:400px; 
}

I saved that in a file called large.css

STEP 3

The jQuery

Now back to your HTML File, If you’re using this example as a test go to line 9 and insert the following script, else insert this in a script tag at the bottom of your head:

$(window).resize(function(){
    if ($(window).width() > 1200) {
        if (!$('#large').length) {
            $('head').append('<link rel="stylesheet" type="text/css" id="large" href="css/large.css" />'); 
        }
    }
    else {
        $('#large').remove();
    }       
}).trigger('resize');

What this basically does is checks to see if the window width is greater than 1200px, if it is it will check to see if the ID large exists and if it doesn’t it will append it to the head tag.


Conclusion

There are other alternative methods of doing this using CSS3 Media Queries but I feel this is a much better way of doing this, it’s currently how we execute multiple browser widths at the moment, if you know of any alternative methods or feel that something could be improved feel free to let us know in the comments and we’ll get back to you.

Connect to the author

I am the founder of The Finished Box, a Digital Resource Magazine. Founded in October 2010 and launched in February 2011 my focus is to bring you articles, inspiration, freebies and more focusing on quality more than quantity.

blog comments powered by Disqus