CSS Styling for Chrome Input Type Number

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 −

Detect Click-to-Call Support in JavaScript

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

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

HTML5 Video Buffering a Certain Portion of a Longer Video

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

729 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);

Why I Cannot Use iframe Absolute Positioning to Set Height & Width

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

498 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%.

Create Div with Irregular Shapes Using CSS3 and HTML5

karthikeya Boyini
Updated on 25-Jun-2020 07:17:00

570 Views

With CSS3, you can always create shapes like rectangle, triangle, etc.Let us see how −The following is a rectangle −#shape1 {    width: 300px;    height: 150px;    background: blue; }The following is a triangle −#shape2 {    width: 0;    height: 0;    border-left: 200px solid transparent;    border-bottom: 200px solid blue; }

Usage of CSS Grid Gap Property

Ankith Reddy
Updated on 25-Jun-2020 07:14:04

109 Views

Set gap between Grid rows and columns with CSS. You can try to run the following code to implement the grid-gap property.ExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-columns: auto auto;             padding: 20px;             grid-gap: 20px 20px;          }          .ele {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

Playing WAV File on iOS Safari

Nancy Den
Updated on 25-Jun-2020 07:13:31

507 Views

To play a WAV file on iOS Safari, add a content-range header.The headers would allow a WAV file to play −Content-Range: bytes XX-XX/XX Content-Type: audio/wav Content-Disposition: attachment; filename = "new.WAV" Content-Length: XXAbove, new.WAV is our WAV file.

Measure Text Height on an HTML5 Canvas Element

George John
Updated on 25-Jun-2020 07:12:51

2K+ Views

To get the text height, set the font in pt −context.font="15pt Calibri";Now, get the height like the following −var height = parseInt(context.font.match(/\d+/), 10);Above we have used a match to separate the font size from font face.

Playing MP4 Video in WebView using HTML5 in Android

Ankith Reddy
Updated on 25-Jun-2020 07:12:13

975 Views

To play MP4 video in WebView, you need to first declare Content Provider in Manifest −Implement open file with open() method −URI myURL = URI.create("file:///mypath/new.mp4"); File f = new File(myURL); ParcelFileDescriptor p =    ParcelFileDescriptor.open(f, ParcelFileDescriptor.MODE_READ_ONLY); return p;

Center Text on an Image with CSS

George John
Updated on 25-Jun-2020 07:11:46

2K+ Views

To positioned text to center an image, use the transform property in CSS. You can try to run the following code for centered text over an imageExampleLive Demo                    .container {             position: relative;          }          .topleft {             position: absolute;             left: 50%;             top: 50%;             transform: translate(-50%, -50%);             font-size: 18px;          }          img {             width: 100%;             height: auto;             opacity: 0.3;          }                     Image Text       Add some text to an image in the center of an image:                          Center          

Advertisements