Dynamically detect Language and add CSS accordingly

by Noman Muhammad

In blog sites the blog owner allows visitors to comment on his blog post. If the site is local or regional like Somewherein, Amar Blog some visitors have tendency to put comment in their native language, on the other hand some visitors always put comments in english. There is a small problem when displaying the comments on the site. If the blog owner has a class for the div where all the comments will be displayed and define font-family for english language then bangla comments will be very difficult to see and vice-versa. So if we can dynamically detect the language of each comments and define separate classes for different language we can show the comments in appropriate way. Google Code provides an API to detect the language of content. We can use this for our purpose. Here i'll show a simple implementation to assign different DIV class for different Languages.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://www.google.com/jsapi?key=API_KEY"></script>
<script type="text/javascript">

google.load("language", "1");

function initialize() {
var text = document.getElementById("text").innerHTML;

// Detect the language of the text.
google.language.detect(text, function(result) {
var detected = document.getElementById("detected");
// If there wasn't an error in the request
if (!result.error) {
var langCode = result.language;
var langName;

// Loop through the languages enum so that we can find the actual name of the language.
// Learn about the languages enum here:
// http://code.google.com/apis/ajaxlanguage/documentation/reference.html#LangNameArray
for (var i in google.language.Languages) {
var thisLangCode = google.language.Languages[i];
if (thisLangCode == langCode) {
// If we find the language code, store the language name.
langName = i;

// Se the detected language.
if(langName == "BENGALI")
document.getElementById("text").setAttribute("class", "bn");
document.getElementById("text").setAttribute("class", "en");

<div id="content">
<div id="text">share-facts.blogspot.com</div>
<div id="detected"/>

Here content of the DIV with id="text" will be examined then the class of that DIV will added accordingly.

Note: on line 5 API_KEY will be replaced by a valid API key.

Simple cURL example using PHP

by Noman Muhammad

cURL library allows us to connect to different servers using a variety of protocols. This is used for transferring files with URL syntax. In most of the cases we use cURL to display a specific portion of another site in our site. By using cURL at first we retrieve the contents of the site that we targeted and then parse the retrieved contents to show the specific portion using preg_match(). Here I'll show a simple example to retrieve and show the stock market price in my site from Yahoo!. At first I have to open Yahoo! in my browser. Then view the source of the page and identify that the stock market price is shown in between <dl class="markets clearfix strong small"> and </dl>. So this is my targeted portion. I'll use this tag to excerpt my targeted portion from the total contents. Full code is as follows:

<title>cURL Example</title>
<div style="margin-left:30px">
//URL of targeted site
$url = "http://m.www.yahoo.com/";
$ch = curl_init();

// set URL and other appropriate options
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// grab URL and pass it to the browser

$output = curl_exec($ch);

//Regular expression to excerpt the targeted portion
preg_match('/<dl class="markets clearfix strong small">(.*)<\/dl>/is', $output, $matches);
echo $matches[0];

// close curl resource, and free up system resources

Very simple, isn't it? Now by using our own css we can show the data in our own way.

Fixing Transparent Image in IE6

by Noman Muhammad

IE6 doesn't support transparent image. There are many ways to use transparent image in IE6. Here is a way that I use to show the transparent image in IE6 using CSS. CSS part for it is as bellows.

background:url(logo.png) no-repeat;

*html #header

this "*html #header" part is only for IE6 i.e only IE6 will recognize this portion. One drawback of using this is we have to use absolute url to the image (i.e if logo.png is in the images folder(not in the css folder) of the site we have to write absolute url to that image. like: http://www.mysitename.com/images/logo.png).
Another drawback is links (i.e <a></a>) somwtimes become unclickable and forms become unfocusable. To get rid of it we have use postion:relative for a tag. i.e


Bangla Typing using Google Transliteration

by Noman Muhammad

We can use Google Transliteration to type in Bengali on any web-site. It converts English characters to the characters used in Bengali. It offers us to type Bengali words phonetically in English script and then have them appear in Bengali. Its not translation, it does not change meaning rather it simply converts the sound of the word from English alphabet to Bengali alphabet. For example, typing "Bangladesh" transliterates into Bengali as বাংলাদেশ.
Its a small piece of code that stores on our browser(s). Visit this link to know how to enable this option to the various browsers.

Some Interesting Google Search Technique

by Noman Muhammad

We always search our query in Google. There are huge set of techniques by which we can search in Google more accurately. I collect and show some of them here that I frequently use. Those techniques are very simple but provide very fruitful result :) .

1. Whenever we search for more than one keyword (i.e. computer programming, here we use 2 key word. a) computer b) programming) at a time Google will handle this keyword using a method called Boolean Default. Google's Boolean default is 'AND'; that means if we enter query words without modifiers, Google will search for all of them. If we search for:

computer programming

Google will search for all the words. If we want to specify that either word is acceptable, we can put an 'OR' between each item:
computer OR programming

If we want to exclude a query item from search results, use a -.(minus sign or dash:
computer -programming

note that there is no space after the (-) sign.

2. To search for a phrase use "" surrounding the phrase. like:
"Some Interesting Google Search Technique"

3. Period (.) and Asterisk (*) can also be used as traditionally used.

4. To search anything from a specific site use 'site:site_name'.
google site:share-facts.blogspot.com

This will search for the term google only in the specified site.

note that there is no space after the (:) sign.

5. To restrict search to title of web pages we can use 'intitle:search_keyword'

6. Use 'inurl:search_keyword' to restrict search to the URLs of web pages.

7. To search in body text use 'intext:search_keyword'

8.Searches for text in a page's link anchors
inanchor:"google desktop"

9. To search for a specific filetype use 'filetype:desired_file_type'
bangladesh filetype:pdf

10. To search a copy of the page that Google indexed even if that site/page is no longer available at its original URL or has since changed its content completely. This is particularly useful for site/pages that change often.

11. To get the definition of search keyword 'define:search_keyword'.

12. To find lyrics use
"lyrics_phrase" lyrics

13. To get the time of Dhaka
time dhaka

Adding Digg Button on Blogspot Post

by Noman Muhammad

Digg is the social content website where we submit our favorite content. Its a very good idea to have a button on the site content so that visitor easily submit that content to digg. To show digg button on blogger post we to put some code on the template.

1.) Find the below line on the blogger template (its found when "Expand Widget Templates" is clicked).


2.) Now replace this above code with

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

This will show the digg button on ur post's left top corner. To change button's orientation simply change div orientation.

Install Google Desktop on 64 bit Vista

by Noman Muhammad

Google Desktop can not be installed normally on 64 bit Windows Vista. But we can install it from command line by '/force'.

To do so, first download google desktop. Then open the Command prompt and go to the installer directory, type the command 'googledesktopsetup.exe /force' and press Enter. Thats all ...

Adding SyntaxHighlighter JS to blogspot

by Noman Muhammad

SyntaxHighlighter is a bunch of Javascript files to help a developer/coder to post code snippets to website/blog and have it look pretty. It supports multiple language and its very easy to use and deploy it. Download SyntaxHighlighter.
Now extract the contents of the package and upload the Scripts and Styles folder to any host or website which can be linked from the blogspot site.
To make it work, now we need to edit our blog's template and add the following code after the <!-- end outer-wrapper --> tag:

<link href='http://[HOST URL]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://[HOST URL]/shCore.js'/>

<script language='javascript'>

Now we need to add support for the languages we want. For example to add support for the language php and ruby we need to link to two files. shBrushPhp.js and shBrushRuby.js.
Another Interesting thing that Its not really needed to upload the code/files as those files are already hosted by google.code.
We can easily lined up to those files. So, the above code snippet with support for PHP and RUBY will be as below.

<link href='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js'/>

<script language='javascript'>

<!--Support for php and ruby : -->
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushRuby.js'/>

Syntaxhighlighter supports pre and textarea tags, but it will not work automagically, we need to put our code into the <pre> or <textarea>.

To add some php code to our blog we to put our code as follows:
<pre name="code" class="php">
---- PHP code goes here ----

Similarly for Ruby Code:
<pre name="code" class="ror">
---- RUBY code goes here ----

See details on that page

One important notice from Overview of SyntaxHighlighter Trying to highlight 10kb worth of text will result in JavaScript being aborted because of long execution time.

Command line PHP in Windows

by Noman Muhammad

In Linux (Ubuntu, Fedora) OS we have the PHP executable available in shell, so we can run command line php script. But in windows to do so, we have to set PHP executable as Windows path variable.
We can do that in two ways ...

1. Open the command prompt (start -> run -> cmd)
and type: set PATH=%PATH%;C:\path_to_php
here, "C:\path_to_php" is the physical folder where php.exe is located. In my case its on C:\xampp\php.

Now we can run PHP script from anywhere we want like this:
D:\>php -v
PHP 5.2.5 (cli) (built: Nov 8 2007 23:18:51)
Copyright (c) 1997-2007 The PHP Group
Zend Engine v2.2.0, Copyright (c) 1998-2007 Zend Technologies
with Zend Extension Manager v1.2.0, Copyright (c) 2003-2007, by Zend Technologies
with Xdebug v2.0.2, Copyright (c) 2002-2007, by Derick Rethans

Main problem of this method is this will affect only a single command prompt.

2. The second method will affect all command prompts. First, right click on "My Computer", then click on "Properties" - a dialog box with some tabs will appear.
Now from the tab named "Advanced" click on the button "Environment Variables". This will open the Environment Variables box. Now choose the Path variable from the system variables box and click Edit.
Append the variable value with:


here, "C:\path_to_php" is the physical folder where php.exe is located. In my case its on C:\xampp\php.
';' character is used to separate directories in the var, so be sure it’s present.

Thats all.

Copy to Clipboard !!! using Javascript

by Noman Muhammad

Copy to clipboard functionality is very useful when we want to copy any particular content of a web page automatically. I search over the net to know how to implement it. I found that almost every tutorial use the javascript function "execCommand()". Here is an example how I use it:

<script type="text/javascript">
function ClipBoard()
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();

<SPAN ID="copytext" STYLE="background-color:pink">
COPY This Line!

<TEXTAREA ID="holdtext" STYLE="display:none;"></TEXTAREA>
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>

When I click on the button the line "COPY This Line!" will be copied to the clipboard and then I can paste it anywhere.
But its not a solution of my problem when i open my page on Mozilla Firefox browser.
As per I know Firefox doesn't support the javascript function "execCommand()".

After some googling I find this link which solve my problem both for IE and FireFox. Here is my implementation of this:

<head>Copy to Clipboard</head>
<script type="text/javascript">
function copy_to_clipboard(text)
var clipboarddiv=document.getElementById('divclipboardswf');
clipboarddiv.setAttribute("name", "divclipboardswf");
clipboarddiv.setAttribute("id", "divclipboardswf");
clipboarddiv.innerHTML='<embed src="clipboard.swf" FlashVars="clipboard='+
encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';

<input type="text" id="rt" value="" />
<input type="button" value="Copy" onclick="copy_to_clipboard(document.getElementById('rt').value);" />


To use it for firefox I have to download the flash (.swf) file from here and placed at path where this function is placed or else source parameter for embed tag to be changed to correct path where the flash file is been placed.
I also need firefox plugins for flash player as it depends on flash.
Now if I write something on the text box and then press the button the written text on the input box will be copied to the clipborad.

It works very fine. :)

Fckeditor: Image resize on Upload

by Noman Muhammad

Fckeditor (Html text editor) v-2.6.4 does not have automatic image resizing feature on upload or at least i don't know :( whether this editor has this feature. So to be able to resize picture on upload via fckeditor i bring some changes on "commands.php" file of fckeditor files. This file located on '\editor\filemanager\connectors\php' of the fckeditor folder. Open this file and

1. go to line # 219. It looks like

move_uploaded_file( $oFile['tmp_name'], $sFilePath ) ;

This line is under the function 'FileUpload'

2. Now change the line to

if($sExtension == 'jpg' || $sExtension == 'jpeg' || $sExtension == 'gif' )
$uploadedfile = $_FILES['NewFile']['tmp_name'];

// Create an Image from it so we can do the resize
$src = imagecreatefromjpeg($uploadedfile);

// Capture the original size of the uploaded image

// For my purposes, I have resized the image to be
// 300 pixels wide, and maintain the original aspect
// ratio. This prevents the image from being "stretched"
// or "squashed". If you prefer some max width other than
// 300, simply change the $newwidth variable

// this line actually does the image resizing, copying from the original
// image into the $tmp image

// now write the resized image to disk. I have assumed that you want the
// resized, uploaded image file to reside in the ./images subdirectory.
$filename = $_FILES['NewFile']['tmp_name'];
move_uploaded_file( $filename, $sFilePath ) ;
move_uploaded_file( $oFile['tmp_name'], $sFilePath ) ;

3. thats all.

It works for me and hope will for U :)

Scrolling PHP News Ticker

by Noman Muhammad

We often show latest news from various News Site RSS feed in our site. We can show this news as like as scrolling news in the TV channels. We called it news ticker. Here i show the steps that i do to show those news like TV channel scrolling news. I use this javascript file to do this. Here is my steps

1. create a index.php file and add these lines between body tag:

<DIV ID="TICKER" STYLE="width:520px; overflow:hidden"  onmouseover="TICKER_PAUSED=true" onMouseOut="TICKER_PAUSED=false">
<script type="text/javascript" src="webticker_lib.js" language="javascript"></script>

2. Download the webticker_lib.js javascript file from here

3. create a .php file name xmlparser.php and put those line:


$insideitem = false;
$tag = "";
$title = "";
$description = "";
$link = "";

function startElement($parser, $name, $attrs) {
global $insideitem, $tag, $title, $description, $link;
if ($insideitem) {
$tag = $name;
} elseif ($name == "ITEM") {
$insideitem = true;

function endElement($parser, $name) {
global $insideitem, $tag, $title, $description, $link;
if ($name == "ITEM") {
printf("<a href='%s' target='_blank'>%s</a> ",
$title = "";
$description = "";
$link = "";
$insideitem = false;

function characterData($parser, $data) {
global $insideitem, $tag, $title, $description, $link;
if ($insideitem) {
switch ($tag) {
case "TITLE":
$title .= $data;
$description .= $data;
case "LINK":
$link .= $data;

$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, "startElement", "endElement");
xml_set_character_data_handler($xml_parser, "characterData");
$fp = fopen("http://bangla.irib.ir/index.php?option=com_rss&feed=RSS2.0&no_html=1","r")
or die("Error reading RSS data.");
while ($data = fread($fp, 4096))
xml_parse($xml_parser, $data, feof($fp))
or die(sprintf("XML error: %s at line %d",


Here "http://bangla.irib.ir/index.php?option=com_rss&feed=RSS2.0&no_html=1" is the rss feed address, from that i retrieve news. So we to change this address when we want to retrieve news from other RSS feeder.
Thats all. Now Run the index.php file and get news ticker in action.

Simple Javascript menu :OpenCube

by Noman Muhammad

Often we to create Javascript menu to use in website. Opencube provides a tremendous software to produce various type(horizontal/vertical) of menu and use it our site. This software can be downloaded from this link. For Linux/mac download from here. Use it and enjoy it :).

Simple Ajax Tab Menu

by Noman Muhammad

Ajax tab menu is very useful to show contents without reloading the full page. Last week i create a Ajax based tab menu. Basically i modified my menu by getting help from this link. Here i'll show the steps that i do to create this menu functional.

1. create a simple html file (index.html). Between body tag put these

<ul id="tabmenu">
<li onclick="makeactive(1)"><a class="" id="tab1">First Tab</a></li>
<li onclick="makeactive(2)"><a class="" id="tab2">Second Tab</a></li>
<li onclick="makeactive(3)"><a class="" id="tab3">Third Tab</a></li>
<div id="content"></div>

Between head tag put these lines

<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<script language="JavaScript" type="text/javascript">
function makeactive(tab)
document.getElementById("tab1").className = "";
document.getElementById("tab2").className = "";
document.getElementById("tab3").className = "";
document.getElementById("tab"+tab).className = "active";
callAjax('content.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error');

2. Now create the ajax.js that we add in our head section. These are the content of ajax.js

function callAjax(url, pageElement, callMessage, errorMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
req = false;
req.onreadystatechange = function() {responseAjax(pageElement, errorMessage);};

function responseAjax(pageElement, errorMessage) {
var output = '';
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
} else {
document.getElementById(pageElement).innerHTML = errorMessage+"\n"+output;

3. Now we need another php file where output will be processed. Nmae it "content.php" and put these lines in it

if ($_GET['content'] == 1)
echo 'Content for Page 1';
if ($_GET['content'] == 2)
echo 'Content for Page 2';
if ($_GET['content'] == 3)
echo 'Content For Page 3';

Thats all. Now run the index file and see the tab menu in action.
To get First Tab selected when the page loaded just add this( onload="makeactive(1)") to body tag. So in index.html body tag will look as like as that : <body onload="makeactive(1)">

Free online .flv to .mp3 converter

by Noman Muhammad

Somwtimes we need to download video from popular video sharing site like Youtube, MySpace, Metacafe, iFilm, Google Video or flash video embedded on web page and then transform it into .mp3 to hear that on our mp3 player. I found this site on net which is very helpful and handy to convert the .flv extended video file to .mp3 file and download instantly. We just need to copy the URL of the file that we need to convert to .mp3 and paste it into the site and press convert ... thats all.

Spread your site content : Addthis

by Noman Muhammad

Social networking site become an integral part to spread our website contents. This can help us to increase traffic to our site. Now a days we see something like this
almost in every sites' content. This is one of the way to open the door to the network to spread our content.
Addthis offers us this service. Its very simple to use this tools. We can get the code from site and use the code in our site.

Skype installation in Ubuntu

by Noman Muhammad

Skype is not available in any Ubuntu software repository. So it can't be directly installed using Synaptic or apt-get. To install it using Synaptic or apt-get we have to add Medibuntu repository. But I'm too lazy to install it in this way. I rather download Skype from Skype download page. Skppe can also be downloaded for Ubuntu 64 bit. Then install it by double-clicking the deb file and clicking "Install package".

Some useful firefox plugins

by Noman Muhammad

Firefox offers huge list of plugins/addons that let us to personalize our browser. I list some of them as very useful. Those are:
1) Firebug: Firebug is used to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
2) MeasureIt: MeasureIt allows us to draw out a ruler to get the pixel width and height of any elements in a web page.
3) lori (Life-of-request info): lori tells us how long it takes to load a webpage.
4) IE View Lite: We use IE View Lite see how a site is rendered in IE.
5) Delicious Bookmarks: Its the official firefox add-on for Delicious.
6) Add to Search Bar: Add to Search Bar integrates any pages' search functionality available in the Search Bar of firefox browser.

Use Google Apps for site's mail box

by Noman Muhammad

Google Apps is another superb service from Google. Google apps is basically a collection of several application and web storage. It includes: Gmail, Google Talk, and Google Calendar, Google Docs (text files, spreadsheets, and presentations), iGoogle, and Google Sites. So we can easily setup our mail box for our site and use this to send and receive mail using Google service. Suppose we have a domain "www.my_domain.com". Using google apps we can easily get mail account like "admin@my_domain.com, my_name@my_domain.com, whatever@my_domain.com" etc etc. Besides that mail holders can easily communicate among them using google talk, share their doc using google docs. Its very easy to setup the hole process and start the journey :) . Interesting thing is Google Apps has a free version i.e Standard Version, it supports 50 email address per domain. But the thing is to integrate this to our site, we must have full control of our site i.e we must have the administrative access to our site and domain control panel.

Popular websites enrich English Dictionary !!!

by Noman Muhammad

Net surfing is very popular throughout the world. Now-a-days the interesting thing is popular wesbsites enriches the dictionary. Quite interesting. I'm googling it. What does it mean? It certainly means that I'm searching it in google(www.google.com). So googling is a new word ;) . Similarly the most popular social networking site Facebook also enrich the dictionary. I've facebooked all of my photos. Here facebooked stands for uploaded the photos to my facebook page. Again, I facebooked u. here facebooked stands for added u to my facebook page. So, facebook is a versatile word. Isn't it?
Similarly, if u myspacing u may waste ur time :D. Have fun in twittering.

Codeigniter help site

by Noman Muhammad

http://www.phpeveryday.com/articles/CodeIgniter-Introduction-to-CodeIgniter-Framework-P146.html http://www.developertutorials.com/tutorials/php/rapid-application-development-with-codeigniter-8-02-17/page4.html
CodeIgniter AJAX With jQuery
CodeIgniter AJAX With jQuery-2
CI and set_checkbox()
CI and set_checkbox()

Codeigniter and Jquery
CI templating

Free Php Photo Gallery: SelectaPix Image Gallery

by Noman Muhammad

Last week i googling for a Php photo gallery and found many. I try some of them and at last use SelectaPix Image Gallery. It seems very handy and useful to me as it is database supported. Though the instructions are very easy to implement, i found some error when i run the Gallery. It may be for that the config file is not included everywhere correctly. Then i add this line

to Two files (classes/top_cat.php and classes/sub_cat.php).
I add lightbox Javascript to modify the full image view. Lightbox is a simple, unobtrusive script used to overlay images on the current page. According to the instruction of lightbox Javascript keep the folders in appropriate place and then modify classes/sub_cat.php file to bring lightbox in action :D

SelectaPix Image Gallery with lightbox.

Job scheduler in RoR

by Noman Muhammad

BackgroundRb is a Ruby job server and scheduler. In this post i'll create a simple RoR project in which using backgrounDRb we will fetch data from database and logged them in the log file.

1) pre-requisites: two gem => chronic, packet [in my case the current version of packet doesn't work, so i download the packet version: 0.1.5 from rubyforge and then manually install it]
(*) install chronic :
~# sudo gem install chronic
(*) install packet :
~# sudo gem install /path/to/your/directory/packet-0.1.5.gem

2) download backgrounDRb from http://github.com/gnufied/backgroundrb/tree/master and extract the .tar/.zip file and rename the folder backgroundrb. Store this folder in projects_name/vendor/plugins

3) now setup backgrounDRb
~# rake backgroundrb:setup

4) now create your own worker class
~# ./script/generate worker fetcher
---- here fetcher is the worker name, this command will create fetcher_worker.rb file in /libs/worker folder. my fetcher_worker.rb is as follows:

class FetcherWorker < BackgrounDRb::MetaWorker
set_worker_name :fetcher_worker

def create(args = nil)
#this method is called, when worker is loaded for the first time
logger.info "Created feeds worker"

def update()
logger.info "Hello UPDATE"
@posts = Post.find(:all)

for post in @posts
logger.info post.name


Implementing live validation in Ruby on Rails

by Noman Muhammad

LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. livevalidation plugin is used to integrate Javascript library LiveValidation to the Rails application. LiveValidation implements client-side form validation. To see livevalidation in action ( !!! ) we have to install it in our rails project. Then use Rails validation helpers to validate our models and use Rails form helpers to create our forms.

here is the example steps how i make it live in my project. [i use Netbeans 6.0 to build my app]

1. create a new project
2. run Rake Task to create the db
3. generate scaffold with this parameter in the [Model Name:] text field

Blog title:string body:text
4. now, download livevalidation plugin from github
5. unzip the downloaded zip folder and rename the folder 'livevalidation'
6. store 'livevalidation' folder in the "\vendor\plugins\" folder. [i.e. \vendor\plugins\livevalidation]
7. now install Javascript and CSS with this Rake task
$ rake livevalidation:install

8. add these lines in /views/layout/blogs.html.erb
<%= javascript_include_tag :defaults, 'live_validation' %>
<%= stylesheet_link_tag 'live_validation' %>
9. now add validations to the model
validates_presence_of :title
10. now start the server and go to http://localhost:3000/blogs/new
11. when you leave title textfield without entering any value, you will get an error in RED and when you type something in that field you will get a thnx :) . so its working

Ruby on Rails installation in Ubuntu

by Noman Muhammad

i'm using Ubuntu 8.10. here is the steps how i install RoR in ubuntu. i get this instruction from Ubuntu Community documentation. I just mention here the steps that i do to install RoR.

1. at first open the terminal and to get Ruby run this command

sudo apt-get install ruby-full build-essential
this command also install a web server named 'WEBrick'

2. Now to download and install ruby gems we to run the following command one after another
wget http://rubyforge.org/frs/download.php/45905/rubygems-1.3.1.tgz
tar xzvf rubygems-1.3.1.tgz
cd rubygems-1.3.1
sudo ruby setup.rb
sudo ln -s /usr/bin/gem1.8 /usr/bin/gem
sudo gem update --system
this will install Rubygems 1.3.1

3. then we install RAILS as gem
sudo gem install rails
4. so, RoR is installed in Ubuntu.

5. now we will install MySQL database and it's connector
sudo apt-get install mysql-server mysql-client
sudo apt-get install libmysql-ruby libmysqlclient-dev
sudo gem install mysql
6. now to create a new rails application run this command
rails /home/www/test_app -d mysql
this will create a new applicaton named 'test_app' in '/home/www' directory

7. now to run the application do the following
$cd /home/www/test_app
$ruby script/server

then go to open the browser and go to ''. new application will respond

AutoCompleter example in Ruby on rails

by Noman Muhammad

in Ruby on Rails adding auto complete textbox is pretty simple. here is a simple example of it ...
in this example there will be 2 tables in DB. Customers table & Messages table. In the Customers table customer name and address will be saved. In the Messages table customer name and message to that customer will be saved. In the message form if we start typing the customer name, the name of the customers will be shown and we can select a particular customer name. that all. so lets start ...

Here i use Netbeans 6.0 as IDE

1. first create a new rails project.
2. run Rake Task to create the db
3. generate scaffold with this parameter in the [Model Name:] text field

Customer name:string address:text
4. run Migrate Database to create the customers table
5. now run this project
6. in the browser go to http://localhost:3000/customers and add some customers name and address
7. now generate another scaffold with this parameter in the [Model Name:] text field
Message to:string body:text
8. run Migrate Database to create the messages table
9. now the plugin Auto_complete have to be downloaded
10. download auto_complete plugins from github
11. unzip the downloaded zip folder and rename the folder 'auto_complete'
11. store 'auto_complete' folder in the "\vendor\plugins\" folder. [i.e. \vendor\plugins\auto_complete]
12. now, open the file 'messages.html.erb' from \app\views\layouts and add the following line before tag
<%= javascript_include_tag :defaults %>
13. now, open the file 'new.html.erb' from app\views\messages and change this line
<%= f.text_field :to %>
<%= text_field_with_auto_complete 'message', 'to',{}, :skip_style => false  %>
14. open MessageController and add this line
skip_before_filter :verify_authenticity_token, :only => [:auto_complete_for_message_to]
after this
class MessagesController < ApplicationController

15. add this new function in this controller:
def auto_complete_for_message_to()
user_name = params[:message][:to]
@customers = Customer.find(:all , :conditions=>"name like '%"+user_name.downcase+"%'")
render :partial => 'username'

16. now create a new partial file in app\views\messages and name it _username.html.erb
17. paste this code in this partial file
<ul class="allusers"><% for customer in @customers do %><li class="thisuser"><div class="useremail"><%=h customer.name %></div><div class="username"><span class="informal"><%=h customer.address %></span></div></li><% end %></ul>

18. now restart server and in the browser go to http://localhost:3000/messages and now in the to field start typing u'll see some name coming from DB.
19. so its woking !!!!!!!!!!!!!!!!!!!!!!!!!!!

New font install in Ubuntu

by Noman Muhammad

we sometimes need to install new font in Ubuntu. To do so first download the desired truetype font(.ttf) and save it in ur harddisk. Then copy the .ttf file to truetype folder of the Ubuntu by running this command in the terminal >

sudo cp /location_of_the_downloaded_font/downloaded_font.ttf /usr/share/fonts/truetype

then run this command in the terminal
sudo fc-cache -f

using VIM in ubuntu

by Noman Muhammad

in Ubuntu we often have to use vim(text editor) to edit different type of files. here is some command to get familiar with this editor ... type the following on the terminal

vim file_name

to start editing press [Insert] button ... then u can edit the file as usually
to finish editing press [Esc] button
then press [Shift] button + [:] button
if u want to save what u do then press [x] button
if u want not to save the changed items then press [q] button + [!] button
then to exit press [Enter] button

actually there are lots of commands to run ... but this are i frequently use .....

to know ins & outs of vim visit this

Change MAC address in Ubuntu temporarily

by Noman Muhammad

i have to change my MAC address in Ubuntu for temporary basis. so i do the following in the terminal:

ifconfig eth0 down
ifconfig eth0 hw ether 01:02:03:04:05:06
ifconfig eth0 up
first command will down the network, then 2nd command change my MAC [ 01:02:03:04:05:06 is replaced by my desired MAC address] and then 3rd one again up my network.
to see the change type ifconfig in the terminal and press Enter. changed MAC address will be shown ...
simple ..... huh ;)

but remember there may be easier solution then that i dont know :(

Is there any one click php-mysql installer in Ubuntu??

by Noman Muhammad

I dont find any xampp or wamp like installer for Ubuntu. But run the following command in the terminal and get things done ... :) wow

sudo apt-get install apache2 php5 mysql-client-5.0 mysql-server-5.0 libapache2- mod-php5 libapache2-mod-auth-mysql php5-mysql php5-cli

then from terminal connect to mysql or in the browser type "http://localhost/" and get
It Works!

u can also install PhpMyAdmin in the same way or from Synaptic Package manager.

Ruby on rails installation on Windows

by Noman Muhammad

a. First, let's check to see if you already have Ruby installed. Bring up a command prompt and and type ruby -v. If Ruby responds, and if it shows a version number at or above 1.8.2 then type gem --version. If you don.t get an error, skip to step 3. Otherwise, we.ll install a fresh Ruby.
b. If Ruby is not installed, then download an installation package from rubyinstaller.rubyforge.org. Follow the download link, and run the resulting installer. This is an exe like ruby186-25.exe and will be installed in a single click. You may as well install everything . It's a very small package, and you'll get RubyGems as well alongwith this package. Please check Release Notes for more detail.
c. With RubyGems loaded, you can install all of Rails and its dependencies through the command line:

C:\> gem install rails --include-dependencies
Keeping Rails Up-to-Date:
Assuming you installed Rails using RubyGems, keeping up-to-date is relatively easy. Issue the following command:
C:\> gem update rails
This will automatically update your Rails installation. The next time you restart your application it will pick up this latest version of Rails. While giving this command, make sure you are connected to the internet.

Installation Verification
You can verify if everything is setup according to your requirements or not. Use the following command to create a demo project.
C:\> rails demo
This will generate a demo rail project, we will discuss about it later. Currently we have to check if envrionment is setup or not. Now next use the following command to run WEBrick web server on your machine.

C:\> cd demo
C:\demo> ruby script/server
=> Rails application started on
=> Ctrl-C to shutdown server; call with --help for options
[2007-02-26 09:16:43] INFO WEBrick 1.3.1
[2007-02-26 09:16:43] INFO ruby 1.8.2 (2004-08-24)...
[2007-02-26 09:16:43] INFO WEBrick::HTTPServer-start:pid=2836...
Now open your browser and type the following address text box.

new comer in the blog world

by Noman Muhammad

Hello everyone

start my journey on knowledge sharing world. This is 9th Feb' 09. So its a historic day for me. isn't it? ... :D