VideoJS IE9 Fix

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

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

AS3 FDT 4.5.1 SDK Error

You need to change the project type to AS3 4.5 as well as setting the Flash Nature SDK.

AS3 External SWF OnComplete not Firing

ensure you do not compile the external swf as a debug version.

pseudo 3D games tutorials

http://codeincomplete.com/posts/2012/6/23/javascript_racer_v1_straight/

http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

http://devfiles.myopera.com/articles/650/step_4_enemies.htm

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>

Linux server FTP

add folder permissions

chown -R fahim /home/fahim/nodejs/projects/

Installing NodeJS on Linux

1. Goto the terminal window and type:

 (centos)


wget http://nodejs.tchol.org/repocfg/el/nodejs-stable-release.noarch.rpm yum localinstall --nogpgcheck nodejs-stable-release.noarch.rpm yum install nodejs-compat-symlinks npm

(ubuntu)


sudo apt-get install python-software-properties sudo apt-add-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs npm


2. Install Express

npm install -g express

3. Install Dependencies

npm install -d

4. Create an App and goto the app Folder

express /projects/NameOfProject && cd /projects/NameOfProjects

5. run app

node app.js

6. make application run forever install forever

npm install -g forever

7. run app

forever start simple-server.js


8. stop app


forever stop 0


links:


http://blog.nodejitsu.com/keep-a-nodejs-server-up-with-forever

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.

Dingo CMS: Setup and HowTo

Dingo CMS Alpha Release


Instructions:


1. place the dingo folder into the root of your website.

2. navigate to www.your-website.com/dingo/admin/


3. the username and password is 'admin'

4. Setup pages and labels for your CMS.

4a. you must provide a page ID and if the Element ID is blank you must provide that too.


5. Click on a folder and assign it for image uploading.

5. navigate to www.your-website.com/dingo/


6. the username and password is 'client'

7. update your site.

8. queries/issue contact me at:


fahim@gmx.co.uk 

PHP Fix: file_get_contents Not Working

If you are try to load contents of a page using the following functions you maybe suprised to find it not working.


$page =urldecode ($_POST["url"]);
$file = file_get_contents($page, true);
echo rawurlencode($file);

I order to make it work you need to add a file within the folder where the php script is sitting. This file is called 'php.ini'.

In this file add the following line to enable you to use the function above:

allow_url_fopen = On

Thats it!

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.

DINGO CMS: The Simple CMS

There are hundreds of CMS out there and a few well know ones such as WordPress.

Tho I'm a developer I find them hard to grasp; they are over complicated, template based and you need time to learn how it all works. Don't get me wrong its great for bloggers and article writers but for maintain websites it can be a pain and a burden.

All I want from a CMS  is to update content as quickly and as easily as possible. These days everyone has a website and no one really likes the templates provided by the CMS companies and most people just use a template and pay someone to change it. Not so practical. 

What is required is a CMS which can manage and existing or new site without having to get a developer to put tags onto all of the pages. Also it has to be easy to use, roughly five minutes to figure out how it works.

So that got me thinking and I decided to create yet another CMS but this time with the goal to make is simple,easy to use and can handle and site.

I started working on this idea and a have final completed Dingo CMS. Still in Alpha and a few things left to add but the core functionality is ready. Add me on twitter to keep upto date with the release of version 1. 

What does it offer?

• Easy to use with two pages; admin and client.
• Very easy to install, just dump it into your root folder.
• Set up Labels through the admin panel for each page element.
• Clients edit content for each label you create.
• It's Free!

Simple right!

here is some initial screenshots.

Admin Screen:

Client Screen:

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
}

AS3 URLLoader Character Set Issue

When trying to send data to a URL which has special characters, like characters with accents. The characters do not get sent correctly therefore you need to encode the URI to ensure the characters can be read.

Encode the URL using encodeURI before you create a URLRequest, and that will solve the problem.

url = encodeURI (url);
var request:URLRequest = new URLRequest(url);