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
Evon Logo Using CSS
Hello readers !
Here is an example of css3 by using these codes you can make any logo. There is no use of any image. For example I used the same code to make Evon Logo. If you want to use the same code for creating other logo you have to do so...
Create shapes using css
Hello readers!
In this blog we will discuss how to make shapes using css only. to make any shape we have to know mainly about 2 pseudo Elements.
::before :- We can use this element to insert some content before an element.
::after :- W...
What is meta tag and there uses.
p {padding-left:3px;font-style:italic !important}
Hello Readers,
Usually we all uses the meta tags, but don't know properly what are these, their actual uses & their importance? So here I will explain you about meta tags and i hop...
How to Create Accordion
Hello All,
If you want to make an accordion, this code will help you to make a dynamic accordion using HTML, CSS and Jquery.
An accordion is a stacked list of items. Each item can be "expanded" or "stretched" to reveal the content associated...
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...
Custom checkbox using jquery
Hello Reader !
Here is an example how to make a custom check box using simple script and css.
Script
$(document).ready(function(){
$('label').click(function(){
$(this).toggleClass('checkedN');
});
});
css
.checkedN {ba...
How to make Sticky navigation
Hello Readers !
Below is an example of sticky navigation with simple script which is compatible with internet explorer.
You can use this script for sticky header or sticky footer.
I hope it will be helpful for you.
Script:-
$(docume...
Example of Parallax Scrolling
Hello Readers !
Here is an example of parallax scrolling with simple script and it is also compatible with internet explorer.
Parallax Scrolling :-
The parallax scrolling web design is in trend, Its shows the background moving at a slow...
Example of parallax
Hello Readers !
Here is an example of parallax with simple script and it is also compatible with internet explorer.
Script :-
<script type="text/javascript">
$(document).ready(function() {
$(window).bind('scroll',funct...
Make a div align center using jquery
Hello Readers !
Here is an example, how to make a div always center align using jquery. You can do this using css but this method will work with positions (absolute, fixed etc) and it is also compatible with internet explorer.
<script>...
Smoke Font Animation
Hello Friends,
The following codes below is an animation effect of css3 by implementing this code the fonts will comes in smoke style.
HTML
<h1><span>C</span><span>S</span><span>S</span><span&g...
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')...
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 Down In HTML With The Help Of Jquery And CSS
***Jquery***
<script>
$(function(){
$('.DropDown > ul > li').on('click', function(){
$('.DropDown ul ul').slideUp();
...
How to create a Sticky Menu bar with CSS and Jquery
In this example, we will create a simple webpage that consists of the header, the navigation and the content.
<div class="wrapper">
<div class="header">
Header
</div>
<div class="nav">
...
Fade-in effect using CSS3 @keyframes Rule
With CSS3 @keyframes rules, we can make a fade-in effect for any HTML element we want. In following code, we are just changing the opacity of an element on two different @keyframes states. We can increase the fade-in time by animation-duration pr...
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...
Enhancing HTML Content by Pseudo Elements
Pseudo Elements play important role while designing some web based stuff. With pseudo elements we can add content after or before any element in our web page.
Below is very simple demonstration.
<h1>Use of Before</h1>
<h2>U...
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...
How to Create a Responsive newsletter ?
Hello Users,
In the today world you can crate a responsive newsletter with help fo simple CSS.
You just follow 3 steps:-
1:- No Fixed Width
Generally we create f wrapper for a frame with fixed width. In this we can not use any fixed ...
Autocomplete using Jquery.
Below is the code for autocomplete using Jquery .
> <head> <meta charset="utf-8">
> <title>Autocomplete using
> jQuery</title> <link rel="stylesheet"
Contains style classes for AUTOCOMPLETE
> h...
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...
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.....<...
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 open and close div using css
Hello! readers,
There is an example to show a div on click using only css. You can use it as popup box also.
--css--
.show , .hide{color:#FC6}
#contain {display: none; border:1px solid #999;padding:10px;width:200px;margin-top:10px}
...
Cost of a bug
Suppose you do a typo, a simple spelling mistake in your code. What is the cost of the bug?
If it is caught:
at development environment - 1 min of developer's time
at code review - Reviewer's time and developer's time .
at testing envir...
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...
Image tag error- no image found
There was an error in img tag when no image source found.
I used this below code to resolve this issue, if you are also facing the same issue, please go a head with this code.
<img src="profileimage.png" onerror="this.src='noimage.png'">...
How to Clearing floats
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browse...
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...
Make your Content Editable:
Make your Content Editable:
Contenteditable is nice feature added in HTML5. As the name clarify, it allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like th...
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 normally problem
Hello readers !
In this blog i show how can we solve html problems usually we face that are :-
1) How to align center a absolute position div :
Its a normally problem which we face always we can solve it using this attribute of css
....
Filling Values in a html table dynamically
How to enter values in html table dynamically
Filling Values in a html table dynamically
//Below is the program to create a table structure dynamically.
//Input is taken from the User in 'Radius' TextBox and Unit is selected from 'Sel...
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 = "...
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 make a responsive table using css
In this blog i'll show how can you make responsive table. To make a table responsive first step is to know "nth-of-type" , that is a selector of css3 you can see that in css as i explain it ( In css - line 50 ), now we will make a table
-...
Simple responsive menu using css3
Hello readers !
This blog is about how to make a simple navigation menu .
First of all you need an unorder listing(ul-li) in html page as I have taken in example below.
Now remember you also need an anchor tag after list.
The anchor tag wi...
Basic HTML Document
HTML stands for HyperText Markup Language. Its a type of text document, where text is marked up by using special tags that inform a program that reads the text in how to render the text. Typically that program is a Web Browser such as Internet Ex...
Show default image when image not found
When we show a profile image we get image path from database and show that image as a profile image. But if image not found or image path is not correct then we see a broken image. So we add a conditions there to show a defualt image. But if we u...
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...
How to create simple drop down navigation menu using css3
Hello readers !
This blog is about how to make a simple drop down navigation menu.
First of all you need an unorder listing(ul-li) in html page as I have taken in example below.
After this we come on css.
Here we define all classes with...
cross-site scripting
XSS is a type of attack in computer security mainly found in web applications that enables attackers to run some script in your web browsers. In other words cross-site scripting occurs when an attacker sends a malicious code through a web page in...
Play with AJAX - Liferay
Ajax is one of those patterns that are a must have with a UI framework, so let's go ahead and jump right into doing some Ajax requests, and then we'll dive into the more complex cases.
Let's prep our sandbox, the module we're going to use is c...
Input Button padding in ie 7
.button1 input[type='submit'] {
background:#C30;
padding:6px 30px;
color:#FFF;
font-size:18px;
border:none;
cursor:pointer;
}
<div class="button1">
...
Responsive web design is working on mobile device and Ipad
The Viewport Meta Tag
<meta name="viewport" content="">
Within the content=" " you can enter a load of comma delimited values, but were going to to focus on the fundamental ones for now.
For example, if your mobile design is purp...
