Featured
-
Creating Horizontal Menu Bar Using Html and CSS
Hello readers, If you want to create a horizonta
by nitish.rawat -
Custom checkbox using jquery
Hello Reader ! Here is an example how to make
by mukul.kant -
How to make Sticky navigation
Hello Readers ! Below is an example of sticky n
by mukul.kant -
Smoke Font Animation
Hello Friends, The following codes below is an an
by kushal.kant -
How to Make A Simple DropDown in HTML With The Help of Jquery and CSS
You Can Use Below Code to Make A Simple Drop D
by indresh.kumar
Tags
What is progress Element in HTML5 ?
The <progress> Element is use to show the completeness of the task. We can use script to manipulate the value of progress bar.
This tag is new in HTML5 and progress element have start tag (<progress>) and end tag (</progress>...
Images shapes
Images shapes.
In bootstrap,we can modify shape of image just by adding pre-defined classes as img-rounded,img-circle,img-thumbnail.It saves a lot of time of developer as prevents them from long and confusing coding for creating different shap...
Static Contol
Static Control.
When we need to insert an plane text in front of form label we can do this by adding a class .form-control static class.Thus bootstrap provides an predefined class for inserting an plane text thus making it more effecient for ...
Checkboxes and radios
Checkboxes and radios.
In bootstrap we can add features of multiple selection from group of choices with the help of checkboxes while for selecting one option out of many we use radios.It also provides an option of disabled checkboxes and radi...
Star rating using pure css
Hi all,
Below is an example, how to make star rating using pure css.
CSS -
.rate {
float: left;
}
.rate:not(:checked) > input {
position:absolute;
top:-9999px;
}
.rate:not(:checked) > label {
float:right;
...
Horizontal form
Horizontal form.
Bootstrap provide us the feature to align labels and groups of form controls,we can do so by adding .form-horizonal class to the form.Required customization can be done by little effort making it more user friendly and time sa...
Contextual classes
Contextual classes
In bootstrap we can create color table rows and cells with the help of contextual classes such as active,success,info,warning,danger.
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success...
Creating Modals with Bootstrap
Please follow below code to create modules or popup with bootstrap help.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"&...
Media queries
Media queries
In bootstrap we can create responsive site which can run on desktop as well as mobile.Thus breakpoints can be defined by using media queries whose attributes can be changed under specified conditions.
<!-- Stack the colum...
What is input pattern ?
The pattern value is use in input box which tells the user, In which pattern value will store in database. If the value is according to pattern then data will store otherwise it will shows an error.
Its works with following input types:-
t...
Bootstrap badges(active nav states)
Bootstrap badges(active nav states)
Bootstrap provides built-in styles which can be included in bootstrap navs or more for placing badges in active states in pill navigations.
<ul class="nav nav-pills" role="tablist">
<li role="...
Bootstrap badges
Bootstrap badges.
Badges can be easily created by adding a predefined class badge to links of nav bar in Bootstrap.You can customize it further according to your requirement.
<a href="#">Inbox <span class="badge">42</span>...
Bootstrap Buttons
Bootstrap Buttons
Bootstrap provides button classes to quickly create a styled button.So you can design any type of buttons with little effort and customization.
<!-- Standard button -->
<button type="button" class="btn btn-defaul...
Pre vs. Code
<code> use for inline code it can wrap and <pre> for block code that must not wrap so, new lines and spaces get rendered as new lines..
It is little mystified by the <pre> and <code> tags. If youre not sure which to use...
Bootstrap Form
Bootstrap Form
Bootstrap provides a predefined form which can be customized according to your requirement.You can design any form with little effort and customization.It helps in saving lots of time and prevents developer from confusion.
&l...
Navbar
Bootstrap Navbar
Bootstrap provides an pre-defined navbar which can be customized according to your requirement.Predefined classes are present which helps in saving lots of time and prevent us from confusion,makes it more user friendly.With li...
What is the diffrent between table and div ?
Different between *table* and *div*
What is div ?
The DIV element can be called a block element. It can also be called a layer. Its use involves dividing a page into a logical section. One of its many advantages is the ability to hold what...
Custom select box
Hello Friends,
If you are looking to create a custom select box, you can use below HTML and CSS code I have provided.
Below an example of custom select box.
HTML -
<div class="wrapper">
<input id="textfield" type="te...
One Page Responsive Template
Mobile Responsive Email Template Using HTML
The tutorial explains how to build an Advanced email template that works in every email client, including outlook and smartphone apps. To acquire maximum compatibility it goes with minimal media querie...
Multiple Style Sheets
When Style sheets are effectively merged into a single style sheet in the order in which they appear in the HTML source is said to be Multiple style sheets.If some properties have been defined for the same element in different style sheets, tha...
How to get size of a file using HTML 5
Hello Reader's! If you are looking for an HTML 5 validation which tell user the size of an file the code will help you:-
In HTML fileL
<input type="file" id="file" />
In the JS file
//binds to onchange event of your input fiel...
How to use iframe to open a website in it
You can use a perticlualr custom window on your website to open another website, Iframe gives you this feature to do. You can see the example below :-
<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.fin...
Diffrence between ' and "
Both the ' and " are same and does same function but it's just the coding standard followed by coders
Using double quotes for HTML
i.e.
<div class="colorFont"></div>
Using single quotes for JavaScript
i.e.
$('#cont...
How to make image download with a link
Hello Reader! if you want to link up your images to make it download with just a click then you can use the code below
<a href="/local/project/image.jpg" download="myimage.jpg"><img src="/ocal/project/image.jpg" /></a>
T...
Correct way to write disabled textbox
Hello Reader!
If you got confuse to write the correct syntax of writing the disabled text box then you can use these types of code as below:-
<input type="text" disabled />
<input type="text" disabled="" />
<input type="text"...
how to print the HTML code in PHP
If you want to print the html tags and code inside the PHP code you can do it by putting all the html code inside the echo syntax:-
Consider the following two cases:-
1. In between PHP tags
<?php if(condition){ ?> //In this case th...
What is meant by Doctype
The DOCTYPE specify the user's web browser and the search engines that what type of document is written.
One final thought is that the new HTML5 standard proposes using a very simple DOCTYPE:
<!DOCTYPE html>
Always add the &l...
How to make multiple submit button in a form
Hello Reader if you need two or more submit button in a single html form then you learn from the code below:-
For the form the html will go like this:-
<input type="submit" name="submit_button" value="Submit" />
<input type="subm...
How to scale and strech the image in a fix size?
If you have a fixed div and you want the image to be put over it by stretch and scaling then you can use the following code for html and css:-
In the html page add class 'background' and 'stretch'
<div id="background">
<img sr...
How to install wordpress using Softaculous
Hello reader!
Installing WordPress is a bit of lengthy task for a beginner but in this blog you can learn installing the WordPress using a application from you cpanel. There is a application names 'Softaculous automatic app installer' and using...
Animating Placeholder
Making Animated Placeholder
To make a Placeholder animation we need to make custom placeholder, for this I have used span tag.
HTML -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">...
CSS document for printing
Hello everyone,
Lots of web pages have a print-friendly version and many of them don't. I realize that there's no need because you can set up a second CSS document to be called up when a user prints the page.
So, basically we need two css i...
How to set space in table row ?
HI all,
We can't add the margin between row in table but we can add space using an alternative method.
for this you have to add some property in your style.
table {
border-spacing: 0 5px ;
border-collapse: separate...
How To Create a Modal in Bootstrap
With the help of Bootstrap we can create a Modal plugin. In the example given below , I am using attributes data-toggle=model ( which is used to open the model window ) and data- target=#Model (which points to the id of the target model ). ...
HTML5 Datalist Element
Hi all,
Datalist is a new element in HTML5 and very useful. Basically it works with input box and when we write text in it, it will show a related item in list like option box.
Example :-
<label>Select your preferred code editor:&...
What is CSS attribute selectors ?
HI all,
CSS attribute selectors is a great way to manipulate your style may be you have used this before but it really awesome and I am sure using it you can make more easy your style.
Lets understand this with below example -
I have a s...
Progress bar
A Progress bar indicates the current percentage for completeness of an operation or process.
jQueryUI provides an easy-to-use progress bar widget that we can use to let users know the percent of completeness of an operation. jQueryUI provides...
How to make custom attribute in Html5 ?
Hi all,
You can make your own custom attribute using data-. It allows possessive exchanged information between HTML and its DOM representation. It can work with javascript also, every browser will let you fetch and modify data- attributes usin...
How to centralize div horizontally and vertically ?
Hi all,
Here are two method to center align a position of div.
div{
height: 200px;
width: 200px;
background: #ccc;
top:0;
bottom: 0;
left:0;
right: 0;
margin: auto;
position: absolute;
}
In...
How to remove a HTML element using Jquery
Hello reader's,
Below is the example to Remove the HTML element using Jquery
If you having trouble with such issues, then use the below code.
Here is the HTML
<p>Write your text here.</p>
<p>Write your text here.<...
How to Create Cross-Browser Custom Upload Button with Jquery
Hello Reader's
In this article I will guide you to create Cross-Browser Custom Upload Button With JQuery
If you facing any problem for upload button use this code.
Here is the HTML
<div class="Container">
<label>Upl...
Simple Parallax Effect with smooth scrolling Jquery
Hello reader's,
Below is the example for Simple Parallax Effect with smooth scrolling Jquery
If you having trouble with such issues, the use the below code.
Here is the HTML of Scroll trigger
<div class="carousel-indicators">
...
Add or Remove Class by Using Jquery
Hello Guys
The below example will guide you to add or remove class by using jquery.
So if you are stuck in such case follow the below code.
Here is the HTML Code
<nav>
<ul>
<li><a href="javascript:v...
How to show any video from Youtube to your website customized
Hi,
You want to show any video from youtube to be shown in you website, read my following steps
There are several other customization features that you can do with video ,i.e.(set Height or width, set youtube logo, Show suggested videos when t...
custom checkbox and radio button using pure css
Hi all,
Here is an example of custom radio button and check box using pure css.
I hope it will helps you.
CSS :-
**/*Radio button*/
.radio, .checkbox{display: inline-block;}
.radio { padding:5px; margin-left:40px; }
.radio input[ty...
How to Integrate Skype with Webpage ?
Hello Readers,
Here I am mentioning steps to integrate Skype with a webpage.
Hope it will help you somewhere.
To generate code for Skype buttons, use URL
http://www.skype.com/en/features/skype-buttons/create-skype-buttons/
You will get t...
Fonts sizes
Hello Readers
In this article I will guide you about the font size diffidence pixels, points, ems & %.
Here is a flow chart below in which I have mention the difference between pixels, points, ems & %. these font sizes are not actual.
...
Bootstrap versus Foundation
*{margin:0;padding: 0;}
.mdUP table{border-collapse: collapse;width: 100%;margin:10px 0;}
.mdUP table thead{background: #ccc;}
.mdUP table th, .mdUP table td{padding: 5px;text-align:center;border:1px solid #ccc;}
...
Guide to Flexbox
pre{padding:4px;margin:5px 0;border-radius:0;color:#fff;background:#333;border:none;}
Introduction :
The flexible box called as flexbox is an powerful idea to give the container ability to alter their items
You can adjust child eleme...
stylish check box using pure css
Hi all,
Below is an example of custom check box, using pure css here is no any script.
You can use this example many type, like to select some image or theme. I hope it will helps you somewhere.
HTML:-
<div class="wrap">
...
