Found 601 Articles for Front End Scripts

Make a star shape with HTML5 SVG

Lakshmi Srinivas
Updated on 16-Dec-2021 09:39:31

938 Views

Here is the HTML5 version of an SVG example that would draw a star using the tag.                    #svgelem{             position: relative;             left: 50%;             -webkit-transform: translateX(-40%);             -ms-transform: translateX(-40%);             transform: translateX(-40%);          }             SVG                     HTML5 SVG Star                       Output

Input type URL in HTML5

Nancy Den
Updated on 29-Jan-2020 08:38:28

200 Views

This accepts only URL value in HTML5. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.qries.com format or in http://qries.com format.                    Enter URL :                    

Creating custom attributes with HTML5

karthikeya Boyini
Updated on 29-Jan-2020 08:38:59

290 Views

A new feature introduced in HTML 5 is the addition of custom data attributes.A custom data attribute starts with data- and would be named based on your requirement.    ... The above will be perfectly valid HTML5 with two custom attributes called data-subject and data-level. You would be able to get the values of these attributes using JavaScript APIs or CSS in a similar way as you get for standard attributes.

Attributes and usage of

Krantik Chavan
Updated on 29-Jan-2020 08:40:07

547 Views

The HTML5 and tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control:sr. No.Attribute & Description1AutoplayThis boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.2AutobufferThis boolean attribute if specified, the video will automatically begin buffering ... Read More

How to detect a particular feature through JavaScript with HTML

Nishtha Thakur
Updated on 29-Jan-2020 08:37:27

125 Views

Use Modernizr in HTML to detect a feature like audio through JavaScript:if (Modernizr.audio) {    /* properties for browsers that    support audio */ } else{    /* properties for browsers that    does not support audio */ }

Using Modernizr to detect HTML5 features

Samual Sam
Updated on 04-Mar-2020 10:11:29

111 Views

Modernizr is a small JavaScript Library that detects the availability of native implementations for next-generation web technologies.Here 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-radiusbox-shadow.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.localstorageessionStorage.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

How to check web browser support in HTML5

Smita Kapse
Updated on 29-Jan-2020 08:35:39

146 Views

You can try to run the following code to detect a web worker feature available in a web browser:           Big for loop                      function myFunction(){             if (Modernizr.webworkers) {                alert("Congratulations!! You have web workers support." );             } else{                alert("Sorry!! You do not have web workers support." );             }          }                     Click me     The following is the result:

Log error to console with Web Workers in HTML5

karthikeya Boyini
Updated on 29-Jan-2020 08:34:25

436 Views

Here is an example of an error handling function in a Web Worker JavaScript file that logs errors to the console.ExampleWith error handling code, above example would become like the following:           Big for loop                var worker = new Worker('bigLoop.js');          worker.onmessage = function (event) {             alert("Completed " + event.data + "iterations" );          };          worker.onerror = function (event) {             console.log(event.message, event);          };          function sayHello(){             alert("Hello sir...." );          }                        

Why HTML5 Web Workers are useful?

Anvi Jain
Updated on 29-Jan-2020 08:33:46

104 Views

JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time. Consider a situation where you need to handle UI events, query and process large amounts of API data, and manipulate the DOM.JavaScript will hang your browser in situation where CPU utilization is high. Let us take a simple example where Javascript goes through a big loop:           Big for loop                function bigLoop(){             for (var i = 0; i

Difference between dragenter and dragover event in HTML5

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

291 Views

dragenterThe dragenter event is used to determine whether the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled.dragoverThe dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value.

Advertisements