Matt Berseth

I recently blogged about how to create a YUI TabView theme for the AjaxControlToolkit's TabContainer control.  As a follow up to this entry, Peter Kassenaar asked the question: I just don't quite get how the CSS is able to extract the different (background) images from a single sprite.png file. I've googled for this, but that didn't help me much. Can you point us to a direction where this is further explained? This would give me the perfect opportunity to clean up my /images folder on the various themes of a project... In the YUI theme I created, I used a single sprite image and used CSS to pinpoint the location within the sprite for the background image of the tab panel header's.  Peter is asking how I did this.  To be honest, I just reverse engineered the CSS style attributes from Yahoo!'s demo site along with the exact same sprite image...

After working on a YUI TabView theme for the AjaxControlToolkit's TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web.  I was especially curious in seeing what it would take to include images in each of the tab panel header's.        Below are the controls I was targeting, where on the Internet I found them, and a short description of what it took to create the corresponding theme.  If you are not familiar with how theming the TabContainer works, I recommend reading the documentation for the TabContainer control.  Download | Live Demo | View Stylesheet   Technorati Tab Theme I like Technorati's tab control because it simple, yet in my opinion it still has a nicer presentation than the default xp style TabContainer theme.  Here is a link to the page where I found this control. Notes: To use this theme, include a link to...

I was browsing the YUI documentation and I came across a very nice looking tab control.  I thought it would be interesting to create a similar styled theme for the AjaxControlToolkit's TabContainer control.  I don't mind the default XP-themed TabContainer, but I think the XP style tab's are getting a little bit dated.  I had not previously created a theme for a TabContainer, so I had no idea what to expect.  It turns out it was very easy to do.  Below are the steps I followed ... Live Demo | Download Code [Update 10/1/2007] : Updated CSS so it would work with IE6 Check out here for additional TabContainer theme Check out here for an XP without the roll-over flicker   Read the 'Tab Theming' Section of the TabContainer's Documentation Because I haven't created a custom theme for this control yet, I needed to do a little research before getting started.  I read through the paragraph on the toolkit's sample site that explains how...

I recently stumbled upon this site again.  I remember on my first visit, I thought it was pretty cool how the modal popup's incorporate subtle animation effects that give the pages a little extra pop.  If you go to the site you can check it out for yourself.  Try clicking on any of the 3 images on the page and watch closely for the animation.  [Update: 9/20/2007] I followed up with Ted Glaza on his comment and he provided some additional information.  I included the email thread at the bottom of this post. Live Demo | Download This page appears to be using PHP, but I thought it might be interesting to re-engineer the modal popup using ASP.NET AJAX plus the ModalPopupExtender control from the AjaxControlToolkit.  I figured there should be some way to run an AjaxControlToolkit Animation when the dialog is displayed ... It turned out this was a little more difficult that I...

Recently I wrote an article describing how you could use CSS plus a GrdiView Control Adaptor to add the 'frozen column headers' feature to your GridView.  Live Demo (IE only) | Download I received the following comment from a kind reader named Mitch: I have also noticed that applying a skin to the gridview also seems to create TH elements for the headers. I have a simple solution that freezes the headers by doing the following: apply a skin to a gridview. wrap the gridview in a div or fieldset. Apply a css class to the wrapper that sets the overflow to scroll and the TH position to relative. You may need to set the TR height to 0px for IE. I set the height of the wrapper in the local style so I can reuse the css class. I have tested this in IE6 & 7 and Firefox and it works...

On September 11th and 12th I was in Orlando FL attending Mike Cohn's ScrumMaster Certification course.  The course consisted of two 8 hour days filled with scrum techniques and best practices.  I found the course valuable.  If you haven't met Mike Cohn, he is a high energy person that is passionate about scrum as well as software in general.  He does a good job presenting the material and makes an extra effort to tie it back to techniques you can take back to the office with you.  As a process, scrum is pretty flexible and Mike tells a number of useful stories about how successful scrum teams have adapted scrum to fit their organization's needs.  I found this useful as each organization tends to have its own unique quirks and I think it is reassuring to hear how others have adapted scrum to fit within their own organization. Going into the first day of the course, I was a little skeptical of what the value would be to...

I was recently browsing through some of the CSS samples on Stu Nicholls web site.  I came across one that showed a couple of examples of how CSS can be applied to HTML tables to provide the 'frozen columns headers' feature.  [Update: 10/1/2007]: I wrote a follow-up post describing how to acheive this using only CSS. Live Demo (IE Only - this is just a prototype) | Download In case you missed it, Dan Wahlin also recently created a nice AJAX Extender Control that accomplishes that same task using the ASP.NET AJAX client-side extender framework.  Dan's solution seems to work great (I have downloaded and played with it, but I am not using it in our production application), but I after looking at Stu's CSS only solution, I was curious what it would take to create an AJAX-less solution.  Stu's and Dan's solution are pretty similar.  Both embed the table within a DIV element to handle...

I was recently browsing through some of the samples on the Ajax Rain site.  I came across what I thought was a nice presentation for an HTML Table that supports sorting by clicking on the column headers.  There are a 3 visual features that I like about this presentation that I am not using in the current web application I am working on: 1. Support for 3 different state icons within the column headers (not sorted, sorted ascending and sorted descending) 2. Allowing the user to sort by clicking anywhere within the column header instead of just on the header text 3. Change the header cell's background color (light blue in the screen shot below) Live Demo | Download [Update 9/17/2007] Download link was broken.  It is now fixed. Thanks Diego for pointing this out. [Update 9/5/2007] Dave Ward pointed out a bug in my css that prevents this from working in FireFox and Safari. ...