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
Web Development Articles
Page 693 of 801
How to detect the dragleave event in Firefox when dragging outside the window with HTML?
You need to track which elements dragenter and dragleave had been triggered on. Listening dragenter and dragleave on an individual element will capture not only events on that element but also events on children. The main challenge with detecting dragleave events in Firefox when dragging outside the window is that these events fire for both the target element and its children. To solve this, we create a collection that tracks all elements that have received dragenter events and removes them when dragleave occurs. Creating a Custom Drag Hover Plugin Here's a jQuery plugin that properly handles drag ...
Read MoreHow to reload the current page without losing any form data with HTML?
The easiest way to reload the current page without losing form data is to use WebStorage, where you have persistent storage (localStorage) or session-based (sessionStorage) which remains in memory until your web browser is closed. Using localStorage to Preserve Form Data The key is to save form data before the page reloads and restore it after the page loads. Here's how to implement this solution − Step 1: Save Form Data Before Page Reload Use the beforeunload event to capture form data when the page is about to reload − window.onbeforeunload = function() { ...
Read MoreHow to properly integrate HTML5 Boilerplate with Twitter Bootstrap?
To integrate HTML5 Boilerplate with Twitter Bootstrap, you can use the Initializr. It is an HTML5 templates generator that allows you to create a customized HTML5 boilerplate with Bootstrap components included. Using Initializr for Integration Initializr provides a web-based interface where you can select HTML5 Boilerplate as your base template and add Bootstrap framework on top of it. This creates a clean, production-ready starting point for your web projects. Example Integration Here's what a basic integrated HTML5 Boilerplate with Bootstrap looks like − ...
Read MoreInput type DateTime Value format with HTML
The datetime-local input type in HTML allows users to select both a date and time from a built-in browser picker. When the input field is clicked, a date-time picker popup appears. The value is stored in the format YYYY-MM-DDThh:mm, where T separates the date and time portions. Value Format The element uses the following ISO 8601-based format − YYYY-MM-DDThh:mm For example, 2025-03-15T14:30 represents March 15, 2025 at 2:30 PM. You can use this format to set a default value with the value attribute, or to set minimum and maximum allowed dates with min and max. Example: Basic ...
Read MoreWhy use IBM Worklight if it ultimately uses PhoneGap for HTML support?
IBM Worklight (now known as IBM MobileFirst Platform) is a full enterprise mobile development platform, while PhoneGap (Apache Cordova) is a library focused on wrapping web applications into native mobile containers. Although both provide HTML5 and CSS support for building hybrid mobile apps, Worklight offers many additional enterprise features that PhoneGap alone cannot provide. What Is PhoneGap? PhoneGap is a software development framework originally created by Nitobi and later acquired by Adobe Systems. It allows developers to build mobile applications using web technologies like HTML, CSS, and JavaScript instead of native programming languages. PhoneGap wraps the web application in a ...
Read MoreOptimizing SVG-based sprite-sheets for CSS3 HW GPU acceleration in the mobile browser with HTML
When using SVG-based sprite-sheet animations in mobile browsers, performance can suffer due to frequent repaints and the lack of hardware (GPU) acceleration. CSS3 provides several techniques to promote elements to GPU-composited layers, reducing flickering and improving animation smoothness on mobile devices. The Flickering Problem In sprite-sheet animations, frames are displayed one after another by changing the visible portion of the sprite. On mobile browsers, switching frames can cause flickering because the browser repaints the element and briefly shows a blank state between frames. This happens when the old frame is removed before the new frame finishes rendering. Fix 1: Layer ...
Read MoreUse of Ionic as desktop web application with HTML5
Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Think of Ionic as the front-end UI framework that handles all the look and feel and UI interactions your app needs to be compelling − kind of like "Bootstrap for Native", but with support for a broad range of common native mobile components, slick animations, and beautiful design. Can Ionic Be Used as a Desktop Web Application? Ionic was originally built and tested for mobile only. It relies on a native wrapper like Cordova or Capacitor to run on mobile devices and access native device features. ...
Read MoreaddEventListener for keydown on HTML5 Canvas
By default, the HTML5 element cannot receive keyboard focus, which means keydown events will not fire on it. To make the canvas focusable and responsive to keyboard events, you need to add the tabindex attribute to the canvas element. Once the canvas has focus (after being clicked or tabbed to), it can listen for keyboard events. Why tabindex Is Needed Keyboard events like keydown, keyup, and keypress only fire on elements that have focus. Since is not a form element, it is not focusable by default. Adding tabindex="0" makes it part of the normal tab order, allowing it ...
Read MoreEmber.js browser support with HTML
Ember.js is an open-source, free JavaScript client-side framework used for developing web applications. It provides a complete solution for building client-side JavaScript applications, including data management and application flow. Ember.js uses the MVC (Model-View-Controller) architecture pattern. In Ember.js, the route serves as the model, Handlebars templates serve as the view, and controllers manipulate the data in the model. Browser Support for Ember.js Ember.js supports all major modern browsers. The following browsers are officially supported − Google Chrome (latest) Mozilla Firefox (latest) Microsoft Edge (latest) Safari (latest) Note: Internet Explorer 11 was supported in older versions of Ember.js (up ...
Read MoreCenter Triangle at Bottom of Div in HTML with CSS
To create a triangle at the center and bottom of a , you can use the CSS ::after pseudo-element with the border trick. The triangle is formed by setting a colored top border and transparent left and right borders on a zero-width, zero-height element. It is then positioned at the bottom center of the parent div. How the CSS Triangle Trick Works When you set borders on an element with zero width and height, the borders meet at angles and form triangular shapes. By making only the top border visible (colored) and the left and right borders transparent, you get ...
Read More