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]
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]
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: http://jhash.codeplex.com ... [More]
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:
This code defines a range input tha... [More]
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]
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:
Why is the UserAgent unreliable for detection?
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]
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]