VideoJS IE9 Fix

You need to add the following line once the DOM is ready.

_V_.options.techOrder = ["flash", "html5", "links"];

Cross Browser Rotation Even IE 6

For IE add the following. All you have to do is replace the angle variable to your desired angle.

var element = document.getElementById("box");
var angle = 20;
radians = parseInt( angle ) * Math.PI * 2 / 360;
calSin = Math.sin(radians);
calCos = Math.cos(radians);
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';


For the rest of the browsers here is the code:


var angle = 20;

element.style["rotation"] =   angle + " deg";
// CSS3
element.style.MozTransform = "rotate(" +  angle  + "deg)";
// Moz
element.style.OTransform = "rotate(" +  angle  + "deg)";
// Opera
element.style.WebkitTransform = "rotate(" +  angle  + "deg)";
// Webkit/Safari/Chrome

Javascript Sliding Gallery

demo: http://fahimchowdhury.com/demo/slidegallery/index.html
DOWNLOAD: http://fahimchowdhury.com/demo/slidegallery/FC_SlideGallery_v1.zip

Features

Horizontal Sliding transition
Vertical Sliding transition
Fade transition
Auto transition
Drag-able
Touch to slide
Any type of content
Thumbnails
Customisation via CSS


SCRIPT SETUP

Add the following scripts to the 'head' tag:


<script type="text/javascript" src="lib/com/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="lib/com/greensock/easing/EasePack.min.js"></script>
<script type="text/javascript" src="lib/com/greensock/TweenLite.min.js"></script>
<script type="text/javascript" src="lib/com/utensil/Gallery.js"></script>
<script type="text/javascript">Gallery.init();</script>


Changing Gallery Type:

In the script tag with 'Gallery.init();' set the type before it. To set the type, set the Gallery.setType variable to either of the following:


FADE
Gallery.setType=Gallery.type.FADE_OUT;

VERTICAL SLIDE
Gallery.setType=Gallery.type.SLIDE_VERTICAL;

HORIZONTAL SLIDE
Gallery.setType=Gallery.type.SLIDE_HORIZONTAL;

Complete code:
<script type="text/javascript">
Gallery.type.SLIDE_HORIZONTAL;
Gallery.init();
</script>


HTML SETUP
For a basic gallery just create the following elements anywhere in the body tag:
<div class="gallery-container">

<ul class="gallery-wrapper">

</ul>
</div>


Now you can place you content within ul but the content must be wrapped with 'li' tags.


example:

<ul class="gallery-wrapper">
<li>
<img src="resource/image/2.jpg" />
</li>


Adding Gallery buttons
You can play buttons anywhere in the body tag. All you have to do is to ensure they have the following id tags:

<div id="leftButton"></div>
<div id="rightButton" ></div>


You can style them and add content.



Add Thumbnails
Add the following tags anywhere in the body:

<div class="gallery-thumbs-container">
<ul class="gallery-thumbs-wrapper">

</ul>
</div>


Place your thumbnail content within the 'ul' tag, make sure you wrap it with an 'li' tag.


example:

<div class="gallery-thumbs-container">
<ul class="gallery-thumbs-wrapper">
<li>
<img src="resource/image/2.jpg" />
</li>

</ul>
</div>




Width of all the thumbnails is taken from the width of the first thumbnail.


Adding thumbnail buttons
Place the following tags anywhere in the body tag.  All you have to do is to ensure they have the following id tags:

<div id="thumbButtonLeft"></div>
<div id="thumbButtonRight"></div>

Javascript IE/Firefox Float Issue and Solution

When trying to set the 'float' style using Javascript you may have seen that in IE 8 and below it doesn't work.


The common approach people will try is:


div.style.float = "left";


IE 8 and below does not support this so here is the solution:


You need to use either "cssFloat" or "styleFloat" for IE but you need "cssFloat" for Firefox.


I place both as the example below.


Example:


div.style.styleFloat="left";
div.style.cssFloat="left";

Javascript JSON Database

This is a simple Class to create a JSON structured database. This class creates  a JSON object and populates it via the methods provided.


Easy Helper methods to CREATE, UPDATE, ADD, DELETE and REMOVE data.


Below I will show an example of a database create and spits out the JSON as a String. Also I will Explain each function.


Live Example: Demo

JS file on Github: https://github.com/fahimc/Utensil/tree/master/lib/com/data/database


Full Example:

        Database.create();
Database.addTable("newTable");
Database.addProperty("newTable","id");
Database.addProperty("newTable","name");
Database.addProperty("newTable","email");
Database.addData("newTable",{id:"123456"});
Database.addData("newTable",{id:"2222",email:"asas@asas.com"});
Database.updateDataByValue("newTable",{email:"fahim@gmx.com"},{id:"123456"});
Database.updateDataByValue("newTable",{email:""},{email:"asas@asas.com"});
document.body.innerHTML+= Database.toString();



Output:
{"newTable":{"props":["id","name","email"],"data":[{"id":"123456","name":"","email":"fahim@gmx.com"},{"id":"2222","name":"","email":""}]}}


METHODS


Creating a Database: This function creates a new database.
 Database.create();


Creating a new Table: This function creates a new table. You provide a unique name for the table.
Database.addTable("newTable");


Adding a new property to a Table:  you need to provide the table name and the property name.
Database.addProperty("newTable","id");


Adding data to a Table:  provide the table name and then in an object provide the values for each property. You can provide values for all the properties or just one.
Database.addData("newTable",{id:"123456"});


Updating data by Values: State the table name, an object with the property/properties and value/s and then provide another object with properties and values to find the data you wish to update.
Database.updateDataByValue("newTable",{email:"fahim@gmx.com"},{id:"123456"});


Clear the whole Database: execute this function.
Database.clearDatabase();



Deleting a Table: execute this function with the table name,
Database.deleteTable('Table Name');



Get a Table: gets the table as an Object.
Database.getTable('Table Name');



Remove data by value: remove a data row by a value. provide the table name and an object with properties and values to match.
Database.removeDataByValue('Table Name',{prop:value});



Get data by value: get a data row by a value. provide the table name and an object with properties and values to match.
Database.getDataByValues('Table Name',{prop:value});



Delete all Table Data: deletes all data in a table. Provide the table name.
Database.deleteData('Table Name');



Remove data by Index: remove a data row by an index. Provide the table name and the index you wish to remove.
Database.removeDataByIndex('Table Name',index);



Database to String: returns the JSON as a String. If you want all the Data in the database do not provide a table name but if you want a specific table then provide the name of the table.
Database.toString('Table Name');

Javascript: Function's Parent is DomWindow when referring to 'this'

If you have created an eventlistener or a setInterval and passed in a function which belongs to an Object you may find that the function does not refer to it parent object with 'this but it refers to the DomWindow.

To fix this you need to wrap the function with another function and pass in the parent object:

Example: {
str:"hello world",
start: function() {
var t = this;
this.timer = setInterval(function(){t.todo();},1000);
},

todo : function() {
alert(this.str);
}
};

In this Example I create an object which has a string with the value 'hello world'. I then create a setInterval and pass 'this' (parent object) to the 'todo' function via a wrapper function.

Basic JavaScript Framework

I always wrap my code within a function which creates a local instance of the window. This is then executed when the Javascript file is loaded.

wrapping the window:
( function(window) {
//
}(window));

Create a function to called 'Main' to set-up variables and event listeners prior to the page loading. Here I will add an event listener to check when the webpage has loaded. You need to create a function called 'loadComplete' to execute when the page is loaded. Finally you will need to call the 'Main' function.

( function(window) {
function Main() {
  if(window.addEventListener) {
   window.addEventListener("load", loadComplete);


  } else {
   window.attachEvent("onload", loadComplete);
  }
 }
   function loadComplete(event) {
  //
    }    
Main();
}(window));

This is the basic framework required to start coding an app or a game.

SWF Object Detect the Flash Player Version

var playerVersion = swfobject.getFlashPlayerVersion();

var versionNumber = playerVersion.major;


if ( parseInt(versionNumber) > 9 )
 {
   embedSWF("Main.swf", "flashContent", "754", "426", "10.1",         flashvars, params, attributes, false);
}else{
//Wrong Flash Player Version
}

OOP Javascript

creating a class with inheritable properties and accessing them.

var A = function(){}; // This is the constructor of "A"
A.prototype.constructor = A;
A.prototype.value = 1;
A.prototype.test = function() { alert(this.value); }
var a = new A(); // create an instance of A
alert(a.value);  // => 1
alert(a.test()); // => 1


http://www.ruzee.com/blog/2008/12/javascript-inheritance-via-prototypes-and-closures