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
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...
Why does auto attribute not work vertically?
If I'm using margin: 0 auto it will work as horizontally margin auto and vertically 0px.
Now question is if I'm using margin:auto why It is not working vertically.
Note:- No need alternate option, just want a solid reason behind it :)
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...
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...
Display image before upload using javascript/jQuery
This post demonstrates how to display an image prior to uploading it on server.
This demo uses the JavaScript's readAsDataURL method of reader API which will read image as url.
<html>
<head>
<script src="https://a...
Laravel 5.0 Getting Old Values In the form
Many times we need to show our old values in a form after an error or validation stops our form from submitting. Laravel has a very nice way of retaining old values and populating it back into our form.
I myself used it in a drop down, where ...
How to load header and footer using Javascript
Hello Reader's. If you have developed the header and footer of the website separatly then it's very easy to make them render on a webpage. By using the JS you can call them with a single line of code as written below:-
<html>
<head&g...
How to detect if web page is refreshed using Javascript
Hello Reader's! if you need to detect whether the webpage is being refreshed by using Javascript you can do this like the example below:-
function CheckRefresh() {
if(document.cookie.indexOf('mycookie')==-1) {
// cookie doesn't exist, ...
How to detect UTF encoding using PHP
Hello Readers! if you want to find out the type of file encoding using php then the code below will help you:-
//check string strict for encoding out of list of supported encodings
$enc = mb_detect_encoding($str, mb_list_encodings(), tr...
How to get color of image for the background using PHP
Hello Readers! If you are developing the dynamic website in which the image color will be the background color then you can see it doing in PHP :-
<?php
$filename = $_GET['filename'];
$image = imagecreatefromjpeg($filenam...
How to make text url to hyperlink using PHP
Hello Reader!, On printing the url in plain text, they do not appears as hyper linked but using PHP you can perform this.
Let's see the example below that takes a plan url as input and return the hyperlinked url:-
<?
function createHyper...
How to validate a given URL using PHP
Hello reader! If you have a to check the url is correct or not (not giving the status 404), Then you can get all the details of any url by using 'get_headers' in print_r.
Let's see the example below:-0
<?php
stream_context_set_default(
...
Use of '@' in PHP
Hello Reader!, You might have seen people using the '@' in the PHP coding. The operator '@' is used when you don't want to show the error messages even if they occur.
By using '@' the errors will be hidden.
Let's see the two syntax below:-
...
How to find OS version from web browsers using PHP
Hello Reader! If you want to detect the OS version of user though the web browser.
Then you can use the library code below:-
<?php
$OSList = array
(
// Match user agent string with operating systems
'Windows 3.11' => 'Win16',
'Wi...
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 change image onmouseover event
Hello Reader!
If you are looking for a quick onmouseover event that changes the image over another image then you can use the following library code :-
<img src='FirstImage.jpg' width='120' height='70' onmouseover="this.src='SecondImage....
How to show copy, cut and pase action on website
Hello Reader if you looking for any script that makes user a notification whenever he cut, copy of paste data from your website then you can see how it is done below:-
This is the html page
<body>
<h1>jQuery copy, paste and ...
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...
