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
jQuery Articles
Page 4 of 42
Clearfix Bootstrap class
The Bootstrap .clearfix class solves the common issue of parent containers collapsing when all child elements are floated. It ensures the parent container properly wraps around its floated children. What is Clearfix? When elements are floated using .pull-left or .pull-right, they are removed from the normal document flow. This can cause their parent container to have zero height, leading to layout problems. The .clearfix class forces the parent to expand and contain its floated children. Example Here's how to use the .clearfix class to properly contain floated elements: ...
Read MoreSplit Button Dropdowns with Bootstrap
Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown. Basic Structure A split button dropdown consists of two buttons wrapped in a btn-group container: Primary button: Performs the main action when clicked Dropdown toggle: Shows/hides the dropdown menu with additional options Example You can try to run the following code to create split button dropdowns: ...
Read MoreAlign the components with Bootstrap
Bootstrap provides utility classes to align navbar components horizontally. Use .navbar-left to float elements to the left and .navbar-right to float elements to the right within the navbar. Alignment Classes Bootstrap offers two primary classes for navbar alignment: .navbar-left - Floats elements to the left side of the navbar .navbar-right - Floats elements to the right side of the navbar These classes can be applied to navigation lists, forms, buttons, and text elements within the navbar. Example Here's a complete example demonstrating left and right alignment of various navbar components: ...
Read MoreGet Bootstrap Jumbotron of full width and without rounded corners
To get a jumbotron of full width and without rounded corners, use the .jumbotron class outside all .container classes and instead add a .container within. This approach makes the jumbotron span the entire viewport width while keeping the content properly centered. Default vs Full-Width Jumbotron When you place .jumbotron inside a container, it has rounded corners and limited width. Placing it outside removes these constraints: Placement Width Rounded Corners Use Case Inside .container Limited Yes Card-like appearance Outside .container Full viewport No Hero sections, landing pages Example ...
Read MoreBootstrap Collapsible list group
To create a collapsible list group in Bootstrap, combine the panel-collapse property with the list-group property. This creates an expandable section containing a list of items that can be toggled with a click. Basic Structure A collapsible list group consists of three main components: Panel container: Wraps the entire collapsible section Panel header: Contains the clickable trigger element Collapsible content: Houses the list group items Example The following example demonstrates a collapsible list group with programming languages. Click the "Info" header to expand or collapse the list: ...
Read MoreUse HTML with jQuery to make a form
To create forms with HTML and jQuery, you can either write static HTML forms or dynamically generate them using jQuery's DOM manipulation methods. Creating a Static HTML Form The basic approach uses standard HTML form elements: Student Details: Student Name: ...
Read MoreHidden Bootstrap class
To hide elements in Bootstrap, you can use visibility utility classes. Bootstrap provides several classes to control element visibility across different screen sizes and contexts. Bootstrap Hidden Classes Bootstrap offers different approaches to hide elements: .d-none - Completely removes the element from the document flow .visually-hidden - Hides visually but keeps accessible to screen readers .invisible - Makes element invisible but maintains its space Using .d-none Class The .d-none class completely hides an element by setting display: none: Bootstrap ...
Read MoreHow to Scroll to the top of the page using JavaScript/ jQuery?
Scrolling to the top of a page is a common user experience feature that improves navigation, especially on long pages. JavaScript and jQuery provide several methods to achieve smooth scrolling to the top. Using jQuery animate() Method The most popular approach uses jQuery's animate() method to create a smooth scrolling effect: body { height: 2000px; padding: 20px; } #scrollBtn { position: fixed; bottom: 20px; right: 20px; padding: ...
Read MoreHow to delete a row from a table using jQuery?
In this article, we will learn to delete a row from a table using jQuery. jQuery, a fast and lightweight JavaScript library, makes DOM manipulation simple. Deleting a row from a table dynamically is a common requirement in web development, especially when working with forms or data tables. Approach to Delete Rows The approach involves attaching a click event listener to a delete button within the row. When the button is clicked, the corresponding row is removed from the table using jQuery methods. Key jQuery Methods Used The $(document).on('click', 'button.deletebtn', function ...
Read MoreHow to add a new list element under a \'ul\' using jQuery?
In this article, we will learn to add a new list element under a "ul" using jQuery. jQuery is a popular JavaScript library that simplifies HTML manipulation, event handling, and animations. One of its practical applications is dynamically adding elements to a webpage without requiring a full page reload. Why Use jQuery? DOM (Document Object Model) updating using basic JavaScript might become difficult and needs more than one line of code. jQuery has simplified it through easy selectors and functions. Employing jQuery helps us: Select elements efficiently Handle ...
Read More