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
Transparent background using CSS
Hey there!
There are never enough things to do with CSS. We may think of the weirdest stuff, and CSS makes it possible. One such thought that popped into my mind was of transparent background. We have used colors and images as background...
How to horizontally center a div inside a div?
Hi Readers!
We are usually using multiple divs inside a div. For the purpose of increasing interactiveness in the web page, we may want to align the inner divs properly, maybe horizontally or vertically.
Like in the following case :
...
Callback Function in jQuery
Callback Functions:
It is used to prevent executing further code until earlier effects has not executed completely. As we know in jQuery effects takes time to complete and sometime next line code get executed while the earlier effects are stil...
Chapter 1: An Introduction to HTML5
Hello readers,
This is the my first post for html5 tutorial. Here are some basics for HTML's which will help you for the forthcoming post.
HTML5 is the most latest version of HTML. HTML5 is a markup language HTML documents described by ...
How to make animation using css to rotate text
Hello Reader's, If you want to make some animation to enhance the text then in this blog you can learn this.
Animation is the property by virtue of which you can put the motion in any entity.
In this blog we will translate a text inside t...
CSS3 Flexbox
Hi there!
The flexbox layout mode has completely redefined layouts in CSS. It is not just a property but a whole new module.
The CSS3 Flexible Box, or flexbox, arranges the elements on a page such that the...
How to find browser details ?
Jquery have a nice feature to know about browser details. it is deprecated, If the functionality is removed, it will likely be easily accessible using a plugin.
It is safe to use it to determine whether or not to call $(document...
How to get height and width of a html element?
Hello Reader's If you are dealing with JQuery in your website and want to get the height and width of any html element then this blog will very helpful to you.
So lets get started working of getting the height and width of a div .
F...
How to create alert messages using css
Hi there.
In a web page, we get a particular message for a particular action. For example, after completing a form, you receive a success message; on entering a wrong password, you receive a warning/error message etc. Thus, we know alread...
sr-only class in Bootstrap3
Hi there.
We are all familiar with the bootstrap sr-only class.
The name expands to screen readers only.
According to the documentation of Bootstrap, the information which is meant only for the screen readers can be hidden from the layou...
How to make find and replace in page using jQuery?
Hello Readers. If you want to make replacement of words on any webpage then jquery offers you to do this. The benefit of using the Jquery is to run code on real time front end.
So let's get started working on it.
Step 1: Create a si...
Type attribute of script and style ?
Hello Readers,
Probably sometimes you see it when you use internal CSS, internal JS or in link text, and you are not if you are not using this (eg.- type="text/css"), also your script and CSS works.
So why we need this?
In the ...
Unbind() method in jQuery
Unbind() method:
Unbind() method is used to remove events attached to html element while bind() method is used to attach events to selected html elements .
It is mainly used to prevent the events to be executed when needed and when no...
Create accordion menu using JQuery
Hello Readers
Accordion menu is familiar to all of us.
In this kind of menu, each menu item produces a dropdown menu on click. But when we click on another menu item, the dropdown for other menu items would close by themselves. Such a menu...
HTML Embed Multimedia
Many times you have to include music or video into your website. The most effortless approach to add video or sound to your website is to use the HTML tag called <embed>. This label makes the web browser to itself incorporate controls for t...
How to create horizontal wizard using CSS?
Hello Readers!
Online shopping is a very common thing to do nowadays. We all must have tried our hands on it some time. It does save our money, and of course, a lot of time.
Whenever we shop a product, we are made to go through various step...
CSS Counters
CSS Counters:
CSS counters are similar to variable in a programming language. Counter values are incremented by rules define in CSS. Variables are required to manipulate counter value are as follows:
counter-reset - This variable is used...
How to insert an icon in an input type?
Hello Readers!
Many a times, we must have seen a magnifying glass (search icon) in a search type input box. There are many input types in various web pages that have an icon relating to that input type. It makes them look appealing but doing t...
What is favicon?
Favicon was first used in march 1999, when Microsoftft released Internet Explorer 5 that time it was used to make tabs a favorites (bookmarks).
Favicon is a small square 16×16 pixels image, Basically It is used on tab at the web browsers...
Progress bar with Gradient effect using jQuery
Progress Bar :- Progress bars demonstrate the fulfillment rate of an operation or procedure. It can be utilized to demonstrate a client that how far along he/she is in a procedure.
Below is the HTML, CSS and Jquery task, which show...
What is difference between <button> and<input type=“button” /> ?
Hi all,
I want to know what is the difference between <button> and <input type=“button” /> ? and which one I should use.
Use of dir attribute in Html
dir attribute:
It is used to specify the direction of text in Html element content. In Html5 it can be used with any html element. Prior to Html5 it cannot be used with <base>, <br>, <frame>, <frameset>, <hr>, <...
How to create paper curls on hover using css?
Hello Readers!
In this blog post, we are trying something really interactive. Ever seen your notebook pages fold from the corners? Or did you just anytime fold it purposely to return to that page without much searching? Here’s the same t...
Custom Multi Select Box
Customizing a multiple select is a very challenging task. The default layout of the multiple select box looks like this:
To make it a drop-down multiple select box we need to create a custom made multi select box.
Here is the html code:...
How to make a div's height 100% of the browser window?
Hello Readers!
Ever wanted to make a div stretch vertically according to the browser window's height?
One solution that instantly appears into our mind is height:100%. But this doesn't work as desired. The reason being % a relative ...
A Concentric Circle Clock Using JavaScript and Canvas
Hello readers, today in my blog I will discuss about canvas . Using canvas I have created a Concentric circle clock.
The HTML <canvas> element is used to draw graphics on a web page using JavaScript.
It basically u...
Notification Badge using in CSS
Hello Readers
Notification Badge is the most important part of the webpage. You have probably seen notification badges somewhere, such as on Ecommerce sites, and Social Media Sites like: Facebook, twitter, LinkedIn etc.
So, in this tutorial...
How to make Bootstrap columns all the same height?
Hello Readers!
Bootstrap is the most amazing HTML and CSS framework by far. Also, the grid system is near to perfect.
It has columns and rows to keep our content just in place perfectly. But everything has its weak point.
Bootstrap has i...
Create a HelloWorld application using angularJS
Generally any angularjs application requireds a following components:
1. ng-app - This component is required to make a links between the AngularJS application and the HTML.
2. ng-model - This component is required to bind the values of AngularJ...
Adding textbox dynamically and save the values in angularjs
To create textbox dynamically in angularjs, we have to declare an array named inputs in which we will push the textbox element dynamically. In input box, we have included ng-model to bind the property name to the input. so we ...
Types of Divider
Hello Reader
This blog post will tell you how to make different types of divider between two HTML elements. There are total 10 dividers I will be providing here. The very first is a single line divider which we most commonly use. The second d...
How to create simple Chatbox Speech Bubble
Hey all!
This blog post is about creating simple chatbox speech bubbles. There are 4 separate classes. One for the chatbox conversation, second for the speech bubble, third and fourth for the two persons interacting respectively. The spe...
CSS Linear gradient property
Hi,
This blog is continuation with my previous blogs in which I had discuss type of CSS gradient properties,
In this blog i am going share how to use css linear gradient property in different ways.
Go through the following examples below...
Shapes of CSS
Hello Readers!
In this blog post, let us learn how to create simple shapes that can be made even simpler using CSS. I am providing the code for 5 shapes we might be using then and now. Note that, all of the figures below use only a single HTML...
An Overview of javascript within a form
Hello everyone , Today in my blog with the help of an example i.e cake form I have illustrated the use of array, if and else statement and JavaScript functions .
Basically the form helps in calculating the price of the cake depending...
clone() method in jQuery
clone() Method:
Clone() method is used to make copy of selected html element including its child nodes, data and properties. It is useful when we need to duplicate html elements in a webpage.
Syntax:
$(selector).clone(true|fa...
Speech Bubbles on hover
Hello Readers
If you want to create speech bubbles using css3, here is the code that will help you.
This blog post will tell you how to make CSS speech bubble without using any image. You need a <div> element. Though I’m u...
CSS Parallax
Hello Readers!
Have you ever looked out of a car window while driving and noticed how fast the electricity poles move by, while the mountains in the background move really slowly. This is what we say, parallax motion, in real.
For a long ti...
Custom Checkbox and Radio Button
Hello all, In this blog today, I am going to show u how with the help of CSS, We can easily create custom checkbox and radio buttons. Following is the HTML and CSS code, which shows how to create your own checkbox and radio button.
...
Overriding The default text selection color with CSS
Hello Readers!
Browsers have a default text selection color (mainly, blue or orange). However, this setting can be overrided with the CSS pseudo-element ::selection. This overrides the browser-level text selection color with a color of ...
An overview of z-index property
The z-index property has caused a lot of confusion more than any other CSS property. It’s not complicated, the problem is that a few people understand how it really works. z-index is not a difficult property to understand. But due to false ...
Parallax Scrolling
Hello everyone!!
Parallax Scrolling is in which foreground content and background content are moved with different scrolling rate. In parallax scrolling we can use the different content in different scrolling position.
code:-
&...
SlideToggle using JQuery
Hello Readers
The slide Toggles (slideToggle()) method is use toggle between slideUp() and slideDown() for the selected elements like(div, paragraph, etc..).
This blog post will help you with displaying the navigation menu items in a ...
Attribute selector in jQuery
Attribute selector:
We usually use either Class or ID to find html elements in jQuery but we can also use attribute to find specific elements. Attribute selector is written inside square brackets [attribute].
Some of the common ...
Disable dragging of ghost image in CSS
Hey Readers!
Images are used in web pages to make them look more interactive and appealing. We must have surely noticed a thing about images. When you click on an image and drag it, there is a semi-transparent image that follows the mouse till...
Vertically center align text in CSS
Hello Readers.
Center aligning text obviously gives it a more appealing look. Horizontal center align is what we do each day. But when it comes to vertical center align, things get a bit messed up. This too is easier with a single word o...
How to stretch a background image to a div
Hey Readers!
This blog post is going to solve the problem you must have faced sometime while putting a background image. There are situations when we want the background image to fill the entire div (instead of the viewport) without distorting...
How can I install LESS?
LESS is a css pre processor which extends the css language with some additional new features like declaring variables, mixins, functions and other techniques that allow us to make CSS more maintainable and extendable.
Installation
...
Shadow with Glow Transition
Hello Readers
Box-shadow is a very interesting property of CSS3. It gives a glowing and blurring effect to the HTML elements. Box-shadow when used differently gives different visually appealing results. Some of them have been shown here. I hav...
Adding two columns value using jQuery
We can add the values of two columns and show the result in another column using jQuery easily.
Html code:
<div id="main">
<table>
<tbody>
<tr>
<th>Digit1</th>
<th>Operator</...
