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
Using TouchSwipe plugin in jQuery
If you want to swipe on touch devices like iPad, iPhone, Android device etc there is a jQuery plugin that can be used for this purpose. It can read any single or multiple finger swipes on touch device and mouse 'drags' on the desktop brow...
Get started with a simple TypeScript application
Typescript is Microsoft’s extension of Javascript. It provides type checking abilities and also has features of object oriented programming. TypeScript is used in both Angular2 and Ionic2.
TypeScript has similar syntax and semantics that a...
How to use jQuery Lazy Load Plugin
In this article you will learn about lazy loading plug-in from jQuery. It first loads your web page then request is sent to load the images of that page.
By using Lazy load plug-in you can decrease time for loading the page and also it can incre...
Understanding Custom Directives in AngularJS
AngularJs Directives are used on a DOM element like any attribute, name of the element, some css class or any comment. It tells AngularJS’s html compiler to attach any directive to DOM element. all data bind attributes with ng- are in-built...
webui-popover plugin in jQuery
It is a plugin with jQuery which can be used to show popover . It can work with bootstrap but it can be used without bootstrap. It requires jquery1.7+
It supports browsers IE8+, Chrome, Safari, firefox, Opera.
These are the features of this p...
Scroll Fixed Header in jQuery
In this article, you will learn how to fix the header all the time while scrolling your website page. There are different jQuery plugin available for this purpose but we will use a simple jQuery based solution to make a header fixed on the top of...
Adding Form Elements dynamically in Javascript
You can use JavaScript to add elements like textbox, button, radio button in a html form. createElement() method is used to create html elements at runtime.
Here is the example:
HTML:
<form>
<h2>Dynamically add element in fo...
DataTables: Table plug-in for jQuery
DataTables is a jQuery plug-in designed for creating flexible HTML tables.
It has following features:
* It provides Instant search, Pagination and multi-column ordering
* It has Supports for any data source like DOM, Javascript, Ajax and s...
Learn how to create a slide using pure CSS
Hii,
In this blog, I am going to share an example in which i have created a pure CSS Slider using few CSS properties like transitions, transforms,input:checked functionality and animations.
Slider is the most ...
The Architecture of an Angular 2 Application
In this post, we will understand the architecture of Angular 2 framework.
These are the modules that Angular 2 architecture contains:
Module
Component
Template
Metadata
Data Binding
Service
Directive
Dependency ...
Creating Superscript and Subscript Text in CSS
If you want to make your text superscript text(raises the text) or subscript text(lowers the text), css3 property can be used.
CSS3 provides vertical-align property which can be used to make superscript or subscript effects in your HTML text of ...
Creating Stylish CSS3 Progress bars
If you want to create progress bars using only css3, you can see here how to make it.
HTML Base
The bar in which the progress will be shown can be taken as a <div> with some class named outer. Inside this outer you can take a span in wh...
What is Vue.js and Why Use it
Vue.js is a library of javascript that can be used to build any web application. It has MVVM(Model-View-ViewModel) architecture. It is easy to learn and also more flexible.
Here you will see how you can use this js in your application.
Adding...
Animated Check Boxes Using CSS3
In this article, you can see how to create custom animated check boxes using css3.
Suppose you have some input type checkbox. Now you can add a label after checkbox and animate it with css3. Here is an example that shows the animated check box...
Date Range Selection in datepicker
Many times we need to select from date which should not be the greater than current date and to date must not be less than from particular date. In this blog illustrate how we can select the date range in datapicker.
We can achieve this with the...
Learn how to create a comment with word limit using jQuery
Hii,
In this blog, I am going to share an example in which i have created a comment box using few html tags like input box and text area and i have used jquery to set the word limit and to count the number of characters typed.
Go through ...
5 Deadly Mistakes to Avoid During Web Design and Development
Hey there! We as web designers, strive for perfection in everything, specially when it comes to developing websites to the nearest pixel. Alongside, it is also important ...
Storing and Retrieve Value Using Session Storage in HTML5
Hello Everyone!!
In this blog, we are going to know about the Session storage in HTML5. As we know that web can store the data locally with in the browser. We can store the data using sessionStorage without affecting the pe...
Disable Button and Submit button after one click using JavaScript and jQuery
Hello Everyone!!
As we know that when we are clicking the submit button then it send the data to the server, but what happen if we are not disabling the submit button after the one click then here is the some problem :-
&...
How to Validate File extension before Upload using Regular Expression in JavaScript and jQuery
Hello Everyone!!
In this blog, we are discussing the uses of the regular expression in the validation a file extension before uploading. Regular expression is a set of the symbol or character or both and it is used in many field but here we ar...
Access Users' Geo-Location with HTML
Hello Everyone!!
Nowadays, We can use the HTML5 to find the Geo-location of the user. Earlier IP was the source of getting the location of the user so that we used additional scripting and also the calling of the server, but using h...
How to change default messages of data tables?
Hello Reader, If you are using data tables in your web website and want to change default message of it then in this blog you can see how to change them.
Now-a-days, Data tables are getting very popular because of its real-time instant s...
Chapter 5: Audio and video
HTML5 have native feature for audio and video facility and for it you do not need to have flash.
There are two tags <audio> and <video> it is very simple to add media in your website for it you just have to set the source path. B...
Learn how to create a FlipFlop button using Pure CSS
Hii,
In this blog, I am going to share an example in which i have created a pure CSS Flip Flop button using few CSS properties like transitions, transforms, checkbox functionality and animations.
Flip flop buttons created using...
Chapter 3: HTML5 Attributes
Hello Readers,
In the previous chapter we learn about html5 element, and now we learn about attributes
So, basically we have two type of attributes in html5 first can be used with any element so we define them globally and others are define...
Learn how to create a Ribbon/Strip to highlight some important text using Pure CSS
Hii,
In this blog i am going to create a pure CSS ribbon or strip which can be used to display some important information,link etc with highlighted, eyecatching view on a webpage.
While we create any ribbon or strip design we must u...
Learn how to use CSS pseudo-elements while styling web page.
Hii,
In this blog i am going to share a simple example in which i have used CSS pseudo-element using which we can insert any content, images or create any design before, or after any html tag.
Syntax:
selector:pseudo-element {prope...
How to load heavy images via ajax in webpage
Hello Reader's if you find your website is too heavy to load the contents, then you can use the ajax to load images.
By using Ajax data be loaded and browser will load the heavy images with fade in effect.
So lets get started...
Finding index value using AngularJs
Hii,
To learn how to find index value from a given list of array element or to find the index value of filtered data using AngularJs.
Go through examples given below.
Example 1:In this example index value of the day selected from the drop ...
Create color picker using javascript without using any external link/library/plugin
Hii,
In this blog i am sharing an example of creating a color picker using javascript without using any external link/library/plugin.
There are many browser's addons tools and online tools available using which we can choose ...
CSS Radial gradient property
Hii,
This blog is continuation with my previous blogs in which i had discuss about type of css gradient properties,
In this blog i am going to share how to use css radial gradient property in different ways.
Go through the following exam...
Learn how to create a slider with animation effects using simple code of jQuery
Hii,
I had shared few example of animation effects using CSS and jQuery,This blog is continuation with my previous blogs on "animation effects" using CSS and jQuery
Learn how to create a slider in html with different animation eff...
Use of colgroup tag in html
<colgroup> tag:
It is used to apply different properties on more than one column in a table by grouping columns. Like with the help of this tag we can apply CSS on more than one column otherwise we have to apply CSS individually on each ...
Basic differences between Margin and Padding
Hey Readers!
This blog post will hopefully clear your doubts regarding the difference between CSS 'margin' and 'padding' properties.
CSS Margin: The CSS margin property is used to specify the space around HTML elements . It ...
Custom Tooltip using Html and CSS
Tooltip:
A tooltip is generally used to indicate hints (extra information) about something when the user moves the mouse pointer over an element.
We can use either bootstrap tooltip plugin or we can create our own tooltip using html a...
Use of accesskey Attribute in Html
accesskey Attribute:
Accesskey attribute is used in html forms and links. It provides the user to use keyboard keys for functions which are usually done by a mouse. Example: Like user clicks on links in a webpage using mouse , so with th...
Using shadow property to text and box in CSS3
Css3 has added a new feature shadow to give shadow of elements. It supports two types of shadow:
Text Shadow
Box Shadow
Text Shadow:
You can use text shadow property to give text shadow effect. text-shadow property is used to give s...
Difference between event.stopPropagation(), event.preventDefault() and return false
We have many times have listen about event bubbling in javascript which propogate an event from child element to parent element.
So, to avoid such event bubbling in our page we use event.stopPropogation or return false. Also there is a new thi...
CSS3 transition with demo
With the help of CSS3 new properties, we can transit an element from one position to another with the help of few properties.
It provide you to control the values of the element property for a particular duration of time.
There are two steps in...
Difference between window.onload and document ready
There are some minor difference between the two but it can effect with lots of confusion between to many of us.
window.load - It is fired when everything on the page is loaded. By everything I mean that when the DOM is loaded, when all t...
Understanding AngularJS Bootstrap Process
Bootstrap process in angularJs is simple and you should know about it. There are two ways of bootstrap process in angularJs:
Automatic Bootstrap
Manual Bootstrap
Automatic Bootstrap:
When we run our angularJs App the DOM(Document Ob...
How to increase and decrease the date by one on click using js?
If the user wants to increase or decrease the date by one, on click of a button, he can easily do this by using the following code.
HTML:
Date: <input type="text" class="dateone" id="datepicker">
<input type="button" onclic...
Understanding Data Binding in AngularJS
In this post, you will learn about the data binding in angularJs. It is one of the powerful feature which angularJs provides.
There is two-way data binding in angularJs to bind data between model and view.
The data binding mechanism is handle...
Easy Responsive Data Tables in HTML with demo
In this post, you will learn an easy way to show tables in responsive design. We will use css media queries for responsive designs in data tables. By using this we can find out the screen where we want to change css for table. Below css code is u...
Using href link values inside your select box
In this post, you will learn how to connect select box option with the anchor tag link.
Sometimes you want to change the select box value like an anchor tag with the refresh of page. Lets understand this with an example.
If you have select bo...
Onkeypress Enter focus Input field
Hii,
In this blog I am going to share a javascript code using which we can create a form in which user can fill data without using mouse to move from one input field to another.
You will see that on keypress enter focus will move to next inpu...
How to disable the text select in browser with demo?
If the user doesn't want his content to be copied or only want the other user to read it. He can use the following code of lines to disable the selection of text in the browser.
<div style="-moz-user-select: none; -webkit-user-select:...
Disable the control(ctrl key) plus click event for a particular click with demo
There are many cases where we do not want our page to open in another tab while clicking ctrl+click and the anchor tag is producing dynamically.
For that, we can add the following script which will disable the same effect.
$(funct...
How to check if the scroller reached at the bottom of the page with demo?
There are many techniques through which we can place an event when the scroller reaches the bottom of the page.
If the user wants to play an event when he reach the bottom of the page, he can do the same with the help of the example below:
...
Scope in javascript
Hii,
In this blog i am going to discuss about scope in Javascript and how we can use it.
Being a JavaScript developer one should have proper knowledge about JavaScript scope.
JavaScript scope specifies objects,function and set of variabl...
