How to verticaly align a checkbox and label

The situation is like this. You have a checkbox and a label with small font size just next to this as shown in the code below:

<input type="checkbox" />
<label style="font-size: 10px;">This is the label</label>

This will be displayed as:

This is the label

Notice that the text is not vertically aligned with the checkbox. To make it aligned vertically to the middle of the checkbox we can add following style to the label

position: relative;
top: -2px;

So the code becomes:

<input type="checkbox" />
<label style="font-size: 10px;position: relative;top: -2px;">This is the label</label>

and it will be displayed as:

This is the label

Now see that the text is vertically aligned to the checkbox.

Adjust the value of top according to the font size and you are good to go.

Finding which process is holding the port

This issue kept me stuck for about 6 straight hours, so I assume, that it is my moral duty to record it down in my blog.

The issue was like this. When I was restarting (or starting) my apache server, I was getting an error like "unable to bind 0.0.0.0:80 address"

I know some of you would find it quite silly, but there might be some people who still be struggling with this issue.

Well, I am using Ubuntu9.04 with the default apache2. This issue could occur due to many of the reasons, but in my case the port 80 was not free. So to find what is binding the port run the following command:

sudo netstat -antlp | grep :80

This will display a list of processes working on port 80 in a tabular format. The last column in the table is the PID or Process ID.

Run the following command to kill this process

sudo kill -9 1234

(Be sure to replace the number 1234 with the actual PID)

If there are more processes then repeat this command with those processes IDs also

Thats it! try restarting the apache server now.

Setting Up PHP development environment on Ubuntu 9.04

INSTALL APACHE

sudo aptitude install apache2 apache2.2-common apache2-mpm-prefork apache2-utils libexpat1 ssl-cert

cd /etc/apache2/mods-enabled

sudo ln -s ../mods-available/rewrite.load rewrite.load

cd /etc/apache2/sites-enabled/

sudo ln -s ../sites-available/optimus optimus


INSTALL PHP

sudo aptitude install libapache2-mod-php5 php5 php5-common php5-curl php5-dev php5-gd php5-imagick php5-mcrypt php5-memcache php5-mhash php5-mysql php5-pspell php5-snmp php5-sqlite php5-xmlrpc php5-xsl


sudo sed -i 's/memory_limit = 16M/memory_limit = 32M/' /etc/php5/apache2/php.ini

INSTALL MYSQL

sudo aptitude install mysql-server mysql-client libmysqlclient15-dev

keep the username and password as root and root respectively

INSTALL JAVA

sudo apt-get install sun-java6-jre sun-java6-plugin sun-java6-fonts
cd /usr/

sudo mkdir java


INSTALL SVN

sudo apt-get install subversion


INSTALL EXTRA REQUIRED PACKAGES

sudo apt-get install php-pear

sudo pear channel-update pear.php.net

pear remote-list
sudo apt-get install fop
sudo pear install HTTP_Upload

sudo pear install MDB2

sudo pear install MDB2_Driver_mysql

sudo pear install Structures_Graph

sudo pear install XML_Feed_Parser

sudo pear install XML_Parser

sudo pear install XML_fo2pdf

sudo pear channel-discover pear.phpunit.de

sudo pear channel-discover pear.symfony-project.com

sudo pear install Image_GraphViz

sudo pear install Log

sudo pear channel-discover pear.phpunit.de

INSTALL FLASH

sudo apt-get install flash


MAIL SETTINGS
Get the files related to Mail settings and extract them to the user's home directory

cd $home
sudo cp Serializer.php /usr/share/php/XML

sudo cp Unserializer.php /usr/share/php/XML

sudo cp Util.php /usr/share/php/XML

sudo mkdir /usr/share/php/Mail

sudo cp -R Mail_IMAPv2/* /usr/share/php/Mail/

VIRTUAL HOST ENTRY

sudo vi /etc/apache2/sites-available/optimus

Add the following lines and save the file


ServerName myapp
DocumentRoot /var/www/app

AllowOverride ALL



sudo vi /etc/hosts

add a line as follows and save the file:

127.0.1.1 myapp


Using cyclic function in javascript

Recently I was working on a design for our client 'Your Tribute'. For this design, a slide show was required. One can find a number of slideshows on Internet, but the glitch with this one was it was having bullets related to each image and this slideshow could be paused by hovering over any of these bullets. You can have details by having a look at Your Tribute's website.

The difficulty here is that if user hovers over a bullet (or side tabs) then the respective slide should be displayed and once the user hovers-out of the bullet then the slide-show should resume.
After searching for long on Internet, I decided to write one jQuery plugin for this slideshow by myself.

While working on this I learnt the difference between setTimeout and setInterval. I also used the clearInterval to interrupt the time interval ion javascript.

Whenever we have to use recursive functions like this:


function recrFunc(){
.
.
setTimeout('recrFunc();', 10000);
.
.
}


...then it's better to use setInterval() function something like this:


timeoutid = setInterval('recrFunc();', 10000);
function recrFunc(){
...
}


... the use of setInterval function is that this time can be cleared anytime by using clearInterval() function like this:


clearInterval(timeoutid);


So, crux of the story is that if you have to call a function recursively after a specific time interval then use setInterval instead of setTimeout and if you have to call a function only once after pausing for a specific time period then use setTimeout

Bevel Images with only CSS

CSS method for adding a beveled effect to images like this:

CSS:

span.bevel {
position:relative;
width:200px; /*width of image*/
height:200px; /*height of image*/
display:block;
}
span.bevel span {
position:absolute;
left:0;
top:0;
display:block;
width:190px; /*width of image - 2(width of bevel*/
height:190px;/*height of image - 2(height of bevel)*/
border:5px solid;
border-color:#fff #000 #000 #fff;
filter:alpha(opacity=40);
opacity:0.4;
}



HTML:

<span class="beveled">
<img src="http://www.blogger.com/stormtroopers.jpg" alt="LegoStormtroopers" />
<span></span></span>
<!--Do NOT remove this extra span-->

!important

I know I am a bit late in understanding this concept, but it's better if it's later than never. I learnt about the !important property today. This keyword is used in CSS to tell the browser that whichever rule has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.
The best use of this property is the famous 'Holy Hack for IE'. I am sure if you have ever worked on rounded corners with images, then you have encountered that everything works fine in all other browsers but in IE, there is an issue of 2 pixels. I'll explain that some other day. For now the fix is !important property.
For example,


.Inner_Form {
width:648px !important;
width: 650px;
background-color:#FFFFE5;
border-left: solid 1px #D4D4D5;
border-right: solid 1px #D4D4D5;
border-top: none;
border-bottom: none;
margin:0 1em;
}

In this code, notice that the width is being defined two times. This is to trick the IE browser. What this code is doing that it is telling all the browsers that width 648px is an important thing. Mind it! BUT as we all know that IE is one of the dumbest browser, which is unable to interpret the !important tag. Which in a way is good for us. We can now trick the IE by telling that width should be 650px ;) This solves our 2 px problem

How to copy a file from remote mac or *nix using SSH

There are times when you are working on a remote linux or mac machine and you have to copy a file to your own *nix or mac machine. So, Tarun told me a way for that today. I am going to explain this with the help of an example. I am assuming that both the remote and the local machine are using mac OS

Suppose the IP of remote mac machine is 192.168.1.1 and the IP of your local machine is 192.168.1.2. The directory which you want to copy is located at /Users/remote/copyMe/ and the location where you want to place it on your machine is /Users/local/placeHere/ [sidenote: to find the IP of your machine. Run the Terminal and type ifconfig]

Now Open the Terminal on your local machine and type:
ssh [remote_ip_address] -l [remote_user_name]

i.e. ssh 192.168.1.1 -l root

Note here that it is small L (not one) switch after the remote address and that the remote_user_name is the username to access the remote machine

With this command you'll be asked for the login password. Once the correct password is filled you will be able to enter the remote machine. Now is the time to copy the directory [or just a file] from this remote machine to your local machine. This can be done in a single command. Like this:
scp -r [path to the source] [local_user_name]@[local_ip_address]:[path to the destination]
Now let me make it non-generic

scp -r /Users/remote/copyMe/ aman@192.168.1.2:/Users/local/placeHere/

Now all the contents of the remote directory 'copyMe', will be placed under 'placeHere' local directory. I have used a -r here to copy the directory recursively. if you are copying only a file then there is no need for this switch.

So was that so difficult! ;)