Monthly Archives: August 2016

Difference between vh/vw and % – CSS

Here I just share new and uncommon CSS unit to web application. CSS3 introduce new CSS units. We are familure with px,%,rem and em. But we discuss new units like vh and vh.
To fit the design in view port developed by javascript. But solving this problem, in css we simply add width and height with vw and vh respectively.

Units and Description

Units	Description
vw	Relative to 1% of the width of the browser window size. It is relative to viewport width.
vh	Relative to 1% of the height of the browser window size. It is relative to viewport height.

In vh and vw first check the size of the viewport, then resize any elements on the page accordingly. If the user resizes the browser then the script runs again to resize the elements on the page.

100% can be 100% of the height of anything. For example, if I have a parent div that’s 1000px tall, and a child div that is at 100% height, then that child div could theoretically be much taller than the height of the viewport, or much smaller than the height of the viewport, even though that div is set at 100% height.

If I instead make that child div set at 100vh, then it’ll only fill up 100% of the height of the viewport, and not necessarily the parent div

Simple Example



    
        100% height
        (parent is 280px)
    



    100vh height

SUMMARY: The vw/vh, we can size elements to be relative to the size of the viewport.
Happy Coding

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

Pure CSS One Page Scroll Effect/Pure CSS one page vertical navigation

Hi all,
The smooth and fullscreen one page scroll effect for your single page is very attractive web application in HTML and CSS. There we use pure CSS and HTML. No need to apply javascript or jquery files.
Table Of Content
Pure HTML
Pure CSS
HTML
The HTML helps to specify the page content for website. It’s very important part in website.

CSS

The CSS helps to styling HTML page.

.main_div {
  width: 100vw;
  height: 100vh;
  background: red;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.main_div form {
  box-sizing: border-box;
  text-align: center;
  padding: 22px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.main_div form input {
  height: 0;
  margin: 12px 0;
  z-index: 1;
}

.main_div form input:checked {
  outline: 0;
  border: 0;
}

.main_div form input:before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.81);
  border-radius: 11px;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.main_div form input:checked:before { background-color: white; }

.main_div form input:after {
  content: "" attr(title) "";
  position: relative;
  left: 30px;
  opacity: 0;
  color: white;
  font-size: 9px;
  display: block;
  min-width: 80px;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.main_div form input:checked:after {
  opacity: 1;
  left: 20px;
}
.main_div form input:hover:after:not(label) {
 opacity: 1;
}

.main_div form input:nth-of-type(1):checked ~ .labels label {
  -webkit-transform: translateY(-0%);
  transform: translateY(-0%);
}

.main_div form input:nth-of-type(2):checked ~ .labels label {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.main_div form input:nth-of-type(3):checked ~ .labels label {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
}

.main_div form input:nth-of-type(4):checked ~ .labels label {
  -webkit-transform: translateY(-300%);
  transform: translateY(-300%);
}

.main_div form input:nth-of-type(5):checked ~ .labels label {
  -webkit-transform: translateY(-400%);
  transform: translateY(-400%);
}

.main_div form input:nth-of-type(6):checked ~ .labels label {
  -webkit-transform: translateY(-500%);
  transform: translateY(-500%);
}

.main_div form input:nth-of-type(7):checked ~ .labels label {
  -webkit-transform: translateY(-600%);
  transform: translateY(-600%);
}

.main_div form .labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.main_div form .labels label {
  min-width: 100vw;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #2B2B38;
  z-index: 0;
  -webkit-transition: all 0.75s cubic-bezier(0.75, 0.25, 0, 1.05);
  transition: all 0.75s cubic-bezier(0.75, 0.25, 0, 1.05);
}

.main_div form .labels label:nth-child(odd) {
  background-color: #F5004F;
  color: white !important;
}

Full Code

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

Disabling browser print options (headers, footers, margins) from page

For printing page using window.print(). But in print screen the header and footer are available. Here I discuss one useful information related to this problem.
we can easy to remove html header and footer page. But remove PDF headers and footers is very dificult task in HTML. Solve this problem with pure CSS in HTML no need JavaScript or jquery.

Full Code



	printing
	



	Testing For print Screeen in HTML

Print

Note:“@page” directive will improve and you will be able to use the pure CSS solution in all browsers.

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

Responsive HTML5 Canvas Background Image | A Pure CSS Solution

Hi all,
The responsive HTML canvas background is very important in web application. Sometimes it’s very difficult task to achieve this problem. First we simply need to define height and width of #canvas_image in order for the background-image.

Table of Content

The CSS
The HTML

The HTML

We will use the CSS background-size property to make it happen. There is no JavaScript needed for develope this applications.

The CSS

The background-size:contain; helps to scale the image to the largest size with width and height can fit inside the content area.
And also specify the height and width of canvas.

#canvas_image { background-image:url('http://prittytimes.com/wp-content/uploads/2016/03/Indipendant-Travel1.jpg'); background-repeat:no-repeat; background-size:contain; height: 100%; width: 100%; background-position:center;

}

Property Values

Value	Description
auto	It’s default value. The background-image contains its height and width.
inherit	Inherits this property from its parent element
length	Sets the height and width of the background image
initial	Sets this property to its default value
contain	Scale the image to the largest size such that both its width and its height can fit inside the content area
cover	Scale the background image to be as large as possible so that the background area is completely covered by the background image.

Full Code

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

Difference Between MySQL vs MySQLi in PHP

Hi all,
There are too many differences between these MYSQL and MYSQLi PHP database extensions. These differences are based upon some factors like features, performance, benefits, library functions and others. The “i” in mysqli stands for “improved”. The “mysqli” extension is an improvement over the old “mysql” extension.

MYSQLi	MYSQL
MySQLi extension added in PHP 5.5	MySQL extension added in PHP version 2.0
Extension directory: ext/mysqli.	Extension directory: ext/mysql
The MySQLi supports prepared statements.	The MYSQL does not support prepared statements.
MySQLi supports transactions through API.	Transactions are handled by SQL queries only.
MySQLi provides both object oriented and procedural interface.	MySQL provides procedural interface.
MySQLi extension is with enhanced security and improved debugging.	MySQL extension lags in security and other special features, comparatively.
MySQL provides procedural interface.	MySQLi provides both object oriented and procedural interface.
MySQLi supports store procedure.	MySQL extension does not support stored procedure.
mysqli_connect($host_name,$user_name,$passwd,$dbname)	mysql_connect($host_name,$user_name,$passwd) followed by mysql_select_db($dbname)

The Relational Database Management System(RDMS) is MySQL. That means, the database management system based on relational model. MySQLi Extension (or simply known as MySQL Improved or MySQLi) is a relational database driver that is used mainly in the PHP programming language. MySQL is an RDBMS that runs as a server and provides multi-user access to multiple databases; MySQLi is an extension of MySQL. MySQL is the very popular open-source relational database management system

The PHP functions for use with MySQL 5.0 have the following general format described below. The i in the function name stands for improved (MySQL Improved).

mysqli_function(value,value,...);

Two of the mysqli functions:

mysqli_connect(connection information); mysqli_query($con,"SQL statement");

The corresponding mysql functions are:
mysql_connect(connection information); mysql_query("SQL statement",$con);

The connection process for mysql functions requires two function calls:

mysql_connect($host_name,$user_name,$password); mysql_select_db($dbname);

mysqli Function	mysql Function
mysqli_real_escape_string($conn,$data)	mysql_real_escape_string($data)
mysqli_errno($con)	mysql_errno() or mysql_errno($cxn)
mysqli_select_db($con,$dbname)	mysql_select_db($dbname)
mysqli_error($con)	mysql_error() or mysql_error($con)
mysqli_query($con,$sql)	mysql_query($sql) or mysql_query($sql,$con)
mysqli_fetch_array($result)	mysql_fetch_array($result)
mysqli_num_rows($result)	mysql_num_rows($result)
mysqli_fetch_assoc($result)	mysql_fetch_assoc($result)
mysqli_fetch_row($result)	mysql_fetch_row($result)
mysqli_insert_id($con)	mysql_insert_id($con)

Key benefits of mysqli over mysql extension

Object-oriented interface
Dual object-oriented (OO) and procedural interfaces
Multiple Statements
Support for Prepared Statements
Support for Transactions
Enhanced debugging capabilities
Embedded server support

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

How to Add Featured Images or Post Thumbnails in WordPress

Hi all,
Today we discuss one useful topic related to Featured image in wordpress. In wordpress featured image also known as Post Thumbnails. Today most wordpress theme support post thumbnails. Church themes, Restaurant themes, WordPress photography themes and other types of themes have built-in support for post thumbnails. In this article we discuss How to add featured images or post thumbnails in wordpress.

Most wordpress theme support featured image default. In blog add featured image in each post it looks very attractive and can catch information very easy.

Theme Developers Guide to Featured Image and Post Thumbnails in WordPress

To add featured image in wordpress post we simply click on “Set Featured Image” link inside the featured image meta box shown in the screenshot above.
But we don’t know how to visible this featured image in wordpress theme. First we move to how to add featured image in wordpress theme.

To add featured image support in a WordPress theme, you need to add this line of code in your theme’s functions.php file:

add_theme_support( 'post-thumbnails' );

This code will enable featured image support for posts and pages. You can now go to posts or pages, and you will see featured image option enabled.

Adding Post Thumbnail or Featured Image in WordPress

To add featured image in wordpress post we simply click on “Set Featured Image” link inside the featured image meta box shown in the screen shot above. After clicking “set featured image ” it will open the wordpress media uploader.

This will open the WordPress Media Uploader. You can use that to upload an image from your computer or use an existing image from your media library. Once you select the image, simply click on Set Featured Image button.

The image will appear in the Featured Image meta box, like this:

To display featured images in your theme, you need to edit your templates and add this line of code where you want to display the featured image

To set image size for featured images you upload, you need to add this line of code to your functions.php file.

set_post_thumbnail_size( 50, 50);

You can also set additional image sizes to use with the_post_thumbnail() function. For example:

add_image_size( 'single-post-thumbnail', 590, 180 );

There are two functions in WordPress to get post’s featured image.

the_post_thumbnail() – It will display featured image.
get_the_post_thumbnail() – It will return a string containing the HTML code of the featured image.

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

PHP AJAX Image Upload

Hi all,
In this article shows how to upload an image file using PHP and AJAX. In here, we are sending form data to PHP script using ajax(). First we upload the image through PHP form and return success message as AJAX response.

Table Of Content

The HTML
Ajax
Stylesheet/CSS

The HTML

HTML part is very important part in web development. The <input> tag is specified in HTML part.
For upload image we specify the type=”file” in input tag like: <input type=”file” name=”user_Image” />


	
		No Image
		
			Upload Image File:

AJAX

Stylesheet/ CSS


.div_bgColor {
width: 440px;
height:100px;
background-color: #F9D735;
}
.div_bgColor label{
font-weight: bold;
color: #A0A0A0;
}
#image_preview{
float:left;
width:100px;
height:100px;
text-align:center;
line-height:100px;
font-weight: bold;
color: #C0C0C0;
background-color: #F0E8E0;
overflow:auto;
}
#image_preview_layer{
float:right;
padding: 10px;
}
.btn_submit {
background-color: #3FA849;
padding:4px;
border: #3FA849 1px solid;
color: #FFFFFF;
}
.input_data {
padding: 3px;
background-color: #FFFFFF;
}

upload_image.php

Full Code



PHP AJAX Image Upload






	
		No Image
		
			Upload Image File:

OUTPUT

After uploading image via AJAX, we are loading the image to the target layer in the left side of the above form. So the output will be:

Happy Coding

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

Qualities of a Good Landing Page

Hi all,
Today we discuss one useful topic related to Landing Page. That means, What does a landing page mean for your business?
This is very important in our day to day business development. This is very popular questions in business world. Business spend mostly their time capturing leads and seek ways to derive traffic to their websites that yield results. All of you know what is landing pages. But first I move to What is landing page?.

What is Landing Page?

Landing pages are standalone web pages designed to spur a specific audience to take a specific action. Landing pages are basic building blocks that form a massive part of your marketing strategy. Well optimized, highly targeted landing pages, entice visitors to stay and complete the desired action for conversion.

Key properties of a Quality Landing Page.

The Headline: Heading is important factor in web development. This is most important parts in web development. Mainly the heading shows who you are, what you are selling
The Sub-headline: The sub headers should reinforce to your main headline and persuade visitors to continue viewing the page. The sub-heading shows what you are selling and why it’s relevant.
Body Copy: In here, it is important to show how you can provide them value.
Impressions Matter: The content are based on user needs and requirements. In heading and subheading shows: what you are and what you are selling. The contents are based on these matter. Brefly we can say that the contents and heading are depend to each other. The contents related to heading and sub-headings.
Call to Action (CTA): CTA is the most important element of all. The call to action (CTA) is what you want visitors to do. Its like: Call Now, Click Here to Learn More, or Sign Up.

Images:Good landing pages have good images.
Make Your design simple and clean
Mobile Accessibility:An increasing number of people are using their mobile devices to connect to the Internet and access landing pages. Develope website or landing page with responsiveness because all are using different device with different resolution. Responsive landing pages can view in all device with same resolution.

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

Monthly Archives: August 2016

Difference between vh/vw and % – CSS

Units and Description

Simple Example

Pure CSS One Page Scroll Effect/Pure CSS one page vertical navigation

Section 1

Section 2

Section 3

Section 4

Section 5

Section 1

Section 2

Section 3

Section 4

Section 5

Disabling browser print options (headers, footers, margins) from page

Full Code

Responsive HTML5 Canvas Background Image | A Pure CSS Solution

Table of Content

The HTML

The CSS

Property Values

Full Code

Difference Between MySQL vs MySQLi in PHP

Key benefits of mysqli over mysql extension

How to Add Featured Images or Post Thumbnails in WordPress

Theme Developers Guide to Featured Image and Post Thumbnails in WordPress

Adding Post Thumbnail or Featured Image in WordPress

PHP AJAX Image Upload

Table Of Content

The HTML

AJAX

Stylesheet/ CSS

upload_image.php

Full Code

OUTPUT

Qualities of a Good Landing Page

What is Landing Page?

Key properties of a Quality Landing Page.