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
Front End Scripts Articles
Page 17 of 47
Cross domain HTML5 iframe issue
Cross-domain iframe communication is restricted by the Same-Origin Policy for security. The postMessage method provides a safe way to transfer data between different domains in HTML5. The Cross-Domain Problem When an iframe loads content from a different domain, direct JavaScript access is blocked: // This will throw a security error let iframeContent = document.getElementById('myIframe').contentDocument; // Error: Blocked by CORS policy Solution: Using postMessage The postMessage API allows secure communication between different origins. Syntax targetWindow.postMessage(message, targetOrigin); Parameters message - Data to send (string, object, etc.) targetOrigin - ...
Read MoreUnderline text with CSS
Use the text-decoration property to underline text with CSS. This property provides several options for decorating text, with underline being one of the most commonly used values. Syntax text-decoration: underline; Basic Example India Different Underline Styles You can customize the underline appearance using additional properties: ...
Read MoreHow to make the web page height to fit screen height with HTML?
To make a web page height fit the screen height, you have several CSS approaches. Each method has different use cases and browser compatibility considerations. Method 1: Using Percentage Heights Set both html and body elements to 100% height to establish the full viewport height foundation: html, body { height: 100%; margin: 0; ...
Read MoreStrikethrough text with CSS
Use the text-decoration property to create strikethrough text with CSS. The line-through value draws a horizontal line through the middle of the text. Syntax text-decoration: line-through; Basic Example This text will be striked through. Using CSS Classes For better organization, use CSS classes instead of inline styles: ...
Read MoreEnable rear camera with HTML5
To enable the rear camera in HTML5, you need to access the device's camera sources and specify which camera to use. This is particularly useful on mobile devices that have both front and rear cameras. Getting Available Camera Sources First, use the MediaDevices.enumerateDevices() method to get all available media devices: Rear Camera Access Start Rear Camera async function getRearCamera() { ...
Read MoreGetting Tooltips for mobile browsers in HTML
Mobile browsers don't display tooltips on hover since there's no mouse cursor. This tutorial shows how to create touch-friendly tooltips using jQuery that appear on tap. The Problem with Mobile Tooltips The HTML title attribute creates tooltips on desktop browsers when you hover over an element. However, mobile devices don't have hover states, so these tooltips are inaccessible to mobile users. HTML Structure Start with a basic HTML element that has a title attribute: The underlined character. jQuery Implementation This jQuery code creates a tap-to-toggle tooltip ...
Read MoreConvert text to uppercase with CSS
To convert text to uppercase with CSS, use the text-transform property with the value uppercase. This property transforms the visual appearance of text without modifying the actual content. Syntax text-transform: uppercase; Example Here's how to convert text to uppercase using CSS: .uppercase-text { text-transform: uppercase; } ...
Read MoreCross-origin data in HTML5 Canvas
When working with HTML5 Canvas, you may encounter cross-origin restrictions when trying to draw images, videos, or other media from different domains. This security feature prevents potential data leaks but can be managed using proper CORS configuration. What is Cross-Origin Data in Canvas? Cross-origin data refers to resources (images, videos, audio) loaded from a different domain than your web page. When you draw such content onto a canvas, the canvas becomes "tainted" and restricts certain operations like toDataURL() or getImageData() for security reasons. Using the crossorigin Attribute Add the crossorigin attribute to HTML elements to request ...
Read MoreUsage of text-align property in CSS
The text-align property in CSS controls the horizontal alignment of text content within its container. It accepts several values to position text left, right, center, or justify it across the available width. Syntax text-align: left | right | center | justify | start | end; Property Values Value Description left Aligns text to the left (default) right Aligns text to the right center Centers text horizontally justify Stretches text to fill the full width Example Here's how to use different ...
Read MoreIs there any way of moving to HTML 5 and still promise multi browser compatibility?
Yes, you can migrate to HTML5 while maintaining multi-browser compatibility by following a progressive enhancement approach. Key Strategies for HTML5 Compatibility Move to the HTML5 doctype: Use or new semantic elements like , , For multimedia, use newer HTML5 tags like or with fallbacks to the older tag HTML5 form controls have built-in backward compatibility. For example, works the same as in browsers that don't support it Example: Progressive Enhancement with ...
Read More