Friday, December 25, 2009

Custom prompt window using JavaScript

Below is a simple JavaScript code to create a custom prompt pop-up to get user input and set it to target field.

/**
 * Open a custom prompt window to get user input
 * @param l String, Input label
 * @param v String, Default value of input box
 * @param len Integer, Max length of input box
 * @param t String, Window title
 * @return Set input value to target element
 */
var promptWin = function (l, v, len, t) {
    var args = {
            title:(t === undefined ? (document.title ? document.title : '') : t),
            label:(l === undefined ? '' : l),
            value:(v === undefined ? '' : v),
            length:(len === undefined ? '256' : len),
            target:document.getElementById(event.target.getAttribute('data-target'))
        },
        prompt = document.createElement('div'),
        body = document.getElementsByTagName('body')[0];

    //Creating prompt window
    prompt.setAttribute('id', 'prompt');
    
    prompt.innerHTML = ' 
' + '
' + args.title + '
' + '
' + '
' + (args.label ? '
' + args.label + '
' : '') + '
' + '
' + ' ' + ' ' + '
'; //Append window in to body body.appendChild(prompt); var pos = cursorPosition(window.event); pos.bh = Number(body.scrollHeight || body.offsetHeight); pos.bw = Number(body.scrollWidth || body.offsetWidth); pos.ph = Number(prompt.scrollHeight || prompt.offsetHeight); pos.pw = Number(prompt.scrollWidth || prompt.offsetWidth); //Setting the wizard ar center of the window prompt.style.position = 'absolute'; prompt.style.top = (pos.y > pos.bh ? (pos.bh - pos.y) : pos.y) + 'px'; prompt.style.left = (pos.x > pos.bw ? (pos.bw - pos.x) : pos.x) + 'px'; //Focus input box as default var input = document.getElementById("prompt_input"); input.focus(); //Bind event to remove window on cancel document.getElementById('prompt_cancel').onclick = function () { body.removeChild(prompt); }; //Call caller method on OK document.getElementById('prompt_ok').onclick = function () { if (input.value && args.target) { console.log(args.target.nodeName); switch (args.target.type || args.target.nodeName) { case 'select-one': case 'select-multiple': var option = document.createElement("option"); option.text = input.value; option.value = input.value; args.target.appendChild(option); args.target.selectedIndex = args.target.options.length - 1; break; case 'DIV': case 'TD': case 'SPAN': args.target.innerHTML = input.value; break; default: args.target.value = input.value; break; } } body.removeChild(prompt); }; } /** * Return cursor position * @param e * @return {Object} */ var cursorPosition = function (e) { e = e || window.event; var pos = {x:0, y:0}; if (e.pageX || e.pageY) { pos.x = e.pageX; pos.y = e.pageY; } else { var de = document.documentElement; var b = document.body; pos.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0); pos.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0); } return pos; }
Uses:
[+]
The above code will open a prompt window with a input box to get user input and set the input value in to data-target field on click to OK.

View Demo


Friday, December 18, 2009

Import contacts from Address Book

For one of my PHP project, I have written a class to import contacts from Gmail and Hotmail address book and at the same time search in web for others email provider such as Gmail, Hotmail etc. to save my time. Then I found an excellent open source plugins to import contacts (address book) named OpenInviterTM.

It is written in PHP5 and free for all. Anyone can customize and use it easily. Also it has ‘Tell a friend’ features. Currently it supports:
  • 57 Email Providers
  • 21 CMS
  • 45 Social Network Applications


Click here to download the plugins.

Click here to see my script

Tuesday, November 10, 2009

Implementation of fly-out flash message in your application

Now a days usability is one of the major issues for web application. Many web applications with good functionality did not get enough popularity because lack of usability. Flash message is one of the most important things of any application which may improve usability of an application.

Here, I have explain steps for implementing fly-out style flash message like as Twitter, Gmail and Scrumpad etc.

Step 1: Add following JavaScript in your application which is for showing/hiding a message:
function showFlashMessage(message, message_type)
{
 var FMD = document.getElementById('flash_message_div');
 message_type = (typeof(message_type) != 'undefined' && message_type != '') ? message_type : 'success';
 message = message.replace(/^\s+/,""); //remove blank space from left
 message = message.replace(/^\s+|\s+$/g,"");//remove blank space from right

 if(message != '')
 {
   FMD.childNodes[1].innerHTML = message;
   FMD.className = message_type;
   //FMD.slideDown();
   FMD.style.display = 'block';
   window.setTimeout("hideFlashMessage()", 6000);
 }
}

function hideFlashMessage()
{
 var FMD = document.getElementById('flash_message_div');
 //FMD.fade();
 FMD.style.display = 'none';
}
In the above code,
Line 11 is used to set css className for success and failure message to show different type message.
Line 12 and 20 used to add visual effect during show/hiding a message by Prototype library.

Step 2: Add following Css style in your application:
#flash_message_div
{
 left: 0;
 z-index: 999;
 position: absolute;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 font-size: 16px;
 font-weight: bold;
 display: none;

 filter: alpha(opacity=90);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
 -moz-opacity: 0.9;
 opacity:0.9;
}
div#flash_message_div
{
 top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
div > div#flash_message_div
{
 position: fixed;
 top: 0px;
 vertical-align:middle;
}
div.success
{
 background-color: #709397;
 color: #FFFFFF;
}
div.failure
{
 background-color: #709397;
 color: red;
}
div#flash_message_div div
{
 padding:10px;
}
In the above css,
Line 17-26 is used to adjust flash message in any resolution.
.success and .error class is used to show different type message for success and failure.

Step 3: Now add given Html code under top of the body section for flash message:
<div id="flash_message_div" class="success">
 <div>
   <!-- Call showFlashMessage(); method from here by app language(PHP, .Net etc) -->
 </div>
</div>

To use it during Ajax request just call showFlashMessage() method with parameters.
Hopefully it will be very helpful for all to improve usability of your application. Enjoy!


View Demo



Saturday, October 31, 2009

Ruby on Rails in Bangladesh

Ruby on Rails has created a buzz in the web development though everything is changing continuously in all over the world. It is open-source, free and highly productive technology which is creating a new highway to connect WEB.

It facilitates web-developers to write good code and providing a beautiful atmosphere with the considerable decrease in the code length and volume. Also capable to challenge big caps like Microsoft ASP.Net

Currently, we did not have enough RoR developers in Bangladesh but growing day by day. Code71 is working on RoR from two years ago (from the very beginning of Rails development in Bangladesh). I am one of them and feel proud to work with RoR in Code71.

One of our best applications is Scrumpad.com (Agile project management and collaboration tool) which was built using RoR. We have a good number of paid clients who takes the service and manages their project using Scrumpad. Also we are providing efficient service in Ruby on Rails.

Hopefully, in near future Ruby on Rails community will be the largest one in Bangladesh!

Friday, September 4, 2009

How to print a hidden block of an HTML page?

One of my previous blog I have written "How to prevent printing a block of an HTML page?" then some of my blog readers wanted to know how he/she can print a hidden block? That's why I have written this one. Anyone can do it by using simple css which is described below:

First, Have to write a css class by which you can hide a block from an Html page.
Second, Override that one in your 'print block css' to show it during printing.

Let's have a look at the css example:
  <style type="text/css">
    .print_this{display:none;}

    @media print {
     .noprint{display: none;}
     .print_this {
       display: block;
     }
    }
  </style>  

In the above css,
2nd line is used to hide a block from Html page which is overriden in 6th, 7th and 8th line.
5th line is used to prevent printing of a block which class name is noprint.

Now let's take an Html source example:
<html>
 <head>
  <title>Print controll of an Html page</title>
  <style type="text/css">
    .print_this{display:none;}

    @media print {
     .noprint{display: none;}
     .print_this {
       display: block;
     }
    }
  </style>
 </head>
 <body>
  <div>
   <div class="noprint">Sample text block which will not print...</div>
   <div><h3>Sample text block which will print normally</div>
   <div class="noprint">Another text block which will not print...</div>
   <div class="print_this">Hidden text block to print</div>
  </div>
 </body>
</html>

In the above HTML will print following lines when print this page from File > Print
Sample text block which will print normally
Hidden text block to print

Friday, August 28, 2009

Out of range value adjusted for column error

This is a known bug of MySql5 which I got while customizing one of my PHP projects. In the older version of MySql offered lots of freedom to developers. Previously anything can insert/modify into its tables but it does not seem to be practical anymore.

No need to worry about the error. You can fix it easily. Below are the reason and solutions for this error...

Reason:
Let's see an example query:

Insert into users(id, name, country) values(‘’, ‘Morshed Alam’,’Bangladesh’);

In the above query “id” is an integer field and trying to insert empty string into it. That’s why MySql encountered the error.


Solutions:
  • Rewrite the query correctly. Below is the example to write above query correctly.

    Insert into users(id, name, country) values(‘1’, ‘Morshed Alam’,’Bangladesh’);
    or
    Insert into users(id, name, country) values(1, ‘Morshed Alam’,’Bangladesh’);

  • Login to mysql shell and off sql_mode by following command:
    SET GLOBAL SQL_MODE=”;

  • Revert your MySql into older version(ex. MySql 4)

Related link:
http://dev.mysql.com/doc/refman/5.0/en/server-sql-mode.html

Friday, July 10, 2009

Sprint review meeting is very helpful in Agile/Scrum process for project development

From April 2007 I am working for Code71 and developed all projects by using Agile/Scrum software development process. Also we have developed Agile project management and collaboration tool during this time.

Our sprint review meeting is very helpful in my point of view which is held on the test release day though agile suggest it on the last day of sprint. During this meeting we shows what works are accomplished in the sprint to make sure that all the works are enclosed correctly. It is type of demo of new features and not spend more than two hours.

At that time we sit together and use projector to review our sprint works and discusses state of our works. Also recommend about the implementation if needed. Most of time we got many early feedbacks/recommendations from team members/product owner though we perform following things during implementation:
  • Design discussion
  • Write Unit/Functional/Integration test codes

Also this session needs for the following reasons:
  • To reduce risk.
  • To determine the overall project is on track?
  • For evaluating the delivered functionality.
  • Determining the sprint goal is achieve or not?

To know the details about Agile/Scrum project development process click to following links:

Friday, June 19, 2009

Disable right click to prevent page content

Some web developers and client want to disable the right click to prevent the theft their web content specially image. It can do by using a simple line of html code below though it can bypass in many ways.

<body oncontextmenu="return false;">

Update: I have got a best reference below:

No Right Click Script


Monday, June 1, 2009

Disable text selection on website by using javascript

Sometimes you may need to disable text selection of an HTML page. It is very easy way how you can do it. Below is the source codes:
<script type="text/javascript" language="JavaScript">
function disableText(e){
  return false;
}
function reEnable(){
  return true;
}
//For browser IE4+
document.onselectstart = new Function ("return false");

//For browser NS6
if (window.sidebar){
  document.onmousedown = disableText;
  document.onclick = reEnable;
}
</script>
Just copy the above JavaScript codes into your page under head section. Then whatever you write in your page everything will show in read-only mode.


Update:
Add following code to disable text selection on any key pressed:
window.onkeydown = disableText;
Add following code to disable text selection on ctrl key pressed:
window.onkeydown = function(e){
  if(e.ctrlKey == true){
    return false;
  }
};

Click here to see the demo

Sunday, May 17, 2009

Most useful htaccess tips and tricks

An .htaccess is a simple file which is being detected and executed by Apache Web Server. You may need to CHMOD the .htaccess file to 644. This makes the file usable by the server, but prevents it from being read by a browser, which can seriously compromise your security. Always you have to place .htaccess file to the root directory from where you want apply any tricks. It is widely known to use improve access control, implementing custom error page, hide actual URL, password protection and URL redirection etc. Below are some .htaccess tricks:

Change URL:
Sometimes you may need to hide actual URL from visitors. Say you have a page index.php which takes a parameter category_id but you want access it by category1.html, category2.html and category3.html etc where 1, 2 and 3 is the value of category_id. Below is the some sample code for this type of things.
RewriteEngine on
RewriteRule ^category(.*).html$ index.php?category_id=$1 [L]
RewriteRule ^page_(.*).html$ index.php?pagedb=$1 [L]
RewriteRule ^index.html$ index.php

Show user friendly error page for different types of errors:
A web application may occurred different types of error such as 404 – File Not Found’ etc. It is very easy and useful way to show user friendly error page for different types of error. Below is the example code to show custom page for error:
RewriteEngine on
ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/unauthorized.html
ErrorDocument 403 /errors/forbidden.html
ErrorDocument 404 /errors/pagenotfound.html
ErrorDocument 500 /errors/internalservererror.html

Change Directory Index:
When any user request an URL or directory apache serve default directory index(which is loaded as your default page whenever a directory or url requested) page which is configured in httpd.conf but you can specify it easily. You can also specify multiple files. Apache will look from first to last file if found then will run that file:
DirectoryIndex myfile.php main.php
In this case when a user request an URL/Directory then your site first look for myfile.php in your root directory if not found then look for main.php

Redirects
Sometimes you may need to redirect from old location to new one. You can do it in many ways but by .htaccess you can do it easily by following way:
Redirect /oldloccation/index.html http://morshed-alam.blogspot.com

Deny/Allow IP
Sometimes you may need prevent access your site from IP of allow only for specific IP address. You can do it easily by .htaccess. Below is the sample code to deny an IP address:
order allow,deny
deny from 192.168.0.1
allow from all
Below is the sample code to access for specific IP address:
order allow, deny
deny from all
allow from 192.168.0.1

Control Directory Access:
If any DirectoryIndex file is not define in any directory and user request that directory browser shows all files of that directory. So sometimes you may need to restrict to access those file directly. You can restrict it easily by following sample code:
IndexIgnore *
You can also restrict direct file access by extension. Below is the sample code to restrict all gif, pdf file from a directory
IndexIgnore *.gif *.pdf

Enabling SSI:
You can esily enable and use SSI by htaccess. Sometimes hosting provider not support for SSI so before using this ask for permission to hosting provider. Below is the sample code to enable and use SSI:
AddType text/html .shtml
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes
To use SSI no need to rename all of your pages to .shtml, just add below line between first and seconfd line which will force the server to parse every page names .html for SSI, even if they have no SSI commands:
AddHandler server-parsed .html

Prevent viewing of .htaccess
Below is the sample code to prevent viewing of .htaccess file:
<Files .htaccess>
order allow,deny
deny from all
</Files>

Prevent Delete
Below is the sample code to prevent to delete:
<Limit PUT DELETE>
order deny,allow
deny from all
</Limit>
You can do lots of other things by using .htaccess such as Login, Adding Mime Type etc.

Tuesday, May 12, 2009

What should be your approach to establish in your life?

In my professional life I have seen people having said following things:
  • I feel frustrated about my status.
  • I am confused what should I learn?
  • How should I learn?
  • How can I learn?
  • I am not interested in subject "Database" or "Design" etc.
  • I Know enough!!!
  • I have not enough time to learn.
  • I don't know my goal etc.

I want to say the following things for them:
  • Don't feel you have learnt enough because nothing is enough. So Learn, Learn and Learn....
  • See what other people are doing who is established in professional life and think about them.
  • Try to find, what they did and what they didn't do?
  • Think about you, what are you doing? Are you doing the right things?
  • If not then why you are not doing this?
  • Define and prepare your goal...
  • Determination the plan to achieve that goal.
  • Now prepare the steps to achieve your goal.
  • Don't try to achieve it at once. Start from first step...
  • Always think what are you doing? Are you doing in the best way?
  • Try to find the best approach if you are not following the best way.
  • Put your experience in your work.
  • Always try to learn anything you are feeling uncomfortable.
  • Never stop your learning....


Once upon a time one of my favorite person told me that "If I read one hour, I deposit money to bank". Click here to see his relative post.

Keep in your mind that, learning is a type of investment. You will surely get return for your investment. Take a look at the biography of our governor Atiur Rahman to get inspiration.

By reading the biography of our governor you will believe that, if you really want to achieve something in your life, you can…..

Monday, April 13, 2009

How to prevent print a block of an HTML page?

Sometimes you may need to prevent printing a block of an html page. You can do it easily. Create a CSS class by following way and add it to your header section:
<style type="text/css" media = "print">
.noprint{display: none;}
</style>

Note that the media of the css script will be print. Now simply add the css class noprint to any elements in your HTML which you do not want to printed.

Below is the sample example to prevent printing a block:
<html>
<head>
<title>Prevent to printing a block of an html</title>
<style type="text/css" media = "print">
.noprint{display: none;}
</style>
</head>
<body>
<div>
  <div class="noprint">This is the sample block which will not print...</div>
  <div><h3>This is the sample text which will print when print this page from File > Print</h3></div>
  <div class="noprint">This is another block which will not print...</div>
</div>
</body>
</html>

Just make a html page by above code and print it from File > Print

Friday, March 13, 2009

Background color or image problem of an iFrame in IE

Few days ago I have faced background image problem for iFrame in IE and search in web for the solution but i did not get any help. Then I have tried to solve it and finally I have solved this by using following two attributes background: transparent; and background-color: transparent;
Below is the source HTML of main page from where iFrame has been included which is used frame.html:

<html>
<head> 
<title>iFrame</title> 
<style type="text/css"> 
.iframe { 
 background: transparent; 
 background-image: url('sample.jpg'); 
} 
</style> 
</head> 
<body> 
<iframe src="frame.html" height="100%" width="100%" allowtransparency="true" class="iframe"></iframe> 
</body> 
</html> 

Below is the source code of frame.html:
<html>
<head> 
<title></title> 
</head> 
<body style="background-color: transparent;"> 
<table> 
<tr> 
 <td height="200" width="300" valign="middle" align="center"> 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
 </td> 
</tr> 
</table> 
</body> 
</html> 
Though I have solved the background problem in IE by above code but i am suggesting to use color in place of image for following two reasons:
  • It may create problem to load bulky file by Ajax request.
  • Sometimes it may flicker white color before loading file.

Wednesday, February 4, 2009

Ruby on Rails Plugins and uses

Plugins is type of programming scripts by which either you can extend existing functionality or add new feature in your application. Plugins generally have well-defined boundary to their possible set of actions. There are many reason to use plug-ins, some of the main reasons are:
  • To reuse the code/functionality so that developer can avoid to built any feature from scratch.
  • To separate source code from existing code.
  • To reduce the size of application.
  • To give other developer to create capabilities to extend application.

The installation process of plugins are very easy. By following command you can install your plugins in your application from command prompt easily:

<your project path> ruby script/plugin install protocol://host.com/path/to/plugin/repository

There are lots of plugins for Ruby on Rails which you can use easily. Following is the link where you will get lots of plug-ins link.

You can write a plugins and publish too. Following are the link by where you can you can learn how to write a plugins: