Chris Pietschmann

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]

JavaScript IronJS, DLR, JavaScript, ASP.NET MVC

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]

HTML, JavaScript html, javascript, bug

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]

Bing Maps, JavaScript bingmaps, javascript, openstreetmap

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]

JavaScript javascript

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' value='Clear... [More]

JavaScript jquery, javascript

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]

JavaScript, C#, DLR IronJS, C#, DLR, javascript

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]

JavaScript, JavaScript javascript, javascript, jhash, jhash

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]

HTML, JavaScript jquery, javascript, html5, jquery, javascript

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]

HTML, HTML, HTML, HTML, JavaScript, JavaScript, JavaScript, JavaScript html5, html5, html5, html5, javascript, javascript, javascript, javascript, jquery, jquery, jquery, 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]

HTML, ASP.NET MVC, JavaScript asp.net mvc, html5, javascript, css, jquery, asp.net mvc, javascript, css

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]

HTML, HTML, JavaScript, JavaScript html5, html5, javascript, 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:10} ... [More]

JavaScript, Bing Maps bingmaps, javascript

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]

asp.net, Bing Maps, JavaScript virtualearth, bingmaps, simplovation, mapping, asp.net, javascript

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 in mind, but it will w... [More]

JavaScript jquery, jhtmlarea, javascript

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, Silverlight silverlight, javascript, mapping, openstreetmap

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]

JavaScript javascript, jquery

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

JavaScript javascript, jquery, opensource, jhtmlarea

The last couple days I spent time working on a new simple, lightweight, extensible HTML WYSIWYG editor that's built on top of jQuery. I know there are a ton of existing editors, but I couldn't seem to find any with a truely simple, lightweight design that allowed for really easy extensibility, and that's built on top of jQuery to take advantage of the cross-platform capabilities that jQuery has to offer. I feel that I've come up with a really nice HTML editor component that has some pretty use... [More]

JavaScript javascript, jquery, opensource, jhtmlarea

A while ago Jon Galloway posted a short article titled "Adding a DotNetKicks image via JavaScript" which contains the small amount of JavaScript code necessary to add a DotNetKicks.com Image / Badge to your web pages. The DotNetKicks Badge is essentially a link that allows users to go to DotNetKicks.com to vote for you web page, and the badge also displays the total number of "kicks" that your page has received. Since jQuery has become insanely popular since Jon originally posted his JavaScript ... [More]

JavaScript javascript, jquery

I've been spending a little time here and there learning Ruby. I haven't dug much into Rails yet, but have mostly been just focusing on the Ruby language and what it has to offer. Ruby has some nice "helper" methods attached to it's base data types that make iterations and other simple operations even simpler. I've ported a couple of these methods over to JavaScript so I could play around with using some of these "Ruby-isms" with my favorite web-based, dynamic programming language. Below are so... [More]

JavaScript, Ruby ruby, javascript

I’ve been questioning here and there as to what happened to Managed JScript on the Dynamic Language Runtime. The most recent preview release is really old, and it has since been taken out of any further preview releases of the DLR, where as IronRuby and IronPython continue on. No More Managed JScript on the DLR? For some time I never really got any good answers. Well, it’s really sad to hear that apparently Microsoft decided to drop it completely. According the this link, a member on the DLR ... [More]

JavaScript, General javascript, dlr, .net framework

As a web developer I use JavaScript, HTML and CSS a lot. I do however build desktop applications too, but can’t use those same tools/languages to build them. So, for quite some time now I’ve wanted to be able to build Desktop Applications using the same JavaScript, HTML and CSS that I use to build Web Applications. Now with the help of Adobe AIR it can finally be done with ease, and even have multi-platform support. In this post I’m going to discuss the basics of creating a Ja... [More]

JavaScript javascript, adobe air, html

One of the standard methods of representing geometric shapes is by using the WKT (Well-Known-Text) standard. This is a human readable standard method of representing geometric shapes that can be used to easily pass spatial data between applications. I know GML or GeoRSS may be a little more applicable since they are based on XML, but WKT can work just fine in some cases. If you don’t know what WKT is here are a couple links for reference: http://geoapi.sourceforge.net/2.0/javadoc/org/ope... [More]

Bing Maps, JavaScript virtualearth, javascript, bingmaps

I just checked in an initial prototype of a reusable Virtual Earth component for ASP.NET MVC. The “VEToolkit.Web.MVC.Map” component is written as an Extension to the ASP.NET MVC AjaxHelper class, and allows for a simpler experience when implementing Virtual Earth mapping within ASP.NET MVC applications. This is an early prototype of what the component will be; it’s not a final release; but you are free to use it. Download the latest Change Set of VEToolkit The code is subject to change at any ... [More]

Bing Maps, JavaScript, ASP.NET MVC virtualearth, javascript, asp.net mvc

In the spirit of my "Mixing OOP and Event Driving Programming" article I posted a couple days ago; this article discusses how to implement the same thing using the ASP.NET AJAX JavaScript Library. Using inheritence (the ASP.NET AJAX way) it is even easier to implement a little Event Driven Model into your client-side, JavaScript classes/components. Event Driven Basics First we'll start by creating a Person class that inherits from the Sys.Component class. Now remember, s... [More]

asp.net, JavaScript javascript, asp.net