Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to create Pay Roll Management Webpage using JavaScript?
Nowadays, there are many companies and small-scale businesses rising and booming in the world. There are so many people working in these industries or firms. It has become a crucial task for the employer to manage the payment records of his employee. Thus, arises the need of proper payroll management system in every big or small firm. It is almost impossible for the employer to manually maintain the pay roll record of each and every employee in big firms. So, they need digital pay roll management system. In this article, we will discuss about how to create a pay ...
Read MoreHow to create Incoming Call Animation Effect using CSS?
The CSS animation property allows developers to create dynamic visual effects that enhance user experience. One popular effect is the incoming call animation, which simulates a ringing phone with pulsing shadows and vibration motion. In this article, we will create an incoming call animation effect using CSS animations and the box-shadow property to simulate the visual feedback of a ringing phone. Syntax .element { animation: name duration timing-function iteration-count; box-shadow: offset-x offset-y blur-radius spread-radius color; } @keyframes name { 0% { /* initial ...
Read MoreHow to disable browser print options (headers, footers, margins) from the page with CSS?
We can control the print preview page's header, footer, and margin with CSS using the @page directive. This allows us to customize the layout and remove browser-generated print options like headers, footers, and default margins. When previewing a print page in the browser, you typically see extra information like the page title, date and time, and page numbers in the header and footer. There are also default margins applied to the page. We can disable these using CSS print styles. Syntax @media print { @page { margin: ...
Read MoreHow to create a printable webpage using CSS media queries?
We can create a printable webpage and control the styling in the print preview using the CSS @media print media query. This powerful CSS feature allows us to define specific styles that only apply when a user prints the webpage or views the print preview. We can control element visibility, adjust layouts, modify colors, and optimize content specifically for print format. Syntax @media print { /* CSS styles for print version */ selector { property: value; } ...
Read MoreHow to create numbering using counter-increment property in CSS?
The CSS counter-increment property is used to increase or decrease the counter values that we can display on a webpage using CSS. CSS counters are useful when we want to count the occurrences of an HTML element in a webpage. We will also use the counter-reset CSS property here, which helps us to reset or initialize the CSS counter value to a desired number. Syntax /* counter-increment */ selector { counter-increment: counter-name increment-value; } /* counter-reset */ selector { counter-reset: counter-name reset-value; } Here, the ...
Read MoreHow to automatically close all collapsible elements inside of the accordion when closing the accordion?
We will use the bootstrap accordion component in our article to demonstrate how to collapse all the children's accordions inside the parent accordion. An accordion is a collapsible component that helps to display an expand/collapse type of content on the webpage. In this article, we will use the Bootstrap 5 Accordion component to display a list of expandable/collapsible elements in a nested fashion. Now, first, we will listen to the "hide" collapse event by attaching an event listener to the parent accordion. After that, when the "hide" collapse event gets fired, we will find all the collapsible elements inside ...
Read MoreHow to Automatic Refresh a web page in a fixed time?
We can auto-refresh a web page by either using a "meta" tag with the "http-equiv" property, or by using the setInterval() browser API. Automatic refreshing websites have certain use cases − for example, while creating a weather-finding web application, we may want to refresh our website after a set interval of time to show the user the near-exact weather data for a location. Let's look at the 2 approaches below to understand how to set up an auto-refreshing website. Method 1: Using Meta Tag In this approach, we will use the "http-equiv" property of a "meta" tag ...
Read MoreHow to auto-suggest rich content while searching in Google AMP?
To implement auto-suggestion of rich content while typing in an input field, we use the amp-autocomplete component from Google AMP. This component provides dynamic suggestions as users type, enhancing the search experience. Required Scripts To create auto-suggest functionality in Google AMP, you need to include these scripts − Installation: Add these script tags to your HTML section to enable AMP autocomplete functionality. Basic Syntax {"items": ...
Read MoreHow to author fast-loading HTML pages?
Optimizing HTML pages for fast loading improves user experience, reduces server load, and enhances SEO rankings. This involves minimizing file sizes, reducing HTTP requests, and implementing modern loading techniques. Approach 1: Minimize File Size Remove unnecessary whitespace, comments, and inline styles to reduce file size. Use external CSS and JavaScript files instead of inline code. Bad Practice How to author fast-loading HTML pages? body { margin: 0; } h3 { color: blue; } ...
Read MoreHow to arrange text in multi-columns using CSS3?
The CSS column-count property is used to divide an HTML element's content into the specified number of columns, creating a multi-column layout similar to newspapers or magazines. This property is part of the CSS3 multi-column layout module. Syntax selector { column-count: number; } Here, number is a positive integer value that represents the number of columns you want to arrange the text into. Possible Values ValueDescription numberA positive integer specifying the number of columns autoDefault value. Number of columns determined by other properties Example 1: Three ...
Read More