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
A sliding Fullscreen Navigation Menu
Hello, readers . In today's blog I have tried to create A Full Screen Sliding Navigation covering the full screen using Javascript in a direction from left to right.
For creating this I need to make a div with id name as “m...
A Responsive Menu With Hover Effect
Hello, readers . In today's blog, I have created A Responsive Menu which when we hover over the menu items it covers the area of the hovered item with a different color.
For creating the navigation menu , I need to create an unor...
drop down menu with nested submenus using css
If u want to create a horizontal menu with a submenu, code below is help you.
In below first, we will remove padding and margin from first level and second level menu.
We will style up first level list item and here we will use fl...
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...
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:
...
How to make two divs equal in height lying side by side using html and css?
Hello Readers , this is a small blog on how to make two columns of equal height regardless of content inside the columns. First, we will write the HTML to make two columns lying side by side having same width. The following code is written to mak...
Form Validation in AngularJS with ngMessages
In this post, you will learn about ngMessages directive in angularJs and how it can help to show error messages in your application. ngMessages provides custom form validation facility to display error messages in angularJs.
Let’s start ...
Show background transition effect on hover
If you want to change width and height to the box and show the content after a transition on hover, below code will help you.
We can easily use the transition property and change the width and height to the div, for this first we will create t...
Change background image and display content on over effect
If you want to change background image and display content on hover effect this code will help you.
lets say if you want to show a content only when you move a cursor on an image div, and when image changes it will display the content or ...
How to align an elements center horizontally and vertically?
If you want to align your text to be centered inside the box from both side (horizontally and vertically) you can do this very easily, this below example will helps you.
Html:
<div class="contentbox">
<p>This is ...
How to crop images using Angularjs with example
In this post you will learn about cropping images using Image Crop directive in AngularJS. This directive provides you the feature to crop any image in a circle or square shape.
You just need to have angularjs to use this directive. To start wit...
Integrate Postgresql with Node JS
Many Programmers feel comfortable to use Postgre SQL rather than MongoDB, member of MEAN Stack.
We are going to integrate Postgresql with NodeJS
To install NodeJS, please go through this Article
Now, when we are finished with Installatio...
Transition of a div on click event using Jquery with demo
Hello friends,
If you want to make an animation like transition on your multiple views or If you want to slide your view i.e. your DIV element from one to another, you can use the following code.
In this we have all the content in...
Image Flipping Effect By Css
Flipping Image can be extremely valuable these days. The most basic use-case for flipping images that I can consider would incorporate some sort of image on the front, and some data related to it on its back.
By using below code we can u...
Responsive table using CSS3 and HTML5
We can easily create the table responsive using CSS3 and HTML5 thats makes our table more readable on small screen without the use of javascript.
In my example ,I had simply used the table tags such as <table></table>, <thead>...
How to use counter increment in CSS
If you want to increase the counter of the listing we can do that easily with the help of counter increment using CSS.
This can be used like an variable in javascript and you just have to increment the value of the variable using CSS rules and...
Table pagination using html
Table pagination is a simple code that will give new effect to the user for creating a long html table into compact manner, This can be possible through simple line of code of javascript and html, for better look and touch up User will use css to...
How to apply image in the checkbox using CSS
Hello Readers, Here is simple line of code that will be useful for applying different color in checked or unchecked state or User can apply different icons to it, This will be only possible using HTML and CSS, User can see below how these line of...
Creating contact form using HTML/BOOTSTRAP and CSS
If you want to create simple contact form using html/bootstrap and css, below example will helps you.
Firstly we will create the HTML form which will display basic form fields. It will ask users to submit their Name, Email Address an...
Centering element Vertically and Horizontally using Flexbox
Now this is the issue that we were facing form a long time. To align an element center horizontally we have been using margin: 0 auto and to align an element center vertically is even more difficult. But with the use of flexbox it is very easy.
...
JQuery Simple Scroll To Top
In this tutorial, you will learn that how to add scroll to top in any of the page. As we see in many websites the scroll top function. Its very helpful for users to go to the top of the page automatically without scrolling. It appears when the pe...
Create simple responsive form using html and css
If you want to create simple responsive user regestration form using html and css, below example will helps you.
In the below code I have create complete responsive form that includes several different elements and attributes. These ...
Media Query
Media query is css technique that is being introduce in css3.
It is used to set the css and display the page properly when seen on the different screen size.
It uses $media rule to include a block of the css only if a certain condidtion is ...
How to set the height of two div equal dynamically using Javascript?
Hello reader's if you are developing the website in which data is generated in div and height of them is not equal then you can sort out your problem from this blog.
In the scenario above, sometimes text matter in the div is not ...
CSS jQuery
We can add css by jquery using css() method
To return the value of a specified css property
css("propertyname");
To set a css property
css({"propertyname":"value","propertyname":"value",...});
To set a background and the fontsi...
Bootstrap Navbar Menu without Javascript
The navbar menu is used in header or footer and in many cases in the content also. It is responsive by default in bootstrap and take size according to screen size.
The navbar get collapsed in case of small devices like mobile phones and there is...
How to create a sliding background image?
To show the image sliding ion background i have used two DIV here one act as a wrapper and another contains the background image that slides.
In the .wrapper div i have added "overflow:hidden" property that will make this div to hide...
Disabling the text selection with the help of css
In many cases we do not want that the user can select the text of the website for privacy reason.
Using CSS property, we can restrict user to do so.
Here is the code below:
.disable-selection {
-moz-user-select: none; /* Firefo...
Full page background slide show
Hello Readers,
To make full page background slide show I have used the below mention code. The code is very simple. If you want full background slide show in your website you can easily use this code.
Here is the demo for background images ...
Responsive menu
hii,
i am sharing a simple responsive menu code i.e html and css which you can use whenever you want to create a responsive menu.
HTML:
<div id='Responsivemenu'>
<ul>
<li class='first'><a href='#'><span&...
How to eliminate render-blocking CSS?
I was facing issue related with speed optimization of the web page. When there are many css on a single page, or have large size of css file then it makes your website slow. I am using Google PageSpeed insights to improve my site's performanc...
jquery methods: addClass toggleClass and Remove class
jQuery has Basically three methods for CSS manipulation Following methods is explained using below example:
1.addClass() - Adds one or more classes to the selected elements
2.removeClass() - Removes one o...
Looking for Software Developer for Mumbai
Position: Software Developer
Roles and Responsibilities:
Requirement gathering, design, development, testing of web applications using ASP .net
Maintain existing websites by identifying and correcting software defe...
Fetching Data from database using php
To fetch a data from database by using simple PHP code, firstly create a connection to the database by using simple query and create a login form using HTML code for entering values through user. on clickinng submit button, This form will b...
jQuery DOM manipulation methods
The following table provides list of all the methods that are used to manipulate the HTML and CSS.
Except html() method all other methods below work for both HTML and XML documents.
Method
Description&nbs...
How to make nav tabs using html code
Nav-Tabs can be really useful especially for content-crowded web sites or in that project where large number of interlinked pages to it. By using nav-tab in html a user can save plenty of space just by placing your block of content in tabs and di...
jQuery Selectors
Selectors, as the name suggests, are used to select one or more HTML elements using jQuery. Once an element is selected we can perform various operations on that selected element. jQuery selectors are used to access HTML elements through their id...
How can I do change background color of an Chekbox using css?
Hello readers...
I face a problem in changing the background color of a check-box. Please help me out from this problem.
By using background property it takes its default value as you have seen the color and text of a check- box will change to ...
How to make slide check box in html using CSS?
Hello Reader's if you are looking for slider design of checkbox then this blog will be helpful to you.
Lets see how to make checkbox with slider desing.
First we will create the html file and it's code will go like this:-
<div>
...
Apply Ribbon at corner of a Box
Hello readers here is a simple line of code that will give your page a new look using a corner ribbon tag... it will help you to add ribbon aside of your working area by using pure CSS code. You can use this code whenever you want to display som...
:nth-child in css
The :nth-child selector in CSS code is here it will allow you to select one or more elements according to the formula. It is used to style content based on parent and child relationship.
:nth-child iterates throughs elements from the top ...
CONCEPT OF EVEN AND ODD RULE.
CONCEPT OF EVEN AND ODD RULE USED IN A ROW-
Readability of rows in a large table is hard to read and understand but it can be easily verified by using even odd concept.
FOR EXAMPLE
Following Table have 7 row and 6 columns. The number of eve...
Future of web designed is RWD:-
RWD:RESPONSIVE WEB DESIGNED is making the elements and pages responsive for all devices.
A responsive website consist of CSS3, ,media queries and @media rule, flexible images, flexible videos, and fluid type, all of which allow responsive websi...
Bootstrap-Pagination
Hello friends, Here is simple code of using Pagination. You can use this code to make your page more attractive and give a easy access by reaching on several pages from a single columns of links.
Pagination is a navigation tool that will help...
Column Layout using HTML5
Explaining the use of column layout in CSS:-
CSS column layout is helpful for dividing the text into columns. For example: The text in magazine/newspaper you have been generally come across the big text is divided into column with a colorful...
z-index in CSS
Z-index Definition:-
z-index property specifies stack order of any element or it only works for the positioning of an element i.e when position is absolute, relative and fixed.The vale of Z-index mostly used -1, 0 ,1
-1 is used for the pos...
@media Screen
Media rule in CSS is very attractive way to define different style rules for various types of screens(tablets/mobile screen) Media queries look at the capability of the device and be used to check various things:
Height and Width of the ...
How to give 2D or 3D effects to HTML element.
Hello Readers!
If you wish to give your HTML elements an effect this an be achieved by using css transform property. The CSS transform property allows us to visually manipulate an element by rotating, skewing, translating, or scaling. This pr...
Multiple images in background
It is easy to add multiple images in the background by using HTML and CSS code only. we can use one image which will repeat across the top i.e (repeat-x) and the another one will across the entire page or it is simple way to adjust every image p...
