Found 598 Articles for Front End Scripts

An empty box is displayed instead of the rupee symbol in HTML

Samual Sam
Updated on 29-Jan-2020 08:11:00

233 Views

The rupee symbol is the following and not every browser supports it:₹To make it visible on your web page: You can use the following as well:₹

How to adopt a flex div's width to content in HTML?

Lakshmi Srinivas
Updated on 29-Jan-2020 08:10:22

317 Views

Use display: inline-flex to adopt a flex div’s width to content:#box {    display: inline-flex;    flex-direction: row;    flex-wrap: wrap;    max-width: 200px;    padding: 10px;    margin: 20px;    background-color: blue; }

Update HTML5 canvas rectangle on hover

Daniol Thomas
Updated on 29-Jan-2020 08:09:58

626 Views

To update HTML5 canvas rectangle on hover, try to run the following code:var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.rect(20,20,150,100); context.stroke(); $(canvas).hover(function(e){    context.fillStyle = blue;    context.fill(); });

Layers of canvas fabric.js

karthikeya Boyini
Updated on 16-Jun-2020 13:51:07

1K+ Views

FabricJS has the following API methods that change the z-index of objects:canvas.sendBackwards(myObject) canvas.sendToBack(myObject) canvas.bringForward(myObject) canvas.bringToFront(myObject)You can also use:fabric.Canvas.prototype.orderObjects = function(compare) {    this._objects.sort(compare);    this.renderAll(); }

Unicode Byte Order Mark (BOM) character in HTML5 document.

Samual Sam
Updated on 30-Jul-2019 22:30:22

669 Views

A byte order mark (BOM) consists of the character code U+FEFF at the beginning of a data stream, where it can be used as a signature defining the byte order and encoding form, primarily of unmarked plaintext files.Many Windows programs (including Windows Notepad) add the bytes 0xEF, 0xBB, 0xBF at the start of any document saved as UTF-8. This is the UTF-8 encoding of the Unicode byte order mark (BOM), and is commonly referred to as a UTF-8 BOM even though it is not relevant to byte order.For HTML5 document, you can use a Unicode Byte Order Mark (BOM) character ... Read More

How to create multi-column layout in HTML5 using tables?

Nishtha Thakur
Updated on 29-Jan-2020 08:09:25

919 Views

Design your webpage to put your web content on multiple pages. You can keep your content in the middle column, you can use left column to use menu, and right column can be used to put an advertisement or some other stuff.Example           Three Column HTML Layout                                                    Main Menu                HTML                PHP                PERL...                                        Technical and Managerial Tutorials                                        Right Menu                HTML                PHP                PERL...                                

Special Characters in HTML

Smita Kapse
Updated on 29-Jan-2020 07:30:58

6K+ Views

Some characters are reserved in HTML and they have special meaning when used in HTML document. For example, you cannot use the greater than and less than signs or angle brackets within your HTML text because the browser will treat them differently and will try to draw a meaning related to HTML tag.HTML processors must support following five special characters listed in the table that follows.SymbolDescriptionEntity NameNumber Code "quotation mark""'apostrophe''&ersand&&greater-than>>

Features detected by Modernizr

Jennifer Nicholas
Updated on 04-Mar-2020 08:16:00

601 Views

The following is the list of features that can be detected by Modernizr −FeatureCSS PropertyJavaScript Check@font-face.fontfaceModernizr.fontfaceCanvas.canvasModernizr.canvasCanvas Text.canvastextModernizr.canvastextHTML5 Audio.audioModernizr.audioHTML5 Audio formatsNAModernizr.audio[format]HTML5 Video.videoModernizr.videoHTML5 Video FormatsNAModernizr.video[format]rgba().rgbaModernizr.rgbahsla().hslaModernizr.hslaborder-image.borderimageModernizr.borderimageborder-radius.borderradiusModernizr.borderradiusbox-shadow.boxshadowModernizr.boxshadowMultiple backgrounds.multiplebgsModernizr.multiplebgsOpacity.opacityModernizr.opacityCSS Animations.cssanimationsModernizr.cssanimationsCSS Columns.csscolumnsModernizr.csscolumnsCSS Gradients.cssgradientsModernizr.cssgradientsCSS Reflections.cssreflectionsModernizr.cssreflectionsCSS 2D Transforms.csstransformsModernizr.csstransformsCSS 3D Transforms.csstransforms3dModernizr.csstransforms3dCSS Transitions.csstransitionsModernizr.csstransitionsGeolocation API.geolocationModernizr.geolocationInput TypesNAModernizr.inputtypes[type]Input AttributesNAModernizr.input[attribute]localStorage.localstorageModernizr.localstoragesessionStorage.sessionstorageModernizr.sessionstorageWeb Workers.webworkersModernizr.webworkersapplicationCache.applicationcacheModernizr.applicationcacheSVG.svgModernizr.svgSVG Clip Paths.svgclippathsModernizr.svgclippathsSMIL.smilModernizr.smilWeb SQL Database.websqldatabaseModernizr.websqldatabaseIndexedDB.indexeddbModernizr.indexeddbWeb Sockets.websocketsModernizr.websocketsHashchange Event.hashchangeModernizr.hashchangeHistory Management.historymanagementModernizr.historymanagementDrag and Drop.draganddropModernizr.draganddropCross-window Messaging.crosswindowmessagingModernizr.crosswindowmessagingaddTest() Plugin APINAModernizr.addTest(str, fn)Read More

Example of Event Handlers in HTML5 CORS

Vrundesha Joshi
Updated on 29-Jan-2020 07:27:21

186 Views

Cross-origin resource sharing (CORS) is a mechanism to allows the restricted resources from another domain in a web browserFor suppose, if you click on HTML5- video player in html5 demo sections. It will ask camera permission. If the user allows the permission then only it will open the camera or else it doesn't open the camera for web applications.The following is an example of event handlers in CORS:xhr.onload = function() {    var responseText = xhr.responseText;    // process the response.    console.log(responseText); }; xhr.onerror = function() {    console.log('There was an error!'); };

Two way communication between the browsing contexts in HTML5

Rishi Rathor
Updated on 29-Jan-2020 07:26:39

364 Views

Two-way communication between the browsing contexts is called channel messaging. It is useful for communication across multiple origins.While creating messageChannel, it internally creates two ports to send the data and forwarded to another browsing context.postMessage() − Post the message throw channelstart() − It sends the dataclose() − it close the portsIn this scenario, we are sending the data from one iframe to another iframe. Here we are invoking the data in function and passing the data to DOM.var loadHandler = function(){    var mc, portMessageHandler;    mc = new MessageChannel();    window.parent.postMessage('documentAHasLoaded', 'http://foo.example', [mc.port2]);    portMessageHandler = function(portMsgEvent){     ... Read More

Advertisements