Monthly Archives: February 2016

Color Picker – HTML5

Hi Friends,
Today I’m going to tell related to color picker in html. The HTML5 has many new features than HTML. It support <video>, <audio>, and <canvas&gt tags and also different input types support like input type=”text/date/color/…”. It look like Adobe Photoshop color picker. For selecting the color combination or single color, in PHP or HTML page we can easly use with input type=”color” . This is mainly used in ecommerce website or other marketing sites.

In HTML, input type=”color” is not support. We can’t see the color picker in HTML. Solve this problem in HTML5. More advantages and features are available in HTML5 than HTML.

The below example, shows how to use the color picker in html and shows the code output also. The HTML color picker to browse millions of colors. We can insert the selected colors to database. And also display the selected color or alert colors etc.

Features

Its very simple
Can pick any color from screen
Colors shown in hex and decimal
Easy to use web development purpose
Can more than one colors
Works with Firefox, Internet Explorer, Photoshop and any other application

Source Code

Color Picker Example
Choose Color 1: 

Choose Color 2:

DEMO

Color Picker Example

Choose Color 1:

Choose Color 2:

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

An Introduction to SQL Data Types – PostgreSQL

Hi Friends,
Everybody know that SQL is a structured Query Language is a computer language. It is used for storing, manipulating and retrieving data stored in relational databases. This article give you a basic idea about data types in PostgreSQL.

SQL support standard language for relational database system. The all relational database management system like: MySQL, MS Access, Oracle, Sybase, Informix, Postgre and SQL Server use SQL as their standard database language.
Numeric Data Type
Numeric data types consist of two-and four-byte integers, four-and eight-bytes floating point numbers and fixed precision decimals.
The numeric data types have a full set of corresponding arithmetic operators and functions.
1) Decimal: It is used for stores the variable, variable and the range is equivalent to 8000 digits.
2) Float4: Its storage is 4 bytes and the range is up to 15 decimal places.
3) Float8: Its storage is 8 bytes and the range up to 15 decimal places.

4) Int2: Its storage is 2 bytes.
5) Int4: Its storage is 4 bytes.
6) Int8: Its storage is 8 bytes.
7) Numeric: Its storage is variable and there is no limit for the range.
8) Serial: Its storage is 4 bytes, and range is between 0 to +2147483647

The serial type is a special- case type constructed by Postgre from other existing components. This is helps to create unique identifiers for table entries.

CREATE TABLE tablename (columnName SERIAL

Character Data Type
SQL defines two primary character types: char and varchar. Postgre supports these types, in addition to the more general type.

1. Char: Storage is 1 bytes and de-scripted by single character only.
2. Varchar(n): Storage is (4+n) bytes and de-scripted by variable length with a limit.
3. Text: Storage is (4+x) bytes and de-scripted by variable length.
4. Char(n): Storage is(4+n) bytes and descripted by fixed length blank padded.

Date/Time Data Type
The following types are supported by PostgreSQL
1) TimeStamp: Storage is 8 bytes and works for oth date and time.
2) Timestamp with timezone: Storage is 8 bytes, and works for both date and time with time zone.

3) Interval: Srorage is 12 bytes and works for tme intervals only.
4) Date: Storage is 4 bytes, works for dates only.
5) Time: Storage is 4 bytes, works for time of the day only.
6) Time with Timezone: Storage is 4 bytes and works for time of the day.

Boolean Data Type
Postgres supports bool as the SQL3 Boolean type. Bool can have one of only two states: “true” or “false”. Bool can be used in any Boolean expression, and Boolean expression always evaluate to a result compatible with this type. Bool uses 1 byte of storage.

Geometric Data Type
Geometric data types represents two dimensional spatial objects.
1) Point: Storage is 16 bytes.
2) Line: Storage is 32 bytes.
3) Lseg: Storage is 32 bytrtes.
4) Box: Storage is 32 bytes.

5) Path: Storage of 4+32n bytes.
6) Polygon: Storage of 4+32n bytes.
7) Circle: Storage of 24 bytes.

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Create mysql database – Cpanel

Hi Friends,
Here we discuss, how to create mysql database in cpanel. All are familure with database and user creation in localhost using XAMP or WAMP. In cpanel, database and user creation is different. It’s very important for developing the web site and other useful applications. Following seven step helps you to how to create the mysql database in cpanel.

There are two cpanel tools are available for creating MYSQL database.MySQL Databases menu and MySQL Database Wizard.

Creating database from MySQL Databases menu

1)You have to login to your cpanel to create mysql database with correct username and password. Login cPanel and click on MySQL Databases menu in Databases section.

2)Then you need to select mysql databases.

3) Type your database name and then click create database button. Here, my database name is ‘testdb’.

The database is successfully created and ready touse. Now you’ll get successful message as created database successfully as follows as:

4)After you have to create new user (MySQL Users > Add New User). Type your user name and password here. You can view the strength password is loaded. Then click create user button.

Now the user name ‘testusr’ is created.

5)Now you successfully create both MYSQL database and MYSQL user. Next you add Add user to Database. Then you need to add your user name ‘testusr’ to mysql database ‘testdb’. Select your user name(testusr) and database(testdb) as follows as. then click Add button.

6.Now you select all the privileges. Then click Make changes button.

7. Finally you will get a message like:

Finally you created a mysql database(testdb) , user(testusr) and add user to mysql database in cpanel. Then you back to home and click phpmyadmin.

Then you can create table in your mysql database ‘testdb’.

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

CSS Zoom Effect on Image Hover

Hi all
Today we will discuss one interesting topic related to CSS code for creating zoom effect on image hover. In image hover there are many ways are available to add special effect.
We can adding a zoom effect using CSS3 transition on image when the user hover the image. The CSS3 transition also provide a way to control animation speed and effect.
Here I will share a simple way with example, we can add zoom effect on Image hover with CSS.Here there are four methods are describe below with example and running code.

Zoom-In Image on Hover

The following example shows the zoom-in effect on image hover using html5 and CSS3. Table of contents are:

HTML
CSS

The HTML: Specify the image and class for zooming effect.

The CSS: Specify the style of image and also hover effect. It specify within style tag.

Source Code

DEMO

==========================================================================

Zoom-Out Image on Hover

The following example shows the zoom-out effect on image hover using html5 and CSS3

Source Code

DEMO

========================================================================

Grow Image on Hover

The following example shows the grow image effect on image hover using html5 and CSS3

Source Code

DEMO

===================================================================

Shrink Image on Hover

The following example shows the shrink image effect on image hover using html5 and CSS3

Source Code

DEMO

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Image With Shadow – CSS

Hi friends,
Today I share one important topic related to CSS effect. Here I describe image box shadow using CSS3. Shadow is a powerful properties in CSS. CSS3 box-shadow properties allows you to create single or multiple, inner or outer drop-shadows. We can use these properties our site our needs. We can set the style in CSS like width,height,margin,image as background, size of background image, position,border,box-shadow etc.

CSS shadow with blur effect

Source Code

	
	CSS box-shadow on all four sides

Source Code

DEMO

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Responsive HTML5 and CSS3 Flat Pricing Tables

Hi all,
Today I share one useful important related to flat pricing table using HTML and CSS. The responsive flat pricing table will provide here. Flat pricing table is used for representing pricing into table. Free pricing tables with css and html templates included for free download is here for your web hosting website.

Table of Content

The HTML
The CSS

The HTML

		
    
        Enterprise$59
        Sign up         
        
            10GB Disk Space
            100GB Monthly Bandwidth
            20 Email Accounts
			Unlimited subdomains			
         
    
    
        Professional$29
        Sign up        
        
            5GB Disk Space
            50GB Monthly Bandwidth
            10 Email Accounts
			Unlimited subdomains			
            
    
    
        Standard$17
		Sign up
        
            3GB Disk Space
            25GB Monthly Bandwidth
            5 Email Accounts
			Unlimited subdomains			
        
    
    
        Basic$9
        Sign up		
        
            1GB Disk Space
            10GB Monthly Bandwidth
            2 Email Accounts
			Unlimited subdomains

THe CSS

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

How to display existing image from specified folder/directory – PHP

Hi all,
Today I’m going to share important topic based on “how to display existing image from corresponding directory in php”. Nobody try to discuss how to display existing content in web page.
Everybody knows that how to upload image or something to specified directory or folder using PHP. But nobody try to display the existing content in web page. This concept is impotant in upload the profile pic or some other functionality.

We can describe this problem like 1)I have php code its perfectly working. We can upload the image and can save the image to corresponding directory and also the image can display temporary but can’t permanently. How to solve this problem.
For solving this problem, I specify two method:

I have php code which perfectly woks its upload the image and save the image to directory but the image is display temporary ! i want to display it permanently … and whenever i want to change the image it will change the image and display uploaded image

Here I explain how to display the image from a specified directory or folder using php. I want to display all the images(includes both png,jpeg and all image extension) from a directory.
In my case my directory is ‘team_member_image/’. The glob is used for this operations. The glob() function returns an array of filenames or directories matching a specified pattern.

Syntax-glob() Function

glob(pattern,flags)

Method1:Using for loop

'."  ";
	}
?>

Description:Fetch an array of filename or directories matching a specified pattern by using glob() function. The above code shows how to use the glob() function in our needs.
First fetch all the files from “team_member_image” directory. The “.” helps to fetch all the files. Fetch all the files from “team_member_image” and store it to variablename as file.
Next count the filename using count($file) and using for-loop for display all the files from a specified folder like “team_member_image”.

Method2 : Using foreach

';
}
?>

Description: Fetch the array of filename using glob function same as first method. In method1 we use for loop but her we use foreach method, and display the images using <img> tag.

From the above two method, it will display all the contents in webpage. But if you want to display the specified extension like png, jpg etc.
Now using following way to display the content in php

Method 1: Using foreach

';
}
?>

Display all the png image from “team_member_image” directory. We can use all extension file. We just replace the png with our extension like jpg,pdf etc.

Method2:Using for loop

'."  ";
	}
?>

Display all the png image from “team_member_image” directory

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.