Chris Pietschmann

husband, father, hacker, entrepreneur, futurist, innovator, autodidact


Bing Maps Ajax 7: Simple Pushpin Animation via Extension to Microsoft.Maps

When updating the location a pushpin using the Bing Maps Ajax Control, the pushpin instantly moves to its new location. Sometimes this may work, but other times it may be nice to animate the movement. Updating the location a vehicle in an asset tracking application is one example where it would be nice to animate the movement. I wrote a simple extension to the Bing Maps Ajax v7 control that adds the “Pushpin.moveLocation” method to perform such an animation. Usage Let’s start with some sample... [More]

Bing Maps Ajax 7: Adding InfoBox Support via Extension to Microsoft.Maps

The new Bing Maps Ajax v7 control may be faster and smaller, but it is pretty light on features at the moment compared to its older brother; the v6.3 control. One of the features missing is support for showing InfoBox’s. Its simple to handle mouse events and display a <div> next to the pushpin, but I thought I’d take a little time to write a simple InfoBox extension to the new Microsoft.Maps namespace. Here’s a screenshot of it in action: Usage Let’s start with some sample usage of th... [More]

jHash: Easily Manage Browser History / window.location.hash

When building Ajax-based web applications it can be difficult to get the web browsers back and forward buttons to work appropriately for each client-side state change. I recently published the new jHash library that can help alleviate this issue. Put simply: jHash allows you to easily be notified when the “window.location.hash” changes. It also allows you to easily store/retrieve values from the hash in a similar fashion to server-side query string values. Download: ... [More]

HTML5 Day 6: New Range Input Type <input type=range />

Some times a Range slider is the appropriate UI tool to allow a user to select a number within a given range. HTML5 adds such an element with it’s new “range” input type. Display in Modern Browsers In the above screenshot shows an example of the <input type=range/> element as it is rendered in the Opera web browser. Here’s the code for the range input shown: <input type=range min=0 max=100 value=25 step=5 /> This code defines a range input tha... [More]

HTML5 Day 5: New Date Input Type <input type=date />

Date is one of the new, and much needed, input types added in HTML5. This has been added as a replacement of using a text box for the input of dates. Below is a screenshot of the custom UI that the Opera web browser automatically implements for this new input type. Display in Modern Browsers This is a screenshot of the Opera web browser’s UI for the date input field. The actual display of this field is handled by the web browser and will vary in each browser and device the page is being v... [More]

HTML5 Day 4: Add Drop Down Menu to ASP.NET MVC HTML5 Template using CSS and jQuery

Today I was playing around with using jQuery to create a drop down menu. I thought I’d share an example of adding a drop down menu to the new ASP.NET MVC HTML5 Template that I created on Day 2. Before we begin, you’ll need to create a new site using the code from Day 2. You can either copy/paste the code from the article, or download the full source code. You’ll find the download link at the bottom of the post for Day 2. Here’s a screenshot of the finished dropdown menu: ... [More]

HTML5 Day 3: Detecting HTML5 Support via JavaScript

On Day 1, I covered exactly what HTML5 is and what’s necessary to convince older web browsers to render/style the new tags properly. Once you told the browser how to style the element, it still wont show special UI for the user. The good news is that you can “patch” the browser using JavaScript to enable such functionality. In this post we’ll discuss how to detect if a certain feature is supported by the browser or not. Why is the UserAgent unreliable for detection? Mozil... [More]

HTML5 Day 2: Upgrade ASP.NET MVC 2 Site Template to HTML5

Since HTML5 can be used in older browsers with some helper scripts, as covered in Day 1, I thought I’d use what I’ve learned to convert the default ASP.NET MVC 2 site template to HTML5. Convert Default ASP.NET MVC Site Template to HTML5 First, add the helper scripts, mentioned in Day 1, to the Site.Master and convert all magical DIVs over to “header”, “section”, “nav” and “footer” tags. Don’t worry about copy/paste, a download lin... [More]

HTML5 Day 1: New tags work in older browsers? Awesome!

I recently decided to really dig into HTML5 to see what it’s all about. After all, the web (err... tubes) is full of talk about how the new HTML5 Canvas element will bring an end to both Silverlight and Flash. In reality HTML5 is much more than just the Canvas element. In fact, HTML5 brings with it a large list of enhancements, including 28 new elements and form controls that do client-side data validation for you! Specification Doc or Book? Instead of reading the enormous HTML5 Specificat... [More]