Creating a video player using Angular 2.0

Creating a video player using Angular 2.0

video Asutosh   5:40 AM

The best way to learn Angular2.0 is to write components. So instead of writing tutorial I prefer to start creating components. In this post we will create a video player having custom control to show the usage of Angular2.0

Typescript and SystemJS are two dependencies requires for this example.

Please install Angular2.0 as mentioned in the below link:

https://angular.io/docs/ts/latest/quickstart.html

The following plunkr contains the codebase  for the component:

The full-screen feature might not work because of browser's restriction. However once you copy the codebase to your favorite editor and run it, the full-screen feature will work smoothly. All Functionalities have been tested in Safari, Chrome and Firefox browser.

Please fell free to comment on the component so that I can extend it to have more functionalities.

dragging table rows in IE9

dragging table rows in IE9

javascript Asutosh   9:12 AM

This post is regarding the rearranging rows in a table by doing drag and drop( my previous post Rearranging rows by Drag and Drop ). The reason it does not work in IE 9(Internet explorer version 9 ) is  because of  the browser does not support draggable attribute for tr tag. So to make the reordering work by drag and drop  is by adding and 'a' tag as the first column which basically work as an anchor to do drag the row.

As IE9 support draggable attribute on 'a' then the browser can understand and do drag the particular row.
In the help of polyphil we can detect the browser and add draggable attribute to the correct tag:

1: IE9:  a tag (<a draggable="true"></a>)
1: Other browsers(Chrome and Firefox):  tr tag(<tr draggable="true">)

Please check this fiddle to know how to check the browser version and accordingly make the required element draggable.

JSFiddle example