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!
Are you racking your brain trying to come up with that DotNetNuke person in your life? If so, I’ve got just the solution!
You can buy them my book! DotNetNuke 5 User’s Guide: Get your website up and running! It’s the perfect item for the DotNetNuke love of your life.
If you buy a copy and want it signed, I’ll even offer to sign it if you mail it to me. Please be sure to include postage both ways. You probably won’t be able to get it to me and back in time for Christmas but the signing can happen at any time.
You can mail it to:
DotNetNuke Corporation
c/o Chris Hammond
155 Bovet Rd, Suite 201
San Mateo, CA 94402
You might even be able to talk my co-author Patrick Renner into providing the same service, though you’ll have to contact him at http://www.patrickrenner.com/ to ask!
So head on over to Amazon and check out the book, be sure to get your orders in in time for Christmas!
For the DotNetNuke Connections conference last month I provided an advanced DotNetNuke module development course as a pre-conference training session. That training covered details on how to implement some of the newer features in the DotNetNuke platform within custom modules, mainly ContentItem integration and Taxonomy features.
For the course I created a very basic Article module for DotNetNuke, ultimately naming it DNNSimpleArticle. For the course I created both a C# and a VB.NET version of the module. Since that course offering I’ve cleaned things up a bit more in the module and just tonight uploaded it to Codeplex at http://dnnsimplearticle.codeplex.com. Please read the full blog post for details on the module, and a few warnings (this module is not supported, use at your own risk)
For the DotNetNuke Connections conference last month I provided an advanced DotNetNuke module development course as a pre-conference training session. That training covered details on how to implement some of the newer features in the DotNetNuke platform within custom modules, mainly ContentItem integration and Taxonomy features.
For the course I created a very basic Article module for DotNetNuke, ultimately naming it DNNSimpleArticle. For the course I created both a C# and a VB.NET version of the module. Since that course offering I’ve cleaned things up a bit more in the module and just tonight uploaded it to Codeplex at http://dnnsimplearticle.codeplex.com.
Keep in mind a few things before I talk about the features of the module.
- This module is not supported! (use at your own risk)
- This module is free.
- This module is released under the same MIT license that DotNetNuke is licensed.
- This module has seen limited testing, use at your own risk
- This module is compiled against DNN 5.5.1, it will not install and run on an older version without a recompile.
- The initial release has both C# and VB.NET code but future releases will likely only be released as C#.
Here’s a brief summary of the module. It’s a very basic module for creating articles (title, description,body) and has the ability to assign articles with the DotNetNuke Taxonomy functionality. It also provides some simple SEO functionality by defining the HTML page title, description and keywords when an individual article is loaded in the view mode.
This module provides the following functionality
- Create and display articles
- Display a paged list of articles
- Articles get created as DNN ContentItems
- Categorization provided through DNN Taxonomy
- SEO functionality for article display providing HTML Title, Meta-Description and Meta-Keyword functionality
- Dynamically loaded Controls for ArticleList and ArticleView based on ArticleId parameter in the querystring
- Displays list of Categories below Article on ArticleDisplay, this list Links to the SearchResults page passing in the Category as the TAG parameter to display in the list.
- Compiled against DNN 5.5.1 (if you want to run against an older version you will have to recompile it)
- Uses MSBuild for automated packaging (requires MSBuildTasks from http://msbuildtasks.tigris.org/) (check out this blog post for a bit of info/video on the msbuild)
I’m currently running the module on a DNN website I setup recently at http://www.sccaforums.com/ it’s providing the front page news for now. There are obviously still some things that can be tweaked for the module, and also with that site in general, but it is functioning well and has been indexed rather well by search engines in the two weeks it has been running there.
I’ll be blogging over the next couple of days with more details on that website in particular, as it is a recent conversion from the CommunityServer platform to DotNetNuke. I have another codeplex project for the SQL Scripts used in that conversion process. The blog will talk about the process and hopefully provide some guidance to people interested in converting a website from CommunityServer to DNN.
Back to the module though: You can download the first release (labeled V00.00.03) from Codeplex.