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 15 of 47
World Map on HTML5 Canvas or SVG
Creating interactive world maps in web browsers can be accomplished using SVG with libraries like Raphael.js or using HTML5 Canvas. This tutorial demonstrates both approaches for rendering world maps. Using SVG with Raphael.js Raphael.js is a JavaScript library that simplifies working with vector graphics in web browsers. Here's how to get started: // Create Raphael paper (canvas) var paper = Raphael("world-map", 800, 400); // Drawing basic shapes for map elements var circle = paper.circle(50, 40, 10); circle.attr("fill", "#f00"); circle.attr("stroke", "#fff"); // Create a simple country shape using path var country ...
Read MoreSet the font weight with CSS
The font-weight property controls how bold or light text appears. It accepts keyword values like normal and bold, or numeric values from 100 to 900. Syntax font-weight: normal | bold | bolder | lighter | 100-900; Font Weight Values Value Description Numeric Equivalent normal Regular text weight 400 bold Bold text weight 700 bolder Bolder than parent element Relative lighter Lighter than parent element Relative Example: Different Font Weights Font Weight Example ...
Read MoreWhich browsers support the HTML5 History API?
The HTML5 History API allows web applications to manipulate browser history programmatically, enabling single-page applications to update URLs without full page reloads. Understanding browser support is crucial for implementing this feature effectively. Browser Support Overview The HTML5 History API is now widely supported across modern browsers. WebKit-based browsers and Firefox 4 were among the first to implement this feature, but support has expanded significantly since then. Supported Browsers Firefox: Version 4 and above Google Chrome: All versions (since Chrome 5) Internet Explorer: Version ...
Read MoreSet the font size with CSS
The font-size property in CSS controls the size of text in your web pages. You can specify font sizes using various units and keyword values to create visual hierarchy and improve readability. Syntax font-size: value; Font Size Values The font-size property accepts several types of values: Keywords: xx-small, x-small, small, medium, large, x-large, xx-large Relative keywords: smaller, larger Units: pixels (px), percentages (%), em, rem Example: Different Font Size Values Font Size Examples This font ...
Read MoreHow to save HTML5 canvas data to file?
HTML5 canvas provides several methods to save canvas data to files. The approach depends on whether you're working in a browser or Node.js environment. Method 1: Browser Environment - Download as File In browsers, use toDataURL() or toBlob() to convert canvas data and trigger a download: Canvas Save Example Save Canvas // Draw something on canvas ...
Read MoreHow to get a key/value data set from a HTML form?
To get key/value data from an HTML form, you can use several approaches including jQuery's serializeArray(), vanilla JavaScript with FormData, or manual field extraction. HTML Form Example Let's start with a sample HTML form: Using jQuery serializeArray() jQuery's serializeArray() returns an array of objects with name and value properties: // Using jQuery serializeArray() var data = $('#form1').serializeArray(); console.log(data); // Convert ...
Read MoreSet the font family with CSS
The font-family property is used to change the face of a font. You can specify multiple font names as fallbacks, and the browser will use the first available font from the list. Syntax font-family: "font-name", fallback-font, generic-family; Example: Setting Font Family This text is rendered in either georgia, garamond, or the default serif font depending ...
Read MoreHow to either determine SVG text box width or force line breaks after 'x' characters?
When working with SVG text elements, you often need to control text wrapping since SVG doesn't automatically wrap text like HTML. This tutorial shows how to measure text width using getBBox() and implement word wrapping. The Problem SVG text elements don't wrap automatically. Long text will extend beyond boundaries, requiring manual line breaks based on width measurements. Using getBBox() for Text Measurement The getBBox() method returns the bounding box dimensions of SVG elements, including text width and height. ...
Read MoreHow to "enable" HTML5 elements in IE 8 that were inserted by AJAX call?
To enable HTML5 elements in IE 8 that were inserted by AJAX calls, you need to use plugins like html5shiv and manually create elements using document.createElement. The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9. The Problem IE 8 doesn't recognize HTML5 elements like , , or . When these elements are inserted via AJAX, they won't render properly even with html5shiv loaded. Solution: Manual Element Creation You need to call document.createElement for each HTML5 element before inserting AJAX content: ...
Read MoreFont size adjust of an element with CSS
The font-size-adjust CSS property enables you to adjust the x-height to make fonts more legible when fallback fonts are used. It helps maintain consistent visual font sizes across different font families. Syntax font-size-adjust: none | number; Parameters none - Default value. No font size adjustment. number - A positive number that specifies the aspect ratio (x-height divided by font size). How It Works The property calculates: adjusted font size = specified font size × (font-size-adjust value ÷ aspect ratio of actual font) ...
Read More