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
Front End Technology Articles
Page 444 of 652
Window.onload vs onDocumentReady in javascript
In JavaScript, window.onload and $(document).ready() are two different methods for executing code when a page loads, each with distinct timing and behavior. Window.onload The window.onload method executes after the entire web page has completely loaded, including all DOM elements, stylesheets, images, and other external resources. It only allows one function assignment — subsequent assignments will overwrite previous ones. Syntax window.onload = function() { // Code executes after everything loads }; window.onload = (event) => { // Arrow function syntax }; Example: Window.onload Behavior ...
Read MoreDifference between test () and exec () methods in Javascript
The RegExp.prototype.test() and RegExp.prototype.exec() methods are JavaScript methods used to handle regular expressions. These methods provide different ways to search for patterns in strings and return different types of results. What are regular expressions? Regular expressions are patterns used to search for character combinations in strings. In JavaScript, regular expressions are treated as objects and are commonly referred to as "regex" or "RegExp." The exec() Method The exec() method searches for a match in a string and returns an array containing the match details if found, or null if no match is found. The returned array ...
Read MoreDifference between inline-flex and inline-block in CSS
CSS inline-flex and inline-block are values of the CSS display property that control how elements align and behave within their containers. Both make elements flow inline while providing different layout capabilities. Syntax selector { display: inline-block; } selector { display: inline-flex; } Key Differences CSS inline-block: Allows an element to flow inline with other elements while maintaining block-level characteristics like width and height. Children follow normal document flow. CSS inline-flex: Creates an inline-level flex container where ...
Read MoreHow to Vertically Align the Text with a Large Font Awesome Icon?
When working with large Font Awesome icons alongside text, achieving perfect vertical alignment can be challenging. This article explores various CSS methods to vertically align text with large Font Awesome icons effectively. Syntax /* Flexbox approach */ .container { display: flex; align-items: center; } /* Inline-block approach */ .container { font-size: 0; } .icon, .text { display: inline-block; vertical-align: middle; } /* Grid approach */ .container { display: grid; ...
Read MoreHow to add a Login Form to an Image using HTML and CSS?
A login form on an image creates an attractive, modern website design commonly used by restaurants, event organizers, and businesses. This approach overlays a functional login form on a background image, making the website more visually appealing than standard forms. Syntax .container { background-image: url('image-path'); background-size: cover; position: relative; } form { position: absolute; /* positioning and styling properties */ } Approach To create a login form on an image, follow these steps ...
Read MoreCreating a Navigation Bar with three Different Alignments using CSS
In HTML, a navigation bar is a group of buttons and images arranged either in a row or a column and used as a control site for linking particular webpages. It is regarded as one of the fundamental tools used in web design. Without affecting the content of the pages, the HTML navigation bar separates structure from content and adds creativity to the layout of the website. Using HTML, we create a navigation bar, and CSS gives it a beautiful appearance. Additional functionality may be added using JavaScript. In HTML, a navigation bar can be implemented in a variety ...
Read MoreCreate a Circular Progress Bar using HTML and CSS
A progress bar displays the status of a procedure within an application. A progress bar shows how much of the process has already been completed and how much is still left to do. The various components of the progress bar will be designed using HTML, and the progress bar itself may be modified using CSS properties. Progress bars are frequently used on websites to highlight particular data in a more appealing way for users. One advantage of employing a circle progress bar over a standard (horizontal) progress bar is that you can accommodate more progress bars in one row, ...
Read MoreCreate a Search Bar using HTML and CSS
To create a search bar using HTML and CSS, we can use simple form elements and basic CSS properties. A search box is one of the most commonly used components in a website which makes navigation easier for users. Syntax /* Basic search bar structure */ .search-container { display: flex; align-items: center; } input[type="text"] { padding: value; border: value; border-radius: value; } button { padding: value; background-color: ...
Read MoreCreate a Sticky Social Media Bar using HTML and CSS
A sticky social media bar is a fixed navigation element that remains visible while users scroll through your website. It provides easy access to your social media profiles and helps increase engagement and followers. Using CSS, we can create an animated sticky bar that slides out on hover without affecting your website's performance. Syntax .social-container { position: fixed; right: -width; transition: all 0.25s ease-in-out; } .social-item:hover { margin-left: -slide-distance; } Example: Right-Side Sticky Social Bar The following ...
Read MoreDesign a calendar using HTML and CSS
To design a calendar using HTML and CSS, we will be using HTML tables. We use calendar in our daily life to check the dates, schedule any event and many more. In this article, we will understand how we can design a calendar using HTML and CSS only. We will be using HTML table to create the structure and use CSS properties to design the UI of calendar. Steps to Design a Calendar Using HTML and CSS We will be following below mentioned steps to design a calendar using HTML and CSS − ...
Read More