Friday, May 29, 2009

ASP.NET CheckBoxList Align When Wrapping

I have been recently tasked with making a new Theme for a ASP.NET project at work. I was told that I could only update the Theme folder and nothing else (not C#, not JavaScript, not jQuery, etc…).

Part of the requirements for the new theme is that it be friendly to older users (a.k.a. use bigger fonts).

As I made the fonts bigger in the site a lot of text started to wrap in places that it hadn’t before (like the checkboxlists for example).

This is where the ASP.NET CheckBoxList comes into play. When the labels next to the checkboxes gets longer it doesn’t wrap nicely…

CheckListBefore

Instead, I need the wrapped text to align nicely under the text above next to the checkbox like…

CheckListAfter

At first, I was like… “Ohh, that shouldn’t be a big deal”, but then I realized I was dealing with a table, tr, td, etc…

I did a quick Google search and found a lot of other people having the same problem, but in all of the cases no one had a solution or the responders of the questions said it wasn’t doable.

So, I thought I would take a stab at it myself. Here is what I came up with which appears to work in IE6, IE7, and Firefox 3. For some reason it doesn’t work in IE8 and Chrome 3 (which does bother me, but I’ll investigate more later).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>CheckBoxList Align when Wrapping</title>
  <style type="text/css">
         .checkBoxListWrap {
            width: 500px;
         }
         
         .checkBoxListWrap tr td {
            border: 1px solid black;
            vertical-align: top;  
            padding: 5px;
            width: 33%;
         }
         
         .checkBoxListWrap input { 
         }
         
         .checkBoxListWrap label { 
            position: relative;
            float:left;
            margin-left: 25px;
            top: -20px;
         }
      </style>
   </head>
   <body>
      <table id="chkCheckBoxList" class="checkBoxListWrap">
         <tbody>
            <tr>
               <td><input type="checkbox" id="chkCheckBoxList_0"/><label for="chkCheckBoxList_0">Item</label></td>
               <td><input type="checkbox" id="chkCheckBoxList_1"/><label for="chkCheckBoxList_1">Medium Item</label></td>
               <td><input type="checkbox" id="chkCheckBoxList_2"/><label for="chkCheckBoxList_2">Realllllly Long Item</label></td>
            </tr>
            <tr>
               <td><input type="checkbox" id="chkCheckBoxList_3"/><label for="chkCheckBoxList_3">Realllllly Long Item</label></td>
               <td><input type="checkbox" id="chkCheckBoxList_4"/><label for="chkCheckBoxList_4">Realllllly Realllllly Realllllly Realllllly Long Item</label></td>
               <td><input type="checkbox" id="chkCheckBoxList_5"/><label for="chkCheckBoxList_5">Item</label></td>
            </tr>            
         </tbody>
      </table> 
   </body>
</html>

You are also welcome to view the demo of the above code sample.

Note: If you can fix the code to work in IE8 and Chrome 3 that would be greatly appreciated. If so, please post a comment with your solution!

jQuery Resource Collection

I recently started a Google Spreadsheet to include top resources for jQuery such as where to get started, great plugins, helpful tools, useful cheat sheets, quick tutorials, etc… (accessible via the tabs at the bottom of the spreadsheet)

I’ve only just begun to fill out the Spreadsheet, but I have already shown several people and told them I would post it online as a resource for them.

I hope to maintain this list not only for myself, but also to assist those that are looking for good resources. I envision more tabs being created in the near future (such as Unit Testing Frameworks, etc…)

Note: Make sure to click the tabs at the bottom on the above spreadsheet... like the Tutorials, Plugins, Tools, Cheat Sheets, and whatever else might be there in the near future :)

If you have a great resource you would like to recommend to this list, please leave a comment and I will consider adding it.

Wednesday, May 27, 2009

TweetDeck vs. Seesmic

To TweetDeck or not to TweetDeck? That is the question…

Seriously, with the recent release of Twhirl’s big daddy Seesmic, should you abandon TweetDeck and change your loyalties?

Well, there are two main reasons why you may consider changing your twitter client…

  1. Smaller Footprint
  2. Supports Multiple Accounts

For more information

Seesmic Desktop doesn't have TweetDeck's voracious appetite for RAM. At startup it weighed in at about 65Mb and has reached 79Mb after letting it run overnight. Leaving TweetDeck on would typically result in anywhere between 300 and 600Mb of memory consumed. Seesmic also supports multiple Twitter accounts, so it bests TweetDeck beaten on two fronts. --Seesmic Desktop packs TweetDeck's features with a smaller footprint

I’ve been using Seesmic for the past week or so and I’ve found it to be very refreshing. Most of the features from TweetDeck are present in Seesmic and I would imagine in the near future the gap between them will become even closer.

Top 5 jQuery Modal Plugins

I’ve been working on a couple of prototype projects over the last month or so and inevitably I end up needing some type of modal dialog to either notify or request information to/from the user.

Historically, I’ve just been  BlockUI man, but I wondered what everyone else in the jQuery community was using for a modal dialog plugin.

So, about a week ago I tweeted a poll from PollDaddy asking what modal plugins you use.

Here are the results of the poll…

As you can see, out of the 15 jQuery Modal plugins that I polled, the community picked the following 5 to be their favorite jQuery Modal Dialog plugin…

  1. ThickBox
  2. BlockUI
  3. jQuery UI Dialog
  4. jqModal
  5. Facebox

Thursday, May 21, 2009

jQuery Introduction Talk

Tonight I am giving a “jQuery Introduction” presentation to the Nashville .NET User’s Group.

Time: Pizza @ 6:00pm; Presentation @ 6:30pm;

Topic: jQuery Introduction

jQuery is a JavaScript framework that makes client-side coding more simple and powerful than compared to straight JavaScript. This session will give an overview of benefits of jQuery, show how to integrate jQuery in your project, and demonstrate how easy it is to do complex things with a small amount of jQuery code.

Location:

VACO, LLC
Highwoods Plaza I (Signage out front says Aspect - Cogent)
Suite 460 (4th floor)
5410 Maryland Way
Brentwood, TN 37027

(615) 324-8226

Update: You can now download the slides from my presentation. I used the S5 web based presentation tool which allowed me to actually run jQuery examples inside the presentation.

Note: The video is still being encoded and should be live sometime this weekend. I will update this post with the video once it is available.

Monday, May 18, 2009

Speaking at CodeStock 2009

I am honored to have been picked as one of the CodeStock 2009 speakers for this year. Thank you to everyone who voted for my session!

The results of the voting came out yesterday and have been posted to the CodeStock website.

Useful jQuery tips, tricks, and plugins with ASP.NET MVC
Elijah Manor - ( Area: ASP.NET MVC Level: 200)

ASP.NET MVC has included the jQuery framework as part of their installation package. There are many ways in which jQuery compliments ASP.NET MVC by making the Views very simple. This session will review various tips, tricks, and plugins that demonstrate how jQuery and ASP.NET MVC work very well together.

codestock_title_09

CodeStock will be taking place June 26-27, 2009 in Knoxville, TN.

Purchase your tickets today!

You can find a list of Twitter Users that have already signed up for CodeStock on their website.

I hope to see you there! I’m sure I’ll be tweeting about my experiences :)