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 692 of 801
Why do we use jQuery over JavaScript?
jQuery is a JavaScript library, so it operates on top of JavaScript. It cannot exist on its own, so you can't use one over the other. You can use just JavaScript or JavaScript and jQuery. jQuery was introduced to make development with JavaScript easier. It will reduce the development time. Use it to add animation and event handling on your website. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is easier to use compared to JavaScript and its other JavaScript libraries. You need to write fewer lines of code while using ...
Read MoreHow to link jQuery from my local machine?
You can add jQuery using CDN or through downloading it on your local machine. For local installation, download the jQuery library on your local machine and include it in your HTML code. The following are the steps − Go to the jQuery website to download the latest version available. Save the downloaded jquery-3.2.1.min.js file (or the latest version) in a directory of your website, e.g. /jquery. Include the jQuery file in your HTML using the tag with the correct path to your local file. Linking jQuery ...
Read MoreSafari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
This article will teach you how Safari on iPad iOS6 does not scale HTML5 video to fill 100% of page width. On a responsive HTML5 page, a video can be shown at full width (100%) by applying CSS styling. The video's native resolution is 480x270. On all desktop browsers, the video is resized to span the entire width of the page while preserving the aspect ratio. On the iPad (iOS 6.0.1), Mobile Safari and Chrome, however, display a black rectangle same width as the page. The black rectangle's center contains a small video that is shown at its original ...
Read MoreChange HTML navbar color in Twitter Bootstrap 2.0.4
To change the navbar color in Twitter Bootstrap 2.0.4, you need to customize specific CSS variables that control the appearance of the navigation bar. Bootstrap provides several variables to modify different aspects of the navbar styling. Navbar Color Customization Variables Here are the key variables you can modify to change your navbar colors − Set Navbar Background The primary background color of the navbar − navbarBackground: #c79810; Set Navbar Background Highlight The gradient highlight color that creates depth in the navbar − navbarBackgroundHighlight: #eab92d; Set Navbar Text ...
Read MoreBootstrap 3 truncate long text inside rows of a table in a responsive way with HTML
To truncate long texts inside rows of a table in a responsive way using Bootstrap 3, we need to combine CSS properties that control text overflow with Bootstrap's responsive grid system. This approach ensures that long text content is properly truncated with ellipsis (...) when it exceeds the available space. CSS for Text Truncation Use the following CSS to create responsive text truncation − .table td.demo { max-width: 177px; } .table td.demo span { overflow: hidden; text-overflow: ellipsis; display: ...
Read MoreHow to detect HTML5 audio MP3 support
To detect HTML5 audio MP3 support, use the Modernizr library. Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser. As stated in the official specification, Modernizr provides comprehensive feature detection capabilities for modern web technologies. For detecting HTML5 audio MP3 support, you can also check the User-Agent to detect which browser is used, though this method is less reliable than feature detection. JavaScript Detection Method You can use JavaScript to test HTML5 audio MP3 support directly − function canPlayMP3() { var audio = document.createElement('audio'); ...
Read MoreHTML5 data-* attribute type casting strings and numbers
HTML5 data-* attributes are always stored as strings, regardless of whether they contain numeric values. To properly work with these values, you need to understand type casting and conversion methods. Understanding data-* Attribute Type Casting When you retrieve values from data attributes using the dataset property, they are always returned as strings. For numeric operations, you'll need to convert them explicitly. Example For data-attribute type casting of Numbers and Strings, use the following approach − Data Attribute Type Casting 6.0 ...
Read MoreHTML5 input type="file" accept="image/*" capture="camera" display as image rather than choose file button
Use the JavaScript FileReader to allow users to choose an image file and display it as an image instead of showing the default file input button. This approach provides a better user experience by giving immediate visual feedback when an image is selected. The HTML5 input element with type="file", accept="image/*", and capture="camera" attributes allows users to select images from their device or capture photos directly from the camera on mobile devices. HTML Structure First, let's create the basic HTML structure with a file input and an image element − ...
Read MoreHow to render thin fonts more smoothly in CSS3 with HTML?
Rendering thin fonts smoothly is crucial for creating visually appealing web interfaces. CSS3 provides several properties that help improve font rendering, especially for thin or light weight fonts that may appear jagged or pixelated on certain displays. Font Smoothing Properties To render thin fonts more smoothly, use the following combination of CSS properties − .smooth-font { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } For Google Chrome For specific optimization in WebKit-based browsers like Google Chrome, use − ...
Read MoreHow to actually work with HTML5 Canvas camera/viewport?
Working with an HTML5 Canvas camera/viewport allows you to display different portions of a larger game world or image. The camera/viewport acts like a window that shows only a specific region of your content, enabling features like scrolling backgrounds and following player characters. Using drawImage() for Viewport Implementation For viewport usage, use the drawImage() method with nine parameters to crop and display specific portions of your background image − Canvas Viewport Example ...
Read More