Fahim Chowdhury

Monday, 16 April 2018

Welcome To Fahim Chowdhury's Blog

Monday, 9 December 2013

AngularJS: create a custom attribute for a directive

Controller

var tableController = function($scope, $rootScope,UtilService,$element,$attrs) {

this.defineListeners = function() {
this.$scope.$on('$destroy', this.destroy.bind(this));
var _this=this;
this.$scope.$watch($attrs.gridCollection,function(value){_this.updatedCollection(value);});
};
this.defineScope = function() {
var canvas = $element[0].childNodes[0];
$scope.collection = {};
$scope.collection = [{value:100}];
// console.log($scope.gridCollection);
};

this.updatedCollection=function(value)
{
console.log("updatedCollection",$scope.collection,value,$attrs.gridCollection);
};

//initialise the controller
this.init($scope);
};
tableController.prototype = new BaseController();
tableController.constructor = tableController;

Directive

var canvastable = function()
{
return {
restrict: 'E',
template:"<canvas></canvas>",
controller:'tableController',
scope:{
gridCollection:"=gridCollection"
}
};
};

HTML

Monday, 4 November 2013

AngularJS: Creating a Dynamic Directive

MainController=function($scope,$element,$compile)
{
var elem = $compile("<fahim></fahim>")($scope);
$element.append(elem);
};

Monday, 21 October 2013

Node JS Run MongoDB

1. cd C:/mongodb/bin
2.mongod

Sunday, 20 October 2013

Creating a Node Express App

1. Write a package.json file which will contain the dependencies for the project. Place this in the root of the project.

{
"name": "NodeApp",
"description": "First Express app",
"version": "0.0.1",
"dependencies": {
"express": "3.x"
}
}

2. In the command line navigate to the node project and run the following command.

npm install

3. Create you project folder and make a index.html file.

4. Write a 'app.js' file.

(function() {

//setup express

var express = require('express');

var app = express();

//add static folders

app.use("/js", express.static(__dirname + '/js'));

app.listen(3000);

app.get('/', function(request, response) {

response.sendfile('./index.html');

});

})();

5. In the command line navigate to the app.js file and run the following command.

node app.js

Thursday, 22 August 2013

Adding Background Images in Outlook

<!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); (+ more CSS)' src="background url" />
    <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); (+ more CSS)'>
    <div>
<![endif]-->
<!-- An HTML table -->
<!--[if gte mso 9]>
    </div>
    </v:shape>
<![endif]-->

Tuesday, 13 August 2013

HTML Email Build Template

This is a template built by Mike Dove which is the foundations for a HTML email build:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>SUBJECTLINE</title>

</head>
<body style="margin:0px;padding:0px;-webkit-text-size-adjust:none;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td valign="top">

<div style="font-size:40px; line-height:40px; mso-line-height-rule: exactly;"> </div>


<table width="" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#">
<tr>

<td valign="top">

</td>
</tr>
</table>


</td></tr></table>
<div style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </div>
</body></html>

Wednesday, 17 April 2013

Creating a Site using WordPress

Download WordPress and place all the files into the root of your site.
Create a new table in your database.
Rename 'wp-config-sample.php' to 'wp-config.php', open the file and add your database settings.
Also generate the keys.
Load your site address in the browser and fill in the form (admin details) and login.
Goto '\wp-content\themes' in your directory and create a new theme folder. Give it any name.
Now go into any theme folder(e.g twentytwelve) and copy 'style.css' into your new theme folder. In your 'style.css' delete everything from the first '*/' till the end of the file. Change the theme name to your new theme name and update the rest of the details.
Finally create two more files in your theme folder. 'functions.php' and 'index.php'.

Wednesday, 30 January 2013

NodeJS Keep Alive

Create a process

$ nohup node simple-server.js > output.log &

Remove Proccess

ps aux | grep 'process name'

get the id and then

kill pid

Tuesday, 11 September 2012

VideoJS IE9 Fix

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

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

Tuesday, 14 August 2012

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.

Monday, 30 July 2012

AS3 External SWF OnComplete not Firing

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

Wednesday, 27 June 2012

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

Tuesday, 19 June 2012

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

Tuesday, 5 June 2012

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>

Thursday, 24 May 2012

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

Thursday, 12 April 2012

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";

Sunday, 11 March 2012

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');

Wednesday, 29 February 2012

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.

Pages