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
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...
Set timeout function example
The setTimeout funtion is a JavaScript code used to execute a code in particular time intervals.
These time intervals are called timing events.
There are two methods to set interval with JavaScript:-
setTimeout(function, milliseconds)...
Custom checkbox bus seat ui, 3type checkbox reserved Seat, Select Seat & empty Seat
Customizing checkbox using Pure Css
The checkbox you see below is nothing but the label and its input that is hidden or making its opacity to "zero" reason for doing this is, it has very less CSS styling property that will not satisf...
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:-
&...
Taking Screenshots
Hello everyone!!
Today, we will learn how to take screenshots in HTML 5. HTML 5 provide a method called ctx.drawImage(video, 0, 0), by the help of this method we can take screenshots of the video and save it. In ...
How to use Bootstrap scrollspy
The Scrollspy is a plugin which is used to highlight the links in a navigation according to the scroll position automatically. It indicates the location of the visitor/user in the page.
Creating Scrollspy with Bootstrap:-
The Bootstrap Scroll...
The Speech Recognition
Hello everyone,
HTML5 , javascript provides Speech Recognition API,with the help of the API the user can talk with the browser without the using the keyboard. Html 5 provides voice search option like in google IE and chrome.It u...
How can i change ui and attributes of bootstrap3-wysiwyg editor
Bootstrap3-wysiwyg editor Ui and attributes change:
The meaning of WYSIWYG is "what you see is what you get", This editor is also explaining the meaning of this acronym that the content of the page will be edited as its resem...
contenteditable attribute in html5
contenteditable attribute is a new feature added to HTML5. By the terminology, we understand that this attribute is used to specify that whether the contents of an element are editable or not. This attribute was designed and implemented by Micros...
Data Popover
Bootstrap Popover :-
The popover is like tooltip, offering an extended view complete with a heading. For the popover to activate, a user simply needs to hover the cursor over the element. The content of the popover can be populated...
Lazy Load jQuery Spinner
Lazy load jquery spinner is used for the delays loading of images used on the web page. It improves the page load time, by using this plugin user can see the custom effects and data attributes, It is a fast, easy and lightweight script used for l...
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 ...
Angular Material Card
Angular material card is something new what we get for better UI designing. It is used to draw cards in angular applications. md-Card directive is used for AM-card. It is a container which draw the card and contain many directives inside to make ...
Angular Material Md-Input
In angular material,we use a directive <md-input-container> to contain inputs. As the directive name implies,It is a container which contain input components like label,input and textarea as a child element. Using this container we can do e...
Explaination of Jquery Methods: remove , fadeIn, fadeOut and fadeToggle
In this blog I am going to explain you about very simple concept of Jquery Methods, a little bit Html and Css that is used for decoration the model and for explaining these methods in a more beautiful manner. A user can design the boxes as accord...
Difference between Anchors, Button and Input
ANCHORS-
Anchors represent hyperlinks. A hyperlink is used to navigate or if we want to move a user from one page to another or download a file or external resources.
Anchors are also used to link to particular section of the same page by g...
Pattern Attribute in Html5
Pattern Attribute:
Pattern attribute is used for input field validation and used to provide a regular expression which is used to match the input fields value whether the value is according to the pattern specified or n...
Autofocus Attribute in Html
Autofocus Attribute:
It is a boolean attribute used with input fields, button that set focus on that element on which autofocus attribute has been used when a page is loaded. But we can focus only one element at a time using this attribute.
...
Add twitter feed to website
If you want to embed multiple Tweets on our website in a compact, single-column view and want to display the latest Tweets from a single Twitter account for this a Twitter collection may be rendered in either a list or a responsive grid template....
contenteditable Attribute in Html5
contenteditable Attribute:
ContentEditable attribute provides the user to edit the content of html element. If the attribute is present and its value is true user can easily edit content of an html element and if value is false user cannot edi...
What are phrase tags?
Phrase tags are utilized to construct the content much richer than they appear in like manner. There are numerous phrase tags for arranging the content we require. There are some circumstance where you might want to highlight some word, include q...
Difference between Visibility, Opacity and Display
Here are some CSS properties, which looks similar. It's hard to find the difference between them.
Like:- Visibility:hidden;
Opacity:0;
...
Difference between HTML and XHTML
HTML and XHTML are both languages in which web pages are designed.
HTML-
HTML stands for Hypertext markup language. It is the main markup language which is used to design web pages.
HTML elements are not case sensitive.
e.g of HTML-
...
Difference between bootstrap and foundation
In web designing world, we define framework as a package made up of a files structures and folders of systematic code that include HTML, CSS, JS etc. which is used for the development of websites, as a base to start building a site. W...
spellcheck Attribute in Html
spellcheck Attribute:
It is used to specify whether to check the spelling and grammar of the text in an editable html element. This attribute can be used with input elements, textarea and other editable html elements.
Syntax:
<ele...
Introduction to SVG animation
SVG stands for Scalable Vector Graphic.
SVG is used to define vector-based graphics for the web in XML format. A SVG component is an exceptional sort of DOM component that emulates the language structure of a standard HTML component. SVG...
Difference between HTML and XML
To know the difference between HTML & XML, first of all we need to know what is HTML and XML.
What is HTML :- HTML(Hyper Text Markup Language ) is a markup language used for describing web pages.
What is XML :...
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...
Tabindex attribute in Html
Tabindex attribute:
User uses tab key in a webpage to navigate through interactive elements(links,input fields etc) and navigation depends upon the elements order in Html code. But with the help of tabindex attribute we can change ...
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...
CSS3 Dropdown menu
Hello reader's in this blog we are making a css3 dropdown menu with custom html. We dont use <select> element for creating it. I have used list <li> element for making the dropdown of the menu.
HTML:-
In the html...
Pure CSS3 mobile menu
Hello reader's, in this blog we are going to create a navigation menu for mobile with CSS3 and HTML. I am using the Javascript for the clicking function. Here i used "+" Adjacent sibling combinator selector to make click function fo...
jQuery methods to select elements by hierarchy
Selecting elements in a hierarchy is very useful when the HTML is very nested and the unique id or class is not associated with every element. In such a cases, we first select that element that has some unique id or class and then move to the des...
jQuery methods to select elements by content
CSS selectors do not provide us the facility to interact with the content of any element. So in that case we have to depend either on xpath or jquery selector to select elements on the basis of contents.
In jQuery selector we have va...
jQuery - Methods to select elements by attributes
There are many times while selecting any element we do not have its class or ID, so in that case we have to take the help of various attributes to select the element. Suppose we have the following HTML
<div>
<a target="ma...
HTML5 Audio element and its attributes
Earlier in order to play an audio file in browser Flash was used. But with HTML5 audio element we can play the audio files without the need of the flash.
It supports formats like:
mp3
ogg
wav
The syntax of <audio> element ...
Control Attributes in HTML5
There are certain attributes that add up in HTML5 which makes the form attributes much more interactive and validation free.
There are certain example for control attribute:
1. Read only - This will make the input type in read only mode.
E...
HTML5 - Web Storage
Following are the drawbacks of HTTP session cookies, for storing structured data on the client side :-
1. Cookies are incorporated with each HTTP request, subsequently slowing down your web application by transmitting the same i...
Custom checkbox using CSS
Here is the CSS for custom checkbox. We can add our own properties in the check box.
HTML-
<div class="radio_input">
<input type='radio' id='r1'name='radios' checked='true'/>
<label for='r1'><span></sp...
figure tag
Figure tag depicts unit of content such as diagrams,images Photos etc on a web page. Though img tag is already available in html but figure tag is included in html5 to handle various images,diagrams , photos etc with some embedded content.
...
Frames in HTML
We use Frames to divide the window into multiple sections where each section contains its own individual information.
The main disadvantage with frames is that some smaller devices cannot cope with frames as their screens are not big enough to...
Relatives font sizes in css
Hi Readers,
In this blog, I am going to discuss relatives font size in CSS as per screen resolution.
Being a ui developer one should have proper knowledge about all the measurement units while making a responsive design using CSS.
First of...
Jumbotron Bootstrap
Basically Jumbotron in Bootstrap specifies some special content written for a particular purpose in a big box which provides extra information.
Any valid HTML or other Bootstrap elements can be included inside a jumbotron.
<!DO...
datalist tag in HTML
This tag of html provides predefined options to users so that it becomes convenient for them to select data.
This tag is introduced in html5.
It is mandatory to include input element with 'list' attribute.
here is an exampl...
figcaption tag in HTML
It depicts the figure and illustrates the data of the figure.
It defines a caption which helps to interpret and to increase the understandability of the figure.
<!DOCTYPE html>
<html>
<body>
<h1&g...
Animating Multi Color CSS3 Loader Tutorial
In this tutorial we will going to discuss about CSS3 Loader. Loader are useful to show in website when there is no content visible for long time while the content is loading. For making loader i have used CSS3 properties and used different colors...
How to make your divs to display horizontally not Vertically
Hello Readers, this is a small blog on making divs display horizontally not vertically. Here is a very simple and easy code that will make divs to stack horizontally.
To achieve this we will make HTML page and CS...
Fit an image in the absolute center of a div and keep the aspect ratio
Hello readers, this is a small blog on auto resize of an image by keeping its aspect ratio and display image horizontally and vertically in the center of the div.
Here is very simple and easy method to solve this problem of displaying image in...
An Overview to SVG
Hello reader's , Today we will discuss one of the new element of HTML5 used in creating graphic content on the web page.
Introduction :-
The term SVG basically implies as Scalable Vector Graphics. It belongs to the family of an XML base...
An Overview to HTML5 Global Event Attributes
Hello readers, Today we will discuss about the HTML5 various global event attributes , these are of various types such as window events, mouse events, form events and media events.
Whenever any user visits a website it generates any action eit...
