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 3 of 42
img-rounded Bootstrap class
Use the img-rounded Bootstrap class to style your image and give it rounded corners. This class applies CSS border-radius to create smooth, rounded edges on images. Syntax Example Bootstrap Images Styling Images with Bootstrap ...
Read MoreMove an HTML div in a curved path
To move an HTML div in a curved path, you can use CSS animations, JavaScript, or HTML5 Canvas. JavaScript provides the most flexibility and browser compatibility for complex curved animations. CSS Transitions - Simple curved paths using cubic-bezier JavaScript (jQuery) - Custom curved animations with precise control HTML5 Canvas - Complex curved paths with mathematical precision We'll focus on JavaScript solutions using jQuery's animate() method and modern CSS transforms. jQuery animate() Method The animate() method performs custom animations by changing CSS properties over time. ...
Read MorejQuery Mobile: Sending data from one page to the another
jQuery Mobile provides several methods to pass data between pages. The most common approaches include URL parameters, localStorage, and sessionStorage. Method 1: Using URL Parameters Pass data through the URL query string when navigating between pages. HTML Link with Parameters Go to New Page JavaScript to Extract Parameters $(document).on("pageinit", "#new", function(event) { // Get URL parameters var url = $(this).data("url"); if (url) { ...
Read MoreEffects and animations with Google Maps markers in HTML5
Google Maps API doesn't provide built-in fade or animation effects for standard markers. However, you can create custom animations by implementing Custom Overlays that give you full control over marker appearance and behavior. Why Custom Overlays? Standard Google Maps markers have limited animation options. Custom overlays allow you to: Control opacity and CSS transitions Create fade in/out effects Add custom animations using CSS or JavaScript Implement bounce, slide, or rotation effects Creating a Custom Overlay Class // Custom overlay class extending Google Maps OverlayView function CustomMarker(position, map, content) { ...
Read MoreHow to use FastClick with jQuery Mobile the right way in HTML?
FastClick is a library that eliminates the 300ms delay on mobile browsers for touch events. However, jQuery Mobile provides a built-in solution with the vclick event that handles this automatically. The Problem with Mobile Touch Delays Mobile browsers introduce a 300ms delay between a touch event and the click event to detect double-taps. This creates a sluggish user experience on mobile web applications. jQuery Mobile's Built-in Solution jQuery Mobile includes virtual events like vclick that provide immediate response without the 300ms delay. This eliminates the need for external libraries like FastClick. Using vclick Event ...
Read MoreWrap Strings of Text in Bootstrap Navbar
To wrap strings of text in a Bootstrap navbar, use the .navbar-text class. This class ensures proper vertical alignment and styling for non-link text content within navigation bars. What is navbar-text? The .navbar-text class is specifically designed for adding non-interactive text elements to Bootstrap navbars. It provides appropriate spacing, alignment, and color styling that matches the navbar's design. Example You can try to run the following code to set text in Bootstrap Navbar: Bootstrap Navbar Text Example ...
Read MoreBootstrap Contextual classes
Bootstrap contextual classes allow you to change the background color of table rows or individual cells to convey different meanings and states. These classes provide visual feedback to users about the status or importance of data. Available Contextual Classes Class Description Visual Effect ...
Read MoreBootstrap Form select
A select dropdown is used when you want to allow users to pick from multiple options. By default, it only allows one selection, but can be configured for multiple selections. Use for list options with which users are familiar, such as states, countries, or categories. Use multiple attribute to allow users to select more than one option. Bootstrap's form-control class provides consistent styling across browsers. Basic Select Example Here's a simple Bootstrap form with a select dropdown: ...
Read MoreBootstrap Labels
Labels are great for offering counts, tips, or other markups for pages. Bootstrap provides the .label class to create inline labels that complement text content. Basic Label Syntax Use the .label class along with contextual classes to create different styled labels: Default Primary Success Example Here's a complete example showing labels used with headings to display counts: Bootstrap Labels Example ...
Read MoreSet heights and widths of forms with Bootstrap
Bootstrap provides classes to control form element heights and widths. Use .input-lg, .input-sm for height sizing, and grid classes like .col-lg-* for width control. Height Sizing Classes Bootstrap offers three height sizes for form controls: .input-lg - Large height input Default - Standard height (no class needed) .input-sm - Small height input Width Control with Grid System Use Bootstrap's grid classes to control form element widths. Wrap inputs in .row and use column classes like .col-lg-2, .col-lg-3, etc. Example Here's how to implement different form sizes: ...
Read More