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
HTML5 Brings Future into Technology
HTML5 is the revolution which the web technology needs in today's competitive environment. If we look at the recently launched application in the market then we learn that HTML5 is the future platform for the web application development. Whether ...
what is clearfix?
Hello readers !
Today We will discuss about clearfix
If you have any floating div inside a container and want to clear the floats normally you may are using clear:both class because this is simplest and most common way to solve this. But it...
Web Worker
Introduction
A web worker in html5 is a simple
JavaScript file.
Html5 have an extended functionality
to create thread that continues to
work on there own in the background
without making any compromise in the
performance speed of the...
SVG Shapes
Hello Readers,
Today's topic is how to create a SVG?- Every shapes in SVG are based on coordinates (x and y axis). So if you want to edit ,create and script, you have to know about coordinates.
SVG has pre define shape like,
1) Circle ...
How to use SVG in html
Hello Readers!
In this blog we will discuss about SVG.
Scalable Vector Graphics (SVG)? is a type of image format, which is based on XML. SVG makes a vector graphic quality in such a way that the graphic quality will not become dull if you zo...
Sticky footer using pure css
Hello folks!
The below code is an example of sticky footer using pure CSS. There are other sticky footer methods, which people use but the problem arises that they do not work with all browsers so the method I am providing below will work with...
HTML5 Page Structure
Hello readers!
Here is demo of HTML5 page structure. In this structure we are using semantic elements, so its also called Semantic HTML5 Page Layout.
Semantic Elements :- In many website we see html write like shown below-
<div class...
Useful Short Hand and CSS Rule Set
Hello readers,
Below is some useful example of css rule set and css shorthand. By using css shorthand you can save your time.
CSS rule set-
Rule set for font declaration:-
body {font: italic small-caps normal 13px/150% Arial, Helvetica...
Use of Box Sizing
What is box-sizing ?
Box-sizing is a css3 property. It is used to tell browser that width padding border should include the object according to size, which is define by user.
For example, you have a text area with 100% widt...
css3 animation game
Duck game using pure CSS3
Hello all,
Below is an example of pure CSS3 game using CSS3 animation, pseudo class. This example show efficiency of CSS3.
There is no .gif image used. Find the attachment for complete code below.
*{margin...
CSS Positioning
As I am a fresher to web design, I don't know exactly all the concepts of positioning and their differences. But as much i have studied the CSS Positioning, I can explain it here as far as my knowledge.Positioning is used to get the blocks exactl...
How to make use of corcdoc API
Below is a sample code base to convert PDF files to HTML5 template making use of well known tool Crocdoc :
$_product = $observer->getProduct();
$productid=$_product->getId();
$read = Mage::getSingleton('core/resource')...
Aimated Text shadow by CSS 3
Hello,
Bellow is a animation showing shadow of a text moving relative to the movement of the light.
<!doctype>
<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Anton);
html {
height: 1...
Method eq() in jquery
Description:
The eq ( index ) method reduces the set of matched elements to a single element or we can say that
find the element that matches or equals the index provided.
Syntax:
Here is the simple syntax to use this method:
selector.eq ( i...
How can use Regular Expressions in HTML?
We can use a Regular Expressions width the help of HTML 5. You can use this with "textarea" and "Input" tags.
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text...
Wobble Effect by HTML 5 animation
<!DOCTYPE html>
<html>
<head>
<title>wobble effect</title>
<style>
body {
background-color: tomato;
}
.container {
position: absolute;
top: 40px;
left: 140px;
}
.slices {
position: a...
How to make iframe responsive
Hello reader !
How to make responsive iframe. We all are face this problem normally so there is an example and i hope it will helps you.
CSS :-
.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
paddin...
Creating logo using SVG in HTML 5
Hell Readers,
If you want to create a logo using SVG in HTML 5, it's not a big deal, you can refer below simple example
<!doctype>
<html>
<head>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
...
Creating logo using SVG in HTML 5
<!doctype>
<html>
<head>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Evon_Text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y=...
HTML5 Apps Goes Offline
Offline app capability in HTML5 bought all the power to store data offline .When we talks about offline people ask offline means without internet ? First take the term ONLINE . online and Web are kind of synonyms.
So why the term Offline is gett...
Get current geo location from browser using html5
We can get our current geo location (latitude and Longitude.) from desktop browsers as well using html5 geolocation. We just needs to add script into our html page and it will ask you to share your location. After approve it will return you your ...
Adding tooltip on a div using built-in ellipsis
Here is a way of adding tooltip on a div using built-in ellipsis
$('.mydiv')
.bind('mouseenter', function () {
var $this = $(this);
if (this.offsetWidth < this.scrollWidth && !$this.attr('title'))
$this.at...
How to use transform property of css3
Hello Readers !
In this blog we will discuss about css3 new attribute transform and transition.
Okay let's start :-
Transform : Mainly transform property uses for give small animation or movement of any object.
To use this you have to...
THE BASIC STRUCTURE OF THE PAGE
<html><br>
<head><br>
<title>My Home Page</title><br>
</head><br>
<body><br>
<h1>This is a heading</h1><br>
<p>Document description goes here.....<...
How to inherit the properties and methods of base class to the child class in php
<?php
class data<br>
{<br>
public $firstno;<br>
public $secondno;<br>
public function getData($fno,$sno)<br>
{<br>
$this->firstno=$fno;<br>
$t...
Check file-size using jQuery without uploading file
A simple code snippet for checking the file-size of a file before uploading it. It will not only help to save time but also network resource as we can implement the file check at the initial point only.
The current code allows the user to sel...
CSS3 Pseudo-elements
Hello readers !
In this blog i'll explain what is Pseudo-elements and how can we use it.
What is pseudo-classes ?
- Pseudo-classes are some special classes which are used to for special effect.
You can also use it with css ...
How to use transform-rotate property in CSS3?
<!DOCTYPE html>
<html>
<head><title>css3</title>
<style>
div
{
width:200px;
height:200px;
margin:80px;
background-color:#000000;
/* Rotate div */
transform:rotate(60deg);
-ms-transform:rotate(60deg)...
Web RTC : Strongest Api of HTML5 Part -ii
holla amigos
In my last blog i shared the power of web rtc and the first api getUserMedia of the web Rtc . This article will be focus on the Peer to Peer connection of the Web Rtc.
Let me explain you first what is Peer-to-Peer connection ex...
Introduction to php
<html>
<head>
<title>Example</title>
</head>
<body>
<?php
echo "Hi, I'm a PHP script!";
?>
</body>
</html>
PHP(Hypertext Prepr...
How to create a class and object in php
class rect
{
public $length=0;
public $width=0;
public $area=0;
public function getData()
{
$this->length=10;
$this->width=20;
}
public function area()
{
$this->area = $this->leng...
Document type declaration
Document type declaration ( Or DOCTYPE )
What is Doctype ?
The<!DOCTYPE> is not a HTML tag. It is an instruction to web browser about what version of HTML the page is written in.
In HTML 4.0...
How To Change Input Type File Title In HTML
We are change the input type file title with the help of this script
Like Browse Title Change in to Choice File
use this script for change Title
function browseclick(){
var fileinput = document.getElementById("browse"); // use in...
Track in HTML 5
The track element allows specifying explicit external timed text tracks for media elements. It does not represent anything on its own. Its provide a simple standardized way to add subtitles, captions, screen descriptions and chapters to video and...
HTML Forms - Submit and Reset Button
<html>
<head><title>myForm</title><head>
<body>
<form action = "example.com" method="Post">
First Name:
<input type = "text" name = "firstname" />
Last Name:
<input type = "text" name = "...
Play YouTube videos and other Webview videos in Android.
In android playing videos from web-view is such a mess but now just using a small trick you can play all web videos of the YouTube, Daily-motions, etc.
You just have to add this method in your web-view Activity.
Here is the trick-:
...
Web RTC : Strongest Api of HTML5
HTML 5 is rocking everywhere on the web.The key behind the HTML5 success is the set of powerfull api it provides. These html5 api make a web app server independent in many ways.Such an api or a set of api is webrtc.
Web rtc is most powerfull thi...
How to create a transparent image with CSS?
<!DOCTYPE html>
<html>
<head><title>css3</title>
<style>
div.bg
{
width:500px;
background:#000;
border:2px solid #00ff00;
}
div.transparent-box
{
width:400px;
margin:40px;
backg...
