Matt Berseth

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...

Comments (4) | TrackBacks (0)

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...

Comments (12) | TrackBacks (1)

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...

Comments (8) | TrackBacks (0)

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...

Comments (2) | TrackBacks (0)

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...

Comments (16) | TrackBacks (0)

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...

Comments (22) | TrackBacks (0)

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...

Comments (15) | TrackBacks (0)

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...

Comments (10) | TrackBacks (0)

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...

Comments (5) | TrackBacks (0)