Chris Pietschmann

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

NAVIGATION - SEARCH

Study Guide for 70-480 Programming HTML5, JavaScript, CSS3 Certification Exam

There are many benefits to getting certified in a given technology, as it helps to show / prove your expertise. While there are many certifications for various technologies, there are not very many available to get certified win HTML5, JavaScript, and CSS3 web technologies. The Microsoft 70-480 exam is a really good exam to get certified as a Microsoft Specialist: Programming in HTML5 with JavaScript and CSS3. Exam Target Audience The target audience of the Microsoft Specialist: Programming in H... [More]

JavaScript Tips: Parse QueryString to Dictionary

The URL Query String is something that is usually just sent to the server-side code and parse there for use in specifying the data to query. A somewhat little known feature of the JavaScript DOM is that the QueryString values are accessible from client-side javaScript code too. The following code can be used to read what the full QueryString value is from the current pages URL: var queryString = document.location.search; Although, the QueryString value can be accessed from JavaScript, it isn't p... [More]

jQuery Basics: Is Element Hidden or Visible?

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]

JavaScript Basics: String Contains Function

In many of the server-side programming languages like C#, the String object has a "Contains" method that returns a boolean indicating if the string contains another specified string. JavaScript however does not have a ".contains" method. Fortunately, the ".indexOf" method in JavaScript can easily be used to mimic or build your own ".contains" method. Simple JavaScript String Contains Method Here's a simple implementation of a ".contains" function that is case sensitive: function contains(value, ... [More]

JavaScript Basics: Url / Page Navigation via document.location

Most often from an HTML page when you need to navigate the user to a different page it will be done via an anchor tag ("<a/>"). This works fine if the user explicitly initiates the navigation by clicking the link. However, there are many times when building a web application the page navigation needs to be performed from JavaScript / Ajax code. This can be done using "document.location" in the HTML DOM, but it supports a couple more features than most developers are aware of. Simple Page N... [More]

JavaScript Basics: How to create a Dictionary with Key/Value pairs

In statically typed programming languages a Dictionary (Key/Value pair collection) object can be very useful at times. While JavaScript doesn't natively include a type called "Dictionary", it does contain a very flexible type called "Object". The JavaScript "Object" type is very versatile since JavaScript is a dynamically typed language. This flexibility allows for the "Object" type to be used in ways that might seem strange when compared to statically typed languages such as C#. Creating a Dict... [More]

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]

IronJSMVC: Script ASP.NET MVC in JavaScript using IronJS

Personally, I enjoy writing much of my applications using a statically typed language such as C#. However, I would really prefer to be able to write UI logic and script certain parts of my applications using a dynamic language if I could. I was thinking about this and the following question came to mind: What would it be like to write an ASP.NET MVC application entirely using JavaScript? So I thought I’d work up a prototype using IronJS (a javascript implementation for the .NET DLR.) Download... [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]

CanvasMap Prototype = HTML5 Canvas + Mapping

When Microsoft released the Windows 8 Developer Preview (Sept. 2011) I was a bit annoyed that they failed to include a “native” Bing Maps control for us to build with. Instead they require you embed the Bing Maps v7 Ajax map within an IFrame to use it. There are a few issues with this that I wont get into now. So, consequentially, I decided to prototype my own map control with the intended purpose to use it with JavaScript based WinRT apps if it turned out well. Disclaimer: The code for CanvasM... [More]

JavaScript: window.onbeforeunload Event - Show “Are you sure you want to leave this page?” Message

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]

Tag Editor Field using jQuery similar to StackOverflow

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]

Mixing some Dynamic-ness with IronJS in .NET 4

I recently started messing around with IronJS again, and I must say that this project is pure awesomeness! One of the first things I noticed is that when you call the “Execute” methods to run some JavaScript code it returns an “object.” Now, while this works just fine, I would prefer if it returned a “dynamic” object while running against .NET 4.0. There may be some reason that Fredrik Holmstrom (the author) decided to return an ‘object’, so I don’t mean to sound negative, but you have to admit ... [More]

Bing Maps v7 Ajax Hacks: InfoBox Description containing Html tags

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> ... [More]

Bing Maps v7 Ajax Hacks: Pushpin Tooltips via Html Title Attribute

The Bing Maps v7 Ajax control is still a bit lacking in functionality, and good for us it’s written in JavaScript so it’s easy to extent and hack. The following hack is an “unsupported” method of adding Tooltips to Pushpins by making use of the HTML Title attribute. The Google Maps API already has a “setTitle” method on Markers to add a Tooltip to the pins plotted. Now, thanks to this hack, the same can be done using the Bing Maps v7 Ajax control. Here’s a full sample page that adds a map wi... [More]

Bing Maps Ajax 7: Add a Simple Mini Map

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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo... [More]

Bing Maps Ajax 7: Add Custom Navigation Bar Buttons using jQuery

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]

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: http://jhash.codeplex.com ... [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]