Semantic UI Colors

It’s been awhile since I started using Semantic UI for several of my projects. It’s easy to forget the class name for different colors available with the framework. Many a time, I have to look throught semantic.css source to find the colors I need. So I decided to list them here for future reference.

I am using Semantic UI – 1.12.3.

Semantic Color Class

  • black
  • blue
  • green
  • orange
  • pink
  • purple
  • red
  • teal
  • yellow
  • positive
  • negative

Setting Up Perl and CGI For Wamp Server WAMP(P)

I work on Perl and CGI recently for my college project and so I decided to write a few steps on setting up Perl and CGI with Wamp Server. I hope this might be useful.

First you need to download Wamp Server from and install Wamp Server on your machine. The default installation directory is ‘C:\wamp” and here I am using the default options for installation. To complete the installation you have to set the host name for your mail server and your email address, here you can leave the default option again. That will do no harm.

The current Wamp Server will install Apache 2.2.11, PHP 5.2.9-2 + PECL, MySQL 5.1.33, SQLitemanager and PhpMyadmin. Continue reading Setting Up Perl and CGI For Wamp Server WAMP(P)

Equal Height Division Using Javascript And CSS

This technique is really simple. Having equal height division in your design is sometimes necessary to maintain consistent look and feel on your layout. You can use this technique to make your sidebars equal height, or to make your content area and the sidebars equal height.

Get The Source Code:  Without Jquery  With Jquery

Step 1:
Create an index.html file for your layout. I create an example html layout for this article.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Equal Height Division Using Javascript and CSS</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" language="javascript" src="javascript.js">

<body onload="grabtheclass()">
    <div class="outer">
        <div class="inner">
            <div class="main">
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
            <div class="sidebar">
                <p>The Sidebar Content</p>
                <p>The Sidebar Content</p>
                <p>The Sidebar Content</p>

Continue reading Equal Height Division Using Javascript And CSS

Floating DIV Above Embedded Flash Object

This simple tips will help you make your division float above flash object or flash player embedded on your website. When you embed a flash object or flash player on your website, the flash object will take the highest number possible z-index by default and all the other division layer will appear below the flash object. Actually this property of embedded flash object is quite useful in most cases. However when you want some text or division to appear on top of your flash object, you need this tips to fix that issue. You have three options to fix this floating issue.

First option is to compile/recompile your flash object with the parameter ‘wmode‘ value set to ‘opaque‘. However, in most cases, we normally get a precompiled flash object rather than the source flash file. In such cases the second option will be more suitable. Second option is to add a parameter in your flash object as shown in example below

	<param name="bgcolor" value="#FFFFFF" />
	<param name="width" value="670" />
	<param name="height" value="390" />
	<param name="wmode" value="opaque" />

Third option is to add an attribute ‘wmode’ with value set to ‘opaque’ in the object file. After performing any one these, your flash player or flash object will float below <DIV> having higher z-index.

Renaming Multiple MySQL Tables Within A Few Seconds

This can be used to rename the prefix or suffix of a table, but not the whole table name.

I came up with this simple tips on renaming multiple tables in your MySQL database within a few seconds.Recently, I was googling on how to rename multiple tables at once in MySQL Database. I came across few tips but they didn’t meet my needs. So I came up with this simple way of doing it.

First, you need to have a text editor having ‘Find and Replace‘ feature. Almost every text editor available will be having this feature. I am using Notepad++ for the text editor. The next thing you need to do is to export your database having the tables you need to rename. Export your database to an SQL file and save it on your computer. Now, fire up the text editor of your choice and open the SQL file you downloaded just now. Click the Find and Replace option from your text editor. Find your table name and then type the table name in the ‘Find‘ field, and type the replacement string in the ‘Replace‘ field. Then click ‘Replace All‘ and save the SQL file. For example, If your table name is tbl_mytable, you can find the string tbl_ and replace it with tl1_. The find and replace procedure might be different with different editors but they are likely to be similar.

Now, go to phpMyAdmin and drop or backup all the tables inside your database. Import the SQL file you have just edited from your phpMyAdmin and now you are good to go with your tables having new name.