Found 10483 Articles for Web Development

Facing Problem in retrieving HTML5 video duration

Chandu yadav
Updated on 24-Jun-2020 14:17:58

459 Views

To get the video duration, query the readyState attribute. It has a series from 0 to 4. When the metadata has loaded, the value you will get is 1.Therefore, you need to do something like −window.setInterval(function(tm) {    // Using readyState attriute    if (video.readyState > 0) {       var duration = $('#duration').get(0);       // for video duration       var video_duration = Math.round(video.duration);       duration.firstChild.nodeValue = video_duration;       clearInterval(tm);    } },1000);

Any way of using frames in HTML5?

Rishi Rathor
Updated on 27-Jan-2020 06:13:43

225 Views

The frameset attribute deprecated in HTML, but you can still use it. The top-level parent doc now usesExampleXHTML and the frame uses HTML5.                            

What is the usage of the cross-origin attribute in HTML5?

Arjun Thakur
Updated on 24-Jun-2020 14:18:46

298 Views

The official specification states cross-origin attribute as −The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.When it is combined with CORS header, it would allow images defined by the element, loaded from foreign origins to be used in canvas. The procedure would be like being loaded from the current origin.You can use it to solve JavaScript errors like to log js errors −if (securityOrigin()->canRequest(targetUrl)) {    msg = myError;    line = myLineNumber;    source = sourceURL; } else {    msg = "Error!";    source = String();    line = 0; }

Remember and Repopulate File Input in HTML5

Nancy Den
Updated on 24-Jun-2020 14:19:24

333 Views

To repopulate, use the drag and drop. This was not possible before, but now it is valid.Let us see how −function drop(ev) {    ev.stopPropagation();    ev.preventDefault();      // retrieving dataTransfer field from the event    var d = ev.dataTransfer;    var files = d.files;    handleFiles(files); }For drag and drop −// dragging target.addEventListener('dragover', (ev) => {    ev.preventDefault();    body.classList.add('dragging'); }); // drag leave target.addEventListener('dragleave', () => {    body.classList.remove('dragging'); }); // drop target target.addEventListener('drop', (ev) => {    ev.preventDefault();    body.classList.remove('dragging'); });

Are new HTML5 elements like
and

Chandu yadav
Updated on 27-Jan-2020 06:11:15

146 Views

The elements and are useful for screenreaders as well and help visually impaired users in reading the content of your web page. These are beneficial for eBook readers as well.Let us see how to work with both the elements.           HTML Section Tag                        Java          Inheritance          Inheritance defines the relationship between superclass and subclass.                              Learning          Learn to gain experience and try to share your knowledge with others.                       Web Development Tutorials             Consist of CSS, HTML, and PHP tutorials for 2nd Semester exams.                                 Academic Tutorials             Consist of Computer Fundamental, Computer Network tutorials for             1st Semester exams.                    

HTML5 Canvas to PNG File

Daniol Thomas
Updated on 24-Jun-2020 14:20:32

847 Views

To convert HTML5 canvas to PNG, follow the below-given steps −You need to add the generated data URL to the href attribute of an tag.Dialog for base64 image −Add a filename −Now define http headers −headers=Content-Disposition: attachment; filename=newimg.pngTo deal with the RAM of the web browser and make its utilization less −// generated the data URL dynamically function myCanvas() {    var d = canvas.toDataURL('image/png');    this.href = d; }; d.addEventListener('click', myCanvas, false);

Apply style to the parent if it has a child with CSS and HTML

mkotla
Updated on 25-Jun-2020 08:07:06

661 Views

Parent selectors are not present in CSS3. There is a proposed CSS4 selector, $, to do so, which could look like this (Selecting the li element) −ul $li ul.sub { ... }As an alternative, with jQuery, a one-liner you could make use of would be this. The: has() selector selects all elements that have one or more elements inside of them, that matches the specified selector. The tag defines a list item. The tag defines an unordered (bulleted) list.$('ul li:has(ul.sub)').addClass('has_sub');You could then style the li.has_sub in your CSS.

Prevent iPhone from zooming in web-app with HTML

Samual Sam
Updated on 04-Mar-2020 06:33:06

9K+ Views

Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere.  Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior. However, some might argue that this is not a very user-friendly way to handle the problem.The element, used along with one or more elements, creates a drop-down list of options for a web form. The element creates the list and each element is ... Read More

HTML 5 versus XHTML 1.0 Transitional

varun
Updated on 04-Jun-2020 08:25:09

241 Views

HTML is expressed as SGML and XHTML is expressed in XML. Creating XHTML is connected with more restrictions in the form of markup.Avoid using the or tags in XHTML 1.0 Transitional, as those are not an element of that specification.Convert from HTML to XHTMLAdd an XHTML to the first line of every pageAdd a xmlns attribute to the HTML element of every pageChange all element names to lowercaseClose all empty elementsChange all attribute names to lowercaseQuote all attribute values

How to make the main content div fill height of screen with CSS and HTML

Lakshmi Srinivas
Updated on 04-Mar-2020 06:31:24

438 Views

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).In the below-given example, no height is specified in percentage and no jQuery is needed.mainbody{      position: absolute;//here we are setting the position of an element as absolute    top: 30px; /* here we are defining Header Height to 30 px */    bottom: 10px; /*here we are defining  Footer Height to 10 px */    width: 100%;// here we are setting the width to 100% }

Advertisements