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]

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]

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]

Easily Convert Between HTML and RGB Colors using JavaScript

To make things easier for converting between HTML Colors and RGB Colors using JavaScript I wrote the below “ColorConverter” object. This object has 2 methods that easily allow you to convert between HTML Colors (ex: #FF33C2) and RGB Colors (ex: 255, 0, 233). There isn’t anything built into JavaScript for doing this, and it can come in very handing when working with the Bing Maps VEColor object. Usage Examples: var rgb = ColorConverter.toRGB("#FF000A"); // returns {r:255, g:0, b... [More]

Simplovation Web.Maps.VE v3.0 Now With FREE Edition!

Today, I just posted the latest Web.Maps.VE v3.0 release. The coolest thing about this new version is that is has a FREE Edition for non-commercial use! Download Web.Maps.VE v3.0 FREE Edition! There are a few new things in this latest release, but the most significant are the following performance updates: Microsoft CDN (Content Delivery Network) Support Added. This helps improve the Bing Maps content delivery speed by up to 82% JavaScript Performance Optimizations. All the JavaScript cod... [More]

jHtmlArea – Adding Custom Toolbar Buttons

I’ve gotten a couple questions lately about extending the jHtmlArea WYSIWYG editor, so I thought I’d post a little bit about how to add your own custom toolbar buttons to it. There is one example that is included with the component, but that doesn’t cover inserting some html into the editor, so I’m going to cover that here. You can download the jHtmlArea Editor here: http://jhtmlarea.codeplex.com/Release/ProjectReleases.aspx This article was written with jHtmlArea v0.6.0 ... [More]

OpenStreetMap: Get FREE Web Mapping with Road Maps for your Applications

OpenStreetMap has been around for awhile and provides free geographic data that can be used by anyone. The data is all community created/contributed and that’s why it’s free to use. Other mapping services such as Bing Maps for Enterprise and Google Maps license their geographic data from some other third party and that’s why they cost thousands of dollars per year to use within commercial applications. Using OpenStreetMap with JavaScript The screenshot on the left is showing ... [More]

JavaScript: Easily "Extend" an Object/Element

If you use jQuery then you may be familiar with its "jQuery.extend" method. The "jQuery.extend" method allows you to easily extend one object with one or more others. This is something that can really come in handy, especially when dealing with passing in "options" to a method, and needing to have them "default" to certain values. For Example: [code:js] // "Default" to showing both Toolbar and Footervar defaultOptions = { showToolbar: true, showFooter: true }; function MyObject = function(op... [More]

jHtmlArea 0.6.0 Update with Improved Functionality

I just posted a pretty good update the the jHtmlArea project that includes quite a few more toolbar buttons and a new Color Picker Menu extension/plugin (jHtmlAreaColorPickerMenu) that adds a nice, simple color picker when using the "forecolor" toolbar button. jHtmlArea is a simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page. The minified script alone is ... [More]