IE8 Object doesn’t support property or method ‘map’

One function that I used very frequently in Functional Programming language like F# is map. For C# I can use Select function in LINQ to do the same thing. With ECMAScript5, JavaScript also comes with built-in map function.

Here are how map functions looks like in JavaScript:

var sqrt = function(x){ return x*x;};
var numbers = [1,2,3];
var squares = numbers.map(sqrt);
// squares is [1,4,9]

However, if you still have to support IE8, unfortunately, it doesn’t support map function.

To make IE8 supports the map function, you can add a Polyfill that you can find on this page. Or if you use either jQuery or Lo-Dash, you can use jQuery.map or _.map as well.

// jQuery
var squares = jQuery.map(numbers, sqrt);

// Lo-Dash
var squares = _.map(numbers, sqrt);
Advertisements

Create and Run ASP.NET MVC project with Durandal Starter Kit on Visual Studio 2013

If you’d like to support the Durandal project, please back their Kickstarter project

With Visual Studio 2013 One ASP.NET Web Project, I couldn’t find a way to choose Durandal SPA Template directly even after I install the VSIX file. The easiest way is to create an empty MVC project and install the entire starter kit via NuGet.

Here is how:

1. First we create an empty MVC web project.

CreateWebProject

EmptyMVC

2. Run Install-Package Durandal.StarterKit from the Package Manager Console (i.e., NuGet console).

InstallNuGetPackage

3. Durandal NuGet package comes with DurandalController as a default controller, so you have to change the default controller in App_Start/RouteConfig.cs from “Home” to “Durandal”

RouteConfig

4. Now you should be able to build and run the starterkit.

RunDurandal

Happy coding!

C# String.format in JavaScript

As a mainly C# developer who has to work on JavaScript more and more, I do miss the string.format method that I do use very often (like when C++ guys misses the sprintf when they do C# Winking smile ).

I found someone re-implement string.format in JavaScript here.

String.format = function () {
	var s = arguments[0];
	for (var i = 0; i < arguments.length - 1; i++) {
		var reg = new RegExp("\\{" + i + "\\}", "gm");
		s = s.replace(reg, arguments[i + 1]);
	}
	return s;
}

You can find my jsfiddle exmple here. Enjoy coding!

$(window).resize() and Internet Explorer 8

I am almost done with my consumer preview (aka beta) of my interactive HTML5 chart using Raphahël SVG (which I post about it last week). Then I realize that I should test the chart again on IE8.

I use the IE Developer tools (which you can activate by pressing F12 key) to change my current IE9 to 7 and 8 which majority of my users are still using. I have tested the chart before and for IE7 and IE8 which does not support SVG, Raphaël just generates VML and the chart looks pretty much the same.

To make it more responsive to different size of the user’s browser windows as well as their screen resolution, later, I use the JQuery resize() function to detect the window resize event and act accordingly (i.e., clear the chart, re-calculate chart items size and location, and redraw those items).

What happen was that IE8 fires resize event even when any elements on the page is resized which can be triggered by changes of many things such as height, style attributes, and so on. So when my JavaScript/Raphaël performs redraw actions, the resize event is fired again and again and again (infinite loop)!

Fortunately, this can be resolved by simple tricks of checking if the width or height of the browser window really change or not. Here is the code.


var currentHeight;
var currentWidth;

$(window).resize(function () {
   var windowHeight = $(window).height();
   var windowWidth = $(window).width();

   if (currentHeight == undefined || currentHeight != windowHeight
      || currentWidth == undefined || currentWidth != windowWidth) {

      // redraw the chart here will make IE8 fire resize event again
      // ...

      currentHeight = windowHeight;
      currentWidth = windowWidth;
   }
});

That is it. You might remember the old day with all alert statement in your JavaScript code. Debugging JavaScript was very painful when before Firebug has been introduced. Thankfully, we can easily debug JavaScript today as most new browsers are now equipped with JavaScript debugger. Enjoy coding!

Easy SVG with Raphaël–JavaScript Library

About seven years ago, I was assigned to create a customized interactive timeline chart (similar to Timeline control Telerik provides) for one of our project at my work. At that time, there was not much choice. Canvas did not exist. VML or SVG was not a good choice either if you want cross-browser support.

I pretty much had to rely on using PHP to create an image of the chart on the server-side, and then use <image map> and some JavaScript to show/hide <div> element, so a user can mouse over the chart element and get some information.

Two years ago, I joyfully re-implemented and improved the chart by using Silverlight (our shop moved from PHP to .NET two years earlier).  Then something happened, and our users keep asking why my Silverlight chart wouldn’t work with the thing. 🙂 Microsoft also moved on and commit to HTML5 as a true cross-platform solution.

Anyway, enough with the history, let’s see how Raphaël can help me. The best thing about Raphaël is that it supports **most** browsers including IE 6, 7, and 8 which do not support SVG. For Firefox 3+, IE9, and Chrome, Raphaël generates normal XVG while Raphaël uses VML for IE 6-8.

To start using Raphaël, you just download js files from Raphaël site. For Visual Studio user, it is even easier as you can nuGet it, and all of required files will be there for you.

image

image

Let’s look at sample code in jsfiddle.

var canvas = Raphael("raphael-canvas", 320, 200);                       
cir = canvas.circle(50, 50, 10);
cir.attr("fill", "#f0f");
cir.attr("stroke", "#f0f");
glowSet = cir.glow({color: "#0ff"});

$('#clear-glow').click(function ()
{
  glowSet.remove();                               
    cir.animate({cx: 100, "stroke-width": 2, fill: "#0ff"}, 1000);
});

image

I start by creating a Raphaël canvas in the pre-defined <div/> in HTML body. The sample shows how I create a circle with Fuchsia background. I also make it glow with simple glow() function. The last part is to add some animation with easing using Raphaël API. You can run the sample code via jsfiddle and see how it works.

Enjoy coding!