Found 10483 Articles for Web Development

Make a star shape with HTML5 SVG

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

1K+ 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

314 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 https://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

362 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.

Commonly used Video formats while using HTML5 video

Yaswanth Varma
Updated on 11-Oct-2023 16:47:36

501 Views

The HTML element embeds a media player which supports video playback into the document. You can use for audio content as well, but the element may provide a more appropriate user experience. HTML5 tag is a fantastic addition. Instead of relying on a plugin like Flash, it makes it possible to playback video natively in all of the most recent browsers. It makes web video accessible to hardware that doesn't support Flash. Additionally, it makes codecs playable on the web that weren't before. Let’s jump into the article to discuss more about commonly used video formats ... Read More

Attributes and usage of

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

850 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

181 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

169 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 include Modernizr in HTML document?

Yaswanth Varma
Updated on 11-Oct-2023 16:48:46

2K+ Views

Modernizr provides an easy way to detect any new feature so that you can take the corresponding action. For example, if a browser does not support video feature then you would like to display a simple page. You can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if the browser does not support a new feature. Modernizr is a small JavaScript Library that detects the availability of native implementations for next-generation web technologies. There are several new features which are being introduced through HTML5 and CSS3 but same time many browsers ... Read More

How to check web browser support in HTML5

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

261 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

674 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...." );          }                        

Advertisements