Found 8591 Articles for Front End Technology

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% }

Get pixel color from canvas with HTML

Arjun Thakur
Updated on 04-Mar-2020 06:30:51

347 Views

To get the pixel color from canvas, use the following code. This returns the color in rgba −var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4 // color in rgba var r = data[index] var g = data[index + 1] var b = data[index + 2] var a = data[index + 3]

Not showing a placeholder for input type=“date” field with HTML5. How to solve it?

Giri Raju
Updated on 04-Mar-2020 06:30:07

4K+ Views

To show it, use the following −You can also go for CSS −input[type="date"]::before{    color: #ffffff;    content: attr(placeholder) ": "; } input[type="date"]:focus::before {    content: "" !important; }

Place autofocus in the text box when a page gets loaded without JavaScript support in HTML?

George John
Updated on 04-Jun-2020 08:25:53

170 Views

The autofocus attribute is a boolean attribute. When present, it specifies that an element should automatically get focus when the page loads. An example is given below                    First Name:          Last Name:                    

Animating canvas to infinitely animate the noise to give the appearance of movement in HTML

karthikeya Boyini
Updated on 04-Mar-2020 06:28:48

127 Views

The putImageData() method places the image data onto the canvas. To animate canvas, we create a reusable ImageData object outside the main loop,var ct = c.getContext("2d", {alpha: false});       // context without alpha channel. var a = ct.createImageData(c.width, c.height);   var buffer = new Uint32Array(a.data.buffer);   function loop() {    noise(ct);    requestAnimationFrame(loop) })() function noise(ct) {    var l =buffer.length - 1;    while(l--) buffer[l] = Math.random() >0;    ct.putImageData(a, 0, 0); }

Style options for the HTML5 Date picker

mkotla
Updated on 02-Jun-2020 09:20:33

2K+ Views

The date picker in HTML5 basically works very similar to how the JavaScript Libraries did, when we focus on the field a calendar will pop out, and then we can navigate through the months and years to select the date.Therefore, if you want the date input to use more spacing and a color scheme you could add the following to your code.::-webkit-datetime-edit { padding: 2 em; } ::-webkit-datetime-edit-fields-wrapper { background:green; } ::-webkit-datetime-edit-text { color: blue; padding: 0 0.3em; } ::-webkit-datetime-edit-month-field { color: red; } ::-webkit-datetime-edit-day-field { color: orange; } ::-webkit-datetime-edit-year-field { color: red; }

Is there a way to add/remove several classes in one single instruction with classList in HTML and JavaScript?

Samual Sam
Updated on 24-Jun-2020 14:13:58

207 Views

The classList property returns the class name(s) of an element, as a DOMTokenList object. The classList property is read-only, however, you can modify it by using the add() and remove() methods.The classListproperty ensures that duplicate classes are not unnecessarily added to the element. In order to keep this functionality, if you dislike the longhand versions or jQuery version, I’d suggest adding addMany function and removeMany to DOMTokenListThese would then be useable like so −DOMTokenList.prototype.addMany = function(classes) {    var arr = classes.split(' ');    for (var j = 0, length = arr.length; j < length; j++) {       this.add(array[j]); ... Read More

Change colour of an image drawn on an HTML5 canvas element.

radhakrishna
Updated on 22-Nov-2023 04:29:00

2K+ Views

In order to change colour of image drawn on an HTML5 Canvas element, you can try to run the following code. Use the drawImage() method − Example: Code to change color of image function display(img1, red, gr, bl) { //func to change color of image     var canvas1 = document.createElement('canvas');//canvas element initialisation canvas1.width = img.width;//canvas width initialisation     canvas1.height = img.height; //canvas height initialisation var ctx1 = canvas1.getContext('2d');     ctx1.drawImage(img, 0, 0); var myImg =ctx1.getImageData(0, 0, canvas1.width, canvas1.height); for (var t=0;t< myImg.data.length;t+=4) {            myImg.data[t]= red | myImg.data[t]; ... Read More

Advertisements