Featured
-
How Regression Testing Detects Integral Errors In Business Processes
Humans are forever changing and evolving and so to
by kristina.rigina -
Get Display Banner Advertising Opportunity on FindNerd Platform
“Do you have a product or service that nee
by manoj.rawat -
Android O Released with Top 7 New Features for App Developers
Android was founded by Andy Rubin, Rich Miner, Nic
by sudhanshu.tripathi -
Top 5 Features That Make Laravel the Best PHP Framework for Development
Laravel is a free open source Web Framework of PHP
by abhishek.tiwari.458 -
Objective C or Swift - Which Technology to Learn for iOS Development?
Swift programming language is completely based on
by siddharth.sindhi
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 Pager
Bootstrap Pager
In case of multiple pages in bootstrap,we can also create previous and next links for effective pagination. This is used when the number of pages are less in quantity. It is great and effective for simple sites blogs or magazin...
Bootstrap pagination
Bootstrap pagination
In case of multiple pages in bootstrap,we can also number them making our presentation more efficient.This can be done through pagination.These large blocks is hard to miss,easily scalable and provides large click areas.
...
Javascript Carousel
Javascript Carousel
In javascript you can create a slideshow with the help of carousel.So multiple slides can be created making our presentation more attractive and user-friendly.
<div id="carousel-example-generic" class="carousel sli...
Javascript toggle
Javascript toggle
In javascript you can create toggle behaviour wit the help of flexible plugin that utilizes a handful of classes.
The class collapse hides the content,class collapsing is applied during transitions and class collapse.in show...
Progress bars in Bootstrap
Progress bars in Bootstrap.
Bootstrap helps in providing up-to-date feedback on the progress of a workflow or action.This can be done by using progress bars.You can also add label to the progress bar thus making it more user-friendly.
<d...
Links in alerts
Links in alerts.
In bootstrap we can also create matching colored links along with the alert messages.Through this you can add a link whenever contextual message pop's up under specified action.This can be done by adding alert-link class.
&...
Bootstrap Alerts
Bootstrap Alerts.
Bootstrap provides a medium to print contextual feedback messages for typical user actions with the handful of available and flexible alert messages.These alert messages pop-up under specified user action which can be manipul...
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>...
How CSS triangles work?
Hello folks,
How css triangle works ? actually when we create css triangle, its means we are just showing and hiding borders of any element.
The angle intersects at (45) so the intersection edge is used by border here and we can also skew a...
Disable text selection highlighting using css
Hi all,
Below is an example, How to disable the text selection and copy text.
Controls the actual Selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes.
CSS :-
.noselect {
-webkit-tou...
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 loader using pure css
Hi All,
Below is some example of pure css loader. Using css animation. All are single element loader.
Please, check the below code for details.
section{
margin: 10px 0;
}
.loader {
position: absolute;
z-index: 1;
left: 0;
...
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...
Websites speed optimization process.
Following are some steps to increase page loading speed:
Step 1: HTML Design
Use Div based html design for your website. Table based design will take more loading time as compare to div based design.
Step 2: Use External JavaScript and ...
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 css preprocessor ?
CSS pre-processors have really started to gain in popularity in the last several years. It have been around for a while now. We need a compiler to compile that. It means we can't render directly to pre-processors file (scss ,less, styls). In simp...
How to change page background on the day time basis using Javascript
Hello Reader's! If you want to change your web background image automatic on the day time basis, i.e. for day it will show pic 1 and in night it will show pic 2 as background.
Lets see the full example below:-
</bo...
How to print current date in html div using Javascript
Hello Reader's If you want to show current date in a html div, Then you can genrate it in JS then show back to html. Here is the example below:-
<div id="Console"></div>
Now the script will go like this:-
window.onload = fu...
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...
How to download an image automatically using Javascript
Hello Reader's!
If you want to make your file download by execution of JS then you can use the code below:-
var a = document.createElement('a');
a.href = "/favicon.png"; //make the link of image
a.download = "favicon.png";
document.body.ap...
How to show selected words in alert box using Javascript
Hello Reader's!
If you want to show what the text user has selected in a alert box, Then by using Javascript you can perform this task very quickly.
Step1:-
<div>Some test text for you to select</div>
Make a div that show...
How to remove header and footer in print
When we print some html page bydefault the header and footer comes. On different browsers its in different way.
To remove it from chrome use
@page{
size: A4;
margin: 5mm; /* this affects the margin in the printer settings *...
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...
How to parse and process HTML in PHP?
Hello Readers!
If you want to parse any HTML page then you would you "Simple HTML DOM Parser".
How to get HTML elements:
Create DOM from URL or file
$html = file_get_html('http://www.example.com/');
Find all images
foreach($ht...
How to select option of drop down with Jquery?
Sometimes we need select option of a drop-down dynamically by clicking on a button or on some other action. We can do this by using "selected" property.
Example- In the below example I have a drop-down for distance and I want to select option ...
How to appned li elements to ul dynamically with jQuery?
Sometimes we need to add li elements to ul dynamically based on some list. We can do this by using append() method.
Example- In the below example I have a list "users" and I want to display user names dynamically on page.
<html>
...
How to show div after some time period with jQuery?
Sometimes we need to display some alert or dive after some period on Web page.
We can do this by using setTimeout method as below:
<html>
<head>
<title>Demo to show div</title>
<script type="...
How to hide a message after some time interval with jQuery?
Whenever we submit a form or do some task, we usually display a success message, but sometimes it is required to hide this message automatically after some time period.
We can do this by two ways:
By using setTimeout method:
...
Drag and drop using Javascript
If you want to drag your element from one point to another, here is the code below using Javascript:
HTML:
<div id="dragElement">Drag me!</div>
CSS:
#dragElement {
width:100px;
height:100px;
background-color:#66...
What is image sprite and its uses in CSS?
CSS image sprite is a single image like a image-sheet with all
the images needed for your website.
Image sprites is having all the
images needed at one place in a
single image to it makes the browser
work easy while the browser try to
...
How to create a basic plugin using jquery
If you want to make a functionality that can be used anywhere in the code. For example, you want some method that can be called on the jquery selection and it can perform number of operations on the selection. For this, you can write a plugin.
...
How to check if cookie is enable or not
Hi. If you are looking for code to alert user if his cookies are enable or not, Then look the code as below:-
paste the code in you file
<?php
if (isset($_COOKIE['cookieCheck'])) {
echo 'Your cookie is Enable';
} else {
if ...
How to make blur overlay effect using CSS
Hello Reader's, If you have to make the beautiful overlay of blur effect of image on the screen then you can learn it from the code below.
This is done by using CSS 3
Put the css as
#myDiv {
width:280px;
height:200px;
...
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 make HTML by using the Json Array
Hello Reader's
If you having the data coming from the Json array and you need it to show in html table. Then you can perform the short Jquery action for making it automated restful service.
Here the code of javascript
var _table_ = docum...
How to make the navbar tab active on click?
To make the clicked tab active in the navigation bar, the <li> corresponding to the clicked href in index.html introduces the css of 'active' class and removes the 'active' class from the previous <li> on click.
Example:
index....
What is the best place to load JS in html
Hello Reader's!, If you need to know which is the best place for putting the JS.
You can put the js functions in the head part. But it'll be a good habit to put all of your functions in a separate file. You can also call for the external script...
