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 23 of 47
Convert coordinates to a place name with HTML5
For this, use Google Maps API to perform reverse geocoding. Geocoding refers to translating a human-readable address into a location on a map. The process of doing the converse, translating a location on the map into a human-readable address, is known as reverse geocoding. Getting User Location with HTML5 First, we'll use HTML5 Geolocation API to get the user's current coordinates: function getUserLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { ...
Read MoreSet Inset border with CSS
To set inset border with CSS, use the border-style property with value inset. The inset border style creates a 3D effect that makes the element appear pressed into the page. Syntax border-style: inset; /* or for specific sides */ border-top-style: inset; border-right-style: inset; border-bottom-style: inset; border-left-style: inset; Example .no-border { border-width: 4px; border-style: ...
Read MoreHTML5 Geolocation in Safari 5
HTML5 Geolocation API lets you share your location with your favorite web sites. A JavaScript can capture your latitude and longitude, can be sent to backend web server, and do fancy location-aware things like finding local businesses or showing your location on a map. How Geolocation Works The Geolocation API uses navigator.geolocation to access device location. It requires user permission and works through GPS, WiFi, or IP-based positioning. Basic Syntax navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options); Example: Getting Current Position Here's how to get the user's current location: ...
Read MoreHow to set the CSS margin properties in one declaration?
The margin property defines the space around an HTML element. It is possible to use negative values to overlap content. It specifies a shorthand property for setting the margin properties in one declaration. Syntax margin: value; margin: top right bottom left; margin: top horizontal bottom; margin: vertical horizontal; Margin Value Patterns The margin property accepts 1 to 4 values with different behaviors: Values Result Example 1 value All sides same margin: 20px 2 values vertical | horizontal margin: 10px 5px 3 values top | horizontal ...
Read MorePerform basic HTML5 Canvas animation
HTML5 canvas provides the necessary methods to draw and manipulate graphics dynamically. Combined with JavaScript, we can create smooth animations by continuously redrawing the canvas content at regular intervals. How Canvas Animation Works Canvas animation involves three key steps: Clear the canvas - Remove previous frame content Draw new content - Render the updated animation frame Repeat - Use timers to create continuous motion Basic Rotating Image Animation Here's a complete example that rotates an image around the canvas center: ...
Read MoreHTML5 Audio to Play Randomly
HTML5 Audio API allows you to play audio files randomly by combining JavaScript arrays with the Math.random() method. This technique is useful for music players, games, or any application requiring random audio playback. Setting Up the Audio Collection First, initialize an array of audio sources. Each song should be added to the collection using the init() function: init ([ 'http://demo.com/songs/song1.mp3', 'http://demo.com/songs/song2.mp3', 'http://demo.com/songs/song3.mp3' ]); Complete Random Audio Player Implementation Here's a complete example that creates audio objects and implements random playback: ...
Read MoreSet Outset border with CSS
To set an outset border with CSS, use the border-style property with the value outset. An outset border creates a 3D effect that makes the element appear raised or protruding from the page. Syntax border-style: outset; /* Or combine with width and color */ border: width outset color; Example Outset Border Example This paragraph has no border. ...
Read MoreRotate HTML5 Canvas around the current origin
HTML5 canvas provides the rotate(angle) method which rotates the canvas around the current origin point. This method is essential for creating rotated graphics and animations. Syntax context.rotate(angle); Parameters The method takes one parameter: angle: The rotation angle in radians (clockwise direction) To convert degrees to radians, use: radians = degrees * (Math.PI / 180) Basic Rotation Example Here's a simple example showing how to rotate a rectangle: canvas { ...
Read MoreChange the width of the bottom border with CSS
The border-bottom-width CSS property controls the thickness of an element's bottom border. This property only works when a border style is defined, as borders are invisible by default. Syntax border-bottom-width: value; Common values include thin, medium, thick, or specific measurements like 1px, 5px, 0.5em. Example This is demo content with a 6px bottom border. ...
Read MoreCSS only Animate - Draw Circle with border-radius and transparent background
CSS animations can create impressive visual effects, including drawing animated circles with transparent backgrounds. This technique uses border-radius and keyframe animations to create a smooth circle-drawing effect. Basic Circle Structure The animation uses multiple div elements to create the drawing effect. The main container holds two half-circles that rotate to simulate drawing: CSS Animation Styles The CSS creates the drawing effect using transforms, opacity changes, and border properties: body { ...
Read More