Using JQuery to set create a flexible 3 column layout with Divs
This evening I was working on creating a Full Width skin for http://www.sccaforums.com/, the current skin is at a fixed width, which doesn’t work very well for an active Forum when you have a browser with a high resolution. (The site runs on DotNetNuke, so this post will feature examples for DotNetNuke, but the code is applicable to any HTML pages)
Basically I wanted a three column layout, and depending on if there was content in the Left and Right columns, I wanted them to not display at all, causing the Middle column to expand to fill the void.
This is actually fairly easy to do if you are using a table based HTML layout, the following code would suffice for most sites.
<table id="MyTable">
<tr>
<td runat="Server" class="LeftPane">Column1</td>
<td runat="Server" class="ContentPane">Column2</td>
<td runat="Server" class="RightPane">Column3</td>
</tr>
</table>
<style>
.LeftPane{width: 150px;}
.ContentPane{width: 100%;}
.RightPane{width: 150px;}
.DNNEmptyPane{width: 0px;}
</style>
(one item of note, the open source CMS DotNetNuke places a class called DNNEmptyPane into a DIV or TD that is marked as a server control, but doesn’t have any Modules in it, with that you can hid the element)
But if you are using a DIV based layout, which is proper if you are shooting for XHTML compliancy then you don’t have anything that will do this very easily. Basically I need to be able to dynamically apply a width to the Middle column of the three column layout.
At first I was going to look at how to try to do this in C# or VB code, but realized you can’t access the Size of the Browser window from that code, so it would have to be done via Javascript.
After spending some time messing around with JS I figured out that screen.width was not going to give me the size of a browser window, it would simply give me the size of the user’s screen, which doesn’t apply if the user has the browser open in a smaller window than full screen.
From there I stumbled on a page talking about using $(window).width() to get the width of the user’s browser, the $() symbolizing jQuery. PERFECT! As DotNetNuke has included the jQuery libraries for a couple of years now.
I ended up finding some javascript code that would allow me to access the Styles defined in a style sheet and change them, but considering how many CSS files that DotNetNuke loads I didn’t think that would be the most efficient method of access. So instead of using that javascript code I figured out how to read the CSS properties from various page elements (div tags) and how to modify them using jQuery.
Basically with jQuery you can access CSS on an element by using the following to read
$(“ID”).width();
and then this to set the value
$(“ID”).width(VALUE);
Though some attributes are harder to get to, like Padding. Here’s examples for how to change the padding
$(“ID”).css(‘padding’,VALUE);
For more examples check out the jQuery documentation, it’s extremely helpful!
I ended up coming up with a nifty little script that I can use to resize the ContentPane div tag in DotNetNuke, while respecting if there is a LeftPane or RightPane included in the skin. This assumes that LeftPane and ContentPane are floating left via CSS and RightPane is floating right.
Here’s the basic HTML for the three DIV’s I’m trying to work with
<div id="pc">
<div id="LeftPane" runat="server" class="lp" />
<div id="ContentPane" runat="server" class="cp" />
<div id="RightPane" runat="server" class="rp" />
</div>
<style>
.lp
{
width:150px;
float:left;
margin-left:5px;
}
.cp
{
width:90%;
float:left;
}
.rp
{
width:10%;
max-width:88px;
float:right;
margin-right:5px;
}
</style>
Another item of note, DotNetNuke/ASP.NET change the ID’s of the DIV tags that are marked with runat=”server”, in DNN they change to dnn_LeftPane, dnn_ContentPane and dnn_RightPane.
Here is the javascript code used to dynamically change the width of ContentPane div tag
<script type="text/javascript" language="javascript">
function ResetPaneSize() {
//get the width of the ContentPane to start
var width = $("#dnn_ContentPane").width();
//set our new width to the original width
var newWidth = width;
//the page width of our outer div is 95%
var wrapperWidth = .95;
//setup the width of the left and right side, along with padding (used in margin) to add to content pane, initially set to 0
var leftWidth = 0;
var leftMargin = 0;
var rightWidth = 0;
var rightMargin = 0;
//check the outerWidth of the LeftPane, outerWidth(true) returns width, padding, border and margin
if ($("#dnn_LeftPane").outerWidth(true) > 0) {
leftWidth = $("#dnn_LeftPane").outerWidth(true);
leftMargin = 15;
}
//check the outerWidth of the RightPane, outerWidth(true) returns width, padding, border and margin
if ($("#dnn_RightPane").outerWidth(true) > 0) {
rightWidth = $("#dnn_RightPane").outerWidth(true);
rightMargin = 15;
}
//figure out what the new width should be: width of browser * width of outer div + (left + right)
newWidth = $(window).width() * wrapperWidth - (leftWidth + leftMargin + rightWidth + rightMargin);
//if the original width and the new width are different set them
if (width != newWidth) {
//set the new width of the ContentPane
$("#dnn_ContentPane").width(newWidth + 'px');
//add some padding to the content pane, only adds the padding if the Left (or Right) pane are populated
$("#dnn_ContentPane").css('padding', '0px ' + rightMargin.toString() + 'px ' + '0px ' + leftMargin.toString() + 'px');
}
}
ResetPaneSize();
$(window).resize(function () {
//alert(' resize width: ' + $(window).width());
ResetPaneSize();
});
</script>
I may look at making this a DotNetNuke Widget of some sort, but for now it works inline on my skin! I have a few more things to get working on the skin before I push it live on SCCAForums.com though.
Feel free to modify and reuse this script, if you would like to give me credit for it, please link back to http://www.chrishammond.com
Disclaimer: As always, before making changes to your files back everything up! I’m not responsible for any damage you cause!