Found 598 Articles for Front End Scripts

How to handle mousedown and mouseup with HTML5 Canvas

Daniol Thomas
Updated on 27-Jan-2020 10:52:11

821 Views

To handle the mousedown and mouseup event with HTML5 Canvas,var mouseDown = false; // for mousedown canvas1.onmousedown = function(event){    dragOffset.x = event.x - mainLayer.trans.x;    dragOffset.y = event.y - mainLayer.trans.y;    mouseDown = true; } // for mouseup canvas1.onmouseup = function(event){    if(mouseDown) mouseClick(eevent    mouseDown = false; }

Why cannot I use iframe absolute positioning to set height/width

Samual Sam
Updated on 25-Jun-2020 07:17:36

481 Views

iFrames are replaced elements and considered different than non-replaced elements. The element is a non-replaced element.To achieve the same result i.e. to set both the left/right or top/bottom in an iframe, use a div as a wrapper with absolute position, top, left, right, bottom.Place your iframe with −width:100% height:100%.

HTML 5 Video Buffering a certain portion of a longer video

Krantik Chavan
Updated on 25-Jun-2020 07:18:36

704 Views

Use the TimeRanges object in HTML to set a series of non-overlapping ranges of time. You can also set the start and stop time.The following are the properties −length − Length of time ranges.start(index) − start time, in secondsend(index) − end time, in secondsHere is the code snippet showing buffering −// displays 12 myAudio.buffered.start(1); // displays 20 myAudio.buffered.end(1);

Detecting HTML click-to-call support in JavaScript

Ankith Reddy
Updated on 25-Jun-2020 07:19:05

237 Views

The tel: protocol is supported by almost every mobile device nowadays. This includes Safari on iOS, Android Browser, Symbian browser, Opera Mini, etc.Add it like this −if (/(HTC825)/i.test(navigator.userAgent)){    $("a[href^='tel:']").each(function(){       this.href = this.href.replace("tel:", "wtai://wp/mc;");    }); }

Chrome input type=“number” CSS styling

Lakshmi Srinivas
Updated on 25-Jun-2020 07:20:05

1K+ Views

To style input type = number, use the following CSS −input[type=number]::-webkit-inner-spin-button {    -webkit-appearance: none; }The above shows without a spinner.To show and style a spinner, useinput[type=number]::-webkit-inner-spin-button {    opacity: 1; }OutputThe above shows the following output −

Translating HTML5 canvas

Nishtha Thakur
Updated on 25-Jun-2020 07:20:55

388 Views

Use the translate() method to translate canvas. HTML5 canvas provides a translate(x, y) method which is used to move the canvas and its origin to a different point in the grid.Here argument x is the amount the canvas is moved to the left or right, and y is the amount it's moved up or downExample                    #test {             width:100px;             height:100px;             margin:0px auto;          }         ... Read More

Internet Explorer unable to render any kind of background color for the
element.

Samual Sam
Updated on 25-Jun-2020 07:06:55

141 Views

Internet Explorer 11 does not support the element. Add support using Modernizr of the following JS −document.createElement('main');Adding the above element, will not give you the element for the browser, therefore, you need to use the following CSS finally −main {    display:block; }

How to rotate an image with the canvas HTML5 element from the bottom center angle?

Smita Kapse
Updated on 25-Jun-2020 07:06:08

305 Views

Translate the image dimensions to 32, 120 −context.translate(32, 120);Now rotate the canvas −context.rotate(90 * Math.PI/180);Now draw the image −context.drawImage(img, -32, -120, 64, 120);

Align HTML5 SVG to the center of the screen

Chandu yadav
Updated on 25-Jun-2020 07:07:41

3K+ Views

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.ExampleLet us see an example of SVG −                    #svgelem {             position: relative;             left: 50%;             -webkit-transform: translateX(-20%);             -ms-transform: translateX(-20%);             transform: translateX(-20%);          }             SVG                     HTML5 SVG Circle                           To center it, add the CSS like the following −# svgelem {    margin-left:auto;    margin-right:auto;    display:block; }

How to draw sine waves with HTML5 SVG?

Anvi Jain
Updated on 16-Dec-2021 10:30:46

1K+ Views

To draw sine waves with SVG, use the following that closely approximates half of a sine wave. I have used a cubic-bezier approximation. Use the element.Example           SVG                     HTML5 SVG Sine Waves                           Output

Advertisements