Exam Target Audience
The target audience of the Microsoft Specialist: Programming in H... [More]
The following code can be used to read what the full QueryString value is from the current pages URL:
var queryString = document.location.search;
A very common code snippet that's used a lot in various applications is the ability to detect if a specific element in the page is hidden or visible. jQuery provides some very useful functionality that allows for this to be easily determined; as well as making it easy to toggle the visibility of HTML elements on the page.
Detect if Element is Visible
Using a bit of CSS and the jQuery ".is" method makes it very easy to determine if the HTML element in the jQuery selector is either hidden or visib... [More]
Here's a simple implementation of a ".contains" function that is case sensitive:
function contains(value, ... [More]
Simple Page N... [More]
Creating a Dict... [More]
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]
All web developers have likely seen how inconvenient it can be for a user to edit some data in an application, then click a link/button to go on to the next task, but only to later realize that all changes made were never saved. This can pose a major problem for users, until they get it down that they need to click the “Save” button before leaving the page. Wouldn’t it be nice for the app to remind them to click the “Save” button? Everyone has seen the “Are you sure you want to leave this page?... [More]
The tag editor featured on the StackOverflow website (and all the StackExchange websites) is a real slick tag editor that makes it much nicer to enter tags than just a plain textbox. I searched a little and couldn’t find anything that works just like theirs, so I decided to build one.
Download Full Source Code: jquery.selectit-0.1.zip
Here’s some example usage of the tag editor:
<div id='SelectBox' style='width: 350px'></div>
<input id='btnClear' type='button' valu... [More]
For some odd reason the Bing Maps team decided to not allow HTML tags within the Description property of the InfoBox class they baked into the Bing Maps v7 Ajax control. I don’t know why they would limit it in such a way, but thankfully I have figured out a hack to override it and allow HTML tags as desired. Here’s a full sample page that adds a map with pushpin and infobox, and sets up overriding support to allow HTML tags within the infobox’s description: <!DOCTYPE html>
The Bing Maps Ajax v7 control doesn’t include support for adding a Mini Map. So, I decided to quickly work up a simple example of adding one. Below is the source code for it and a zip download of the code at the bottom of the post. Source Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv=&quo... [More]
The Bing Maps Ajax v7 control does not include support for adding custom buttons to the navigation bar (where the zoom, pan and map style buttons are). There may be times when you will want to add a custom button or two, and this post contains some simple code that will help you do so. Here’s a screenshot of this in action. The ‘Click Me’ link in the navigation bar is a custom button that the below code adds. Code First, here’s the code that I came up with to add custom navigation bar butto... [More]
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?