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
Articles by Arjun Thakur
Page 17 of 75
Using HTML5 file uploads with AJAX and jQuery
HTML5 provides robust support for file uploads using AJAX and jQuery, allowing you to upload files asynchronously without page refresh. This approach uses the File API to read file contents on the client side and send them to the server via AJAX requests. Syntax Following is the basic syntax for HTML5 file input − JavaScript FileReader API syntax − var reader = new FileReader(); reader.readAsText(file, 'UTF-8'); reader.onload = function(event) { /* handle result */ }; Client-Side Implementation The client-side code captures the file upload process and uses the ...
Read MoreClient Checking file size using HTML5
HTML5 provides a built-in File API that allows client-side file size checking without requiring Flash or server-side processing. This approach improves user experience by validating files before upload and provides immediate feedback to users. The File API is part of the HTML5 specification and is supported by all modern browsers. It allows JavaScript to access file properties including name, size, type, and last modified date through the files property of file input elements. Syntax Following is the basic syntax to access file size using the File API − var fileSize = document.getElementById('fileInput').files[0].size; The ...
Read MoreDrawing an image from a data URL to a HTML5 canvas
When working with HTML5 Canvas, you can draw images from data URLs (base64-encoded images) directly onto the canvas. A data URL contains image data encoded as a string, eliminating the need for external image files. This technique is useful for dynamically generated images or when you need to display images stored as base64 strings. Syntax Following is the basic syntax for creating an image from a data URL − var myImg = new Image(); myImg.src = dataURL; Following is the syntax for drawing the image onto the canvas − context.drawImage(image, x, y); ...
Read MoreHTML cite Attribute
The cite attribute in HTML is used to specify the source URL of a quotation or referenced content. It is commonly used with the and elements to provide a machine-readable reference to the original source, though it is not visually displayed by browsers. Syntax Following is the syntax for the cite attribute with the element − Quoted content here Following is the syntax for the cite attribute with the element − Inline quoted content Here, URL is the web address or ...
Read MoreChange Background color of a web page using onmouseover property
The onmouseover property allows you to execute a script when the mouse pointer is moved onto an HTML element. Combined with the HTML DOM backgroundColor property, it enables dynamic background color changes to create interactive web pages. Syntax Following is the syntax for the onmouseover property − Content Following is the syntax for changing background color using JavaScript − document.body.style.backgroundColor = "colorValue"; Basic Background Color Change The most common approach is to use the onmouseover event directly on an element to change the entire page background color when hovering. ...
Read MoreHow do we display the visible width of a text area in HTML?
The cols attribute in HTML is used to specify the visible width of a element. It defines how many average character widths the textarea should display horizontally before text wraps to the next line. Syntax Following is the syntax for using the cols attribute − Content Here, number represents the visible width in characters. The default value is typically 20 characters if not specified. Using the cols Attribute The cols attribute accepts a positive integer value that determines the textarea's width. A higher value creates a wider textarea, while a lower ...
Read MoreCreate a paragraph with a right-to-left direction in HTML5
The dir attribute in HTML sets the text direction for an element's content. To create a paragraph with right-to-left direction, use dir="rtl" on the paragraph element. This is particularly useful for languages like Arabic, Hebrew, Persian, and Urdu that are naturally written from right to left. Syntax Following is the syntax for creating a right-to-left paragraph using the dir attribute − Your text content here The dir attribute accepts three values − rtl − Sets text direction from right to left ltr − Sets text direction from left to right (default) auto ...
Read MoreSolve unknown gap between elements in Flexbox with HTML5.
Unknown gaps between elements in flexbox containers often occur due to margin collapsing between adjacent elements, particularly when a header element's margin collapses with its sibling container. This creates unexpected whitespace that can disrupt your layout design. Understanding the Problem Margin collapsing happens when vertical margins of adjacent block elements combine into a single margin. In flexbox layouts, this commonly occurs between a header element and a container div, causing an unwanted gap that appears to come from nowhere. Margin Collapsing Issue Header with margin ...
Read MoreHow do we add a push button to HTML?
Use the tag in HTML to add a push button. The HTML tag is used for creating a button within HTML forms or as standalone interactive elements. You can also use the tag to create similar buttons, but the tag offers more flexibility as it can contain HTML content like images, text formatting, and other elements. Syntax Following is the basic syntax for the tag − Button Content The button content can be plain text, HTML elements, or a combination of both. Button ...
Read MoreHTML DOM Address Object
The HTML DOM Address Object represents the element in HTML. The element is used to define contact information for the author or owner of a document or article. The Address Object provides properties and methods to create, access, and manipulate address elements using JavaScript. Syntax To create an Address Object using JavaScript − document.createElement("address") To access an existing address element − document.getElementById("addressId") Properties The Address Object supports all standard HTML DOM properties like innerHTML, textContent, style, and event handlers. It inherits properties from the HTMLElement interface. ...
Read More