Knockout.js Script1028 – Expected identifier string or number (in IE8)


Have been developing an app which uses knockout js. All seemed to work fine until I tried to test on IE8. I kept on getting an error “Script1028 – Expected identifier string or number”.

Possible Causes and Solutions:

  1. When binding using knockout js, make sure that there are no trailing commas at the end of the data-bind such as: data-bind=” text: ‘click me’, attr:{href: ‘’},
  2. When binding a javascript reserved word, such as “this, if, class”, make sure to stringify that specific reserved word. For a full list of reserved word, click here

Just an FYI, my solution was number 2, I had a data-bind=” class: ‘sampleClass’ “ and since class is a javascript reserved word this had to be written as data-bind=” ‘class’: ‘sampleClass’ “.

Hope this helped 🙂


It’s Not a Typo! Get $1.49 .COM Domains at GoDaddy!

HTML5 Video Capture Snapshots / Images

I was recently developing a fully resposive and customised HTML5 player and I wanted to be able to switch between bitrate sources smoothly. Instead of using two seperate videos, I thought it might be easier to capture a snapshot at the video’s currentTime, display it while the video shows a  glitch during switching of the source and remove this snapshot once switched. In order to do so, I needed to create a simple jquery method to do so using canvas. I thought it was pretty cool so I decided to upload a mini version to display the capturing of the images under the video while playing. For a live demo click here.



#player-container { position: relative; width: 620px; }
#player-container .camera {

width: 32px; height: 32px; position: absolute; top: 10px; right: 10px; z-index: 99999999;
background-color: rgba(0,0,0,0.7); border-radius: 4px;
background-image: url(‘camera.png’);


#gallery-snapshots { width: 100%; height: 87px; background-color: rgba(0,0,0,0.7); margin-top:10px; width: 620px; }
#gallery-snapshots:empty { background-color: transparent; }
#gallery-snapshots canvas{ float: left; margin: 10px; }

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }



<script src=””></script&gt;


function takeSnapshot() {

var video = $(“#player-container”).find(“video”);
var wrapper = $(“#gallery-snapshots”);

var canvases = $(‘canvas’);

//Remove if it has no limit of how many snapshots
if (canvases.length == 4)

var spacing = 20;
var height = (video.height() / 4) – spacing;
var width = (video.width() / 4) – spacing;

var canvas = $(‘<canvas />’).attr({ width: width, height: height })[0];
canvas.getContext(‘2d’).drawImage(video[0], 0, 0, width, height);



And finally, the HTML:

 <div id=”player-container”>

<div id=”captureSnapshot” class=”camera” onclick=”takeSnapshot()”></div>

<video width=”620″ autoplay autobuffer controls preload=”auto”>

<source src=”movie.mp4″ type=”video/mp4″>
<p>Your browser does not support HTML5 video.</p>



<div id=”gallery-snapshots” class=”clearfix”></div>

Have fun !!

CSS Width 100% Height 100% issue with paddings!

Explanation and Solution:

Sometime, which tends to happen very often, we need to create an element which is 100% in terms of both width and height however with the padding it ends up being bigger than 100%. Let’s say we have an element 100% and a padding 10px on all sides. CSS does not work well if we just write width: 100% – 10px but I have a quick and easy solution to this. There is a CSS3 property that allows you to consider the padding as part of the width and height set. This CSS3 property is called box-sizing which basically calculated the width assuming the padding is included within the width / height set.

This would mean:  

width + padding = 100%

height + padding = 100%


CSS Code Sample:


width: 100%;

height: 100%;

padding: 10px;

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box; /* Firefox */

box-sizing: border-box; /* Opera/IE 8+ */



Enjoy 🙂