November 29, 2007

A Few Options for Dynamically Adding Image Reflections

While waiting for VS 2008 Web Developer to download, I took some time to browse through the Visual Studio Express site.  I am not usually a fan of sites that use a black background, but I thought it actually looked pretty good here.  The contrast between the white text and black background makes it hard to look at for too long, however in general the site gives off that sleek and cool vibe that I am certain the designers were shooting for.  One visual item in particular that caught my eye was the nice reflection effect all of the images on the page had.  Check it out in the screen shot below.    Live Demo | Download (IE6, IE7 and FF) I have briefly looked into this before so I was curious how this page had implemented it.  I opened up the IE Developer Toolbar and took a quick look.  For this page, the developers created a single image that contains both the image and the reflection.  You can...

November 25, 2007

YUI DataTable Styled ListView

Now that .Net 3.5 and VS 2008 have shipped, I thought it would be a good time to take a look at the new ListView control.  I use the GridView quite frequently, and I am curious what the tradeoffs I would encounter if I used the new ListView control for rendering our tabular datasets.  I figured a good way to learn would be to create a ListView that generates one of my favorite looking HTML tables. So I re-implemented my existing YUI DataTable Styled GridView using the ListView.  My main goal for this task is just to get a better feeling for how the ListView control works.  Unfortunately my asp.net hosting service won't support .Net 3.5 until sometime next week so until then there isn't a demo.  But you can download the code for this sample. Live Demo | Download ListView Overview If you aren't familiar with the ListView control, here is a quick overview from MSDN.  I...

Topics: ASP.NET , ListView

November 22, 2007

No More Freeloading - Creating My First AjaxControlToolkit Patch

I use Yahoo! for my email client.  The main screen has the standard email client three section layout.  One area for selecting a folder (Inbox, Drafts, Sent Items, etc...), another area that displays the messages in a table or grid, and the last region shows a preview of the selected message.  You can select messages to delete, forward, move by clicking a checkbox to select the messages, and then by clicking the button that corresponds to the action you want taken.      Live Demo (IE6, IE7 and FF) | Download (This includes the complete AjaxControlToolkit solution plus the code for my patch) I am currently building a new screen for a project I am working on and I would like to use a similar design.  I want to allow the user to use checkboxes to select rows.  Once one or more rows are selected, clicking a command button (Delete, Copy, Export) will execute the actions...

November 19, 2007

Dev.Opera.com Style TabContainer Theme

While doing some research this afternoon I ended up on dev.opera.com.  Its a nice looking site.  The combination of colors, fonts, and images make browsing the sites content enjoyable.  I was especially impressed with the tabbed menu that sits at the top of the page.  The tabs are rounded, have rollover states and are very professional looking.  So during some downtime this afternoon I created a new theme for the AjaxControlToolkit's TabContainer control using the same images and styles as dev.opera.com.  Because I have created a few themes before (jquery, yui and technorati), I was able to reuse the general structure of one of my previous stylesheet's and just plugged in my new images.   Live Demo (IE6, IE7 and FF) | Download (.Net 2.0 and Toolkit Version 1.0.10920.0)  Tab Header Images This tab theme uses images to form the rounded corners.  The original images on dev.opera.com didn't have transparent background, so I used Paint.NET to set the background transparency (if you haven't used...

November 16, 2007

JQuery TabContainer Theme with Tab Transition Animations

A few posts back I described a technique you could use to add Animation effects to your ModalPopup controls.  A similar technique can be used to implement a JQuery style fade animation that runs as the user navigates between selected tabs.  While the technique I used is very similar to the one I blogged about before, I thought I would pass along the stylesheet for the JQuery tab theme as well as a quick overview of how I implemented the transition. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) JQuery Tab Theme Creating this JQuery theme wasn't too difficult.  I grabbed one of the stylesheets from a theme I had created before and tweaked the style attributes to what was required to look like the JQuery tabs.  My JQuery themed stylesheet is divided into 3 sections: common styles, styles for the inactive tabs and finally the styles for the active tab.  Just...

November 11, 2007

Anti-Aliased Rounded Corners with the NiftyCornersExtender Control

When I was in college I took a course on Software Construction.  With 3 weeks left in the semester, the professor assigned us a project that he knew would take close to 6 weeks to implement.  To meet the deadline he allowed us to leverage 3rd party components where possible.  He encouraged us to think about a solution that was constructed from other components as opposed to one that we developed from scratch.  This professor was good.  This is exactly the same type of problem I encounter everyday. Live Demo (IE6, IE7 and FF) | Download (Uses Toolkit Version 1.0.10920.0) I took this construction approach on a recent project.  Our team is looking to soften some of our UI elements by using the toolkit's RoundedCornerExtender control.  The toolkit's rounded corner implementation does not include anti-aliasing and as a result, the corners look pretty rough. (Anti-aliasing is a technique that is used to make graphics and text easier to read.  Here is...

November 07, 2007

YUI Styled 'Tip of the Day' Dialog using the PopupControl, DynamicPopulate and DragPanel Extender Controls

The web application I am currently developing has a fair number of popup windows.  Some are modal, some aren't.  All open new browser windows and this annoys more than a few of our users (I hate popup's too, so I guess it shouldn't be that surprising).  So as a team we are looking into replacing our popup windows with the ModalPopupExtender and PopupExtender AjaxControlToolkit controls.  This is just fine by me - I have worked with the toolkit's popup controls on other projects and they worked quite well (It also saves me the pain of writing custom JavaScript for communicating between browser windows).  Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) So as an R&D task, I created a page that implements a simple 'Tip of the Day' popup control.  The functionality is basic - you click a button and the Tip of the Day panel is displayed.  Once displayed, you can click that 'Next Tip' button to fetch the...

November 04, 2007

'Don't Ask Me Again' Delete Confirm Using a ModalPopup and ASP.NET's Profile Properties

Like I mentioned in my last post, I have been researching ways to make our web application a little more user friendly by including a handful of personalization features.  This research was oringally spawned from one of our more savvy users that was tired of always confirming deletes via our delete confirm dialog.  Our standard thus far has been to include this confirmation step at every place within the application where we allow the user to perform a delete.  For some users this confirmation step has become a little annoying.  So I nominated myself to look into what it would take to include the typical 'don't ask me this question again' checkbox to our confirmation dialogs. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0)        Notes on the Demo: Use the 'Reset Profile' button if you want to see the confirm dialog again I removed the connection string from the download's web.config.  You will need to point to your existing...

November 01, 2007

5 GridView Themes Based on Google's Personalized Homepage (igoogle)

On my work and home PC's I have my browser's homepage set to google.com.  Like the rest of the world, for about the past 7 years or so I have been using google as my starting point for Internet searches.  Sometime within the past year I took the time to setup google's personalized homepage - igoogle.  I configured my homepage with a nice blend of sporting and tech related gadgets.  I like this because it gives me a nice dashboard to the content that interests me most. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) One of the silly features I have found that I like about igoogle is how the pages color palette changes depending upon the time of day.  So as the day progresses from morning to afternoon to evening the colors on the page change as well.  Like I said, I know this is a silly feature, but I like it.  And I have asked...


Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • TimothyP wrote: I work with tons of developers who haven't even got a clue what Twitter of Facebook is. In fact, it'...
  • Janko wrote: Yes it's strange that people think it's ok to blog at work but consider unethical to use facebook. P...
  • Kam Lagan wrote: Hi Matt, The numbers do seem a little "off" to what you perceived the community would be like. But...
  • Siderite wrote: You're kidding me! So the people that don't blog think it is ok to blog at work (maybe because they ...
  • Guy Harwood wrote: Good to see the results. one typo.... 'What best describes your current job title?' appears twice,...
  • sirrocco wrote: One problem with : DEV I DEV II DEV III was that I didn't know what it meant :( .(is it common ...
  • Jack wrote: How many person fill the survery? Blog is very common, so I don't think 71.5% is high. Maybe our bos...
  • Andy wrote: Done. The developer1, developer2 question - not sure how meaningful the results are going to be for ...