Chris Pietschmann

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

NAVIGATION - SEARCH

jHash v2.0 Released: Now with Routing Support!

jHash is a small, lightweight (4kb minified / 2kb compressed) javascript library that makes it extremely easy to work with “location.hash". Version 1.0 had the ability to set / retrieve hash root values as well as “hash querystring” values. The newly released version 2.0 includes a new lightweight routing engine that facilitates an easier developer experience when building Single Page Applications. The jHash documentation contains full descriptions of the libraries methods and their usage.... [More]

HTML5 IE9 Bug: SELECT box is Un-Selected using Mouse if CSS modifies position on hover

I recently encountered this rather strange bug that only shows up in Internet Explorer 9 (haven’t tried 10, but likely there too,) but works just fine in IE8, Firefox, Safari and Chrome. Generally the HTML/CSS markup for an individual page within a normal web application can get pretty complex, so this bug took me a while to figure out what it was. Apperently, if you have a <SELECT> box contianed within a <TABLE> (which is done fairly often with data entry interfaces,) and you have ... [More]

Geomap Project - HTML Extensions for Rendering Map Displays

One thing missing from HTML5 is the ability to render maps on a page. The Bing Maps and Google Maps JavaScript API’s are generally fairly simple to implement, but they could both be easier. I wrote up a small example API that allows you to add Maps, and plot data on those Maps, to an HTML page by using mostly HTML markup using a new <geomap/> tag. While this project uses JavaScript to perform the map rendering once the page loads, all you need to do to implement it is write some simple ma... [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 /> .csharpcode, .csharpcode pre { font-size: sm... [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 view... [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 view... [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 view... [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 view... [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: Here’s another scre... [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? Mozilla/4.0 (compatible; MS... [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? Mozilla/4.0 (compatible; MS... [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 link for the full source code is at the bottom of the post. Here’... [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 link for the full source code is at the bottom of the post. Here’... [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 link for the full source code is at the bottom of the post. Here’... [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 link for the full source code is at the bottom of the post. Here’... [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 Specifications... [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 Specifications... [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 Specifications... [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 Specifications... [More]