Found 2202 Articles for HTML

Bootstrap Form select

Samual Sam
Updated on 12-Jun-2020 13:55:03

390 Views

A select is used when you want to allow the user to pick from multiple options, but by default, it only allows one.Use for list options with which the user is familiar, such as states or numbers.Use multiple = "multiple" to allow the users to select more than one option.ExampleYou can try to run the following code to implement Bootstrap form selectLive Demo           Bootstrap Example                                                             Country                            India                Australia                US                                

Bootstrap Validation States

Lakshmi Srinivas
Updated on 12-Jun-2020 13:58:42

416 Views

Bootstrap includes validation styles for errors, warnings, and success messages. To use, simply add the appropriate class (.has-warning, .has-error, or .has-success) to the parent element.ExampleYou can try to run the following code to implement the validation statesLive  Demo           Bootstrap Example                                                       Focused                                                                         Disabled                                                                                                           Disabled input (Fieldset disabled)                                                                                                                             Disabled select menu (Fieldset disabled)                                                                        Disabled select                                                                                              Input with success                                                                                                    Input with warning                                                                                                    Input with error                                                                        

Bootstrap Contextual classes

Arjun Thakur
Updated on 12-Jun-2020 12:53:55

2K+ Views

The Bootstrap Contextual Class allows you to change the background color of your table rows or individual cells.The following are the classes −ClassDescription.activeApplies the hover color to a particular row or cell.successIndicates a successful or positive action.warningIndicates a warning that might need attention.dangerIndicates a dangerous or potentially negative actionExampleThe following is an example of the active class −ExampleLive Demo           Bootstrap Table                                                                      Subject                Marks                Student                                                            Maths                90                Amit                                        Science                80                Aman                                        English                85                Rahul                                

Usage of CSS grid-auto-flow property

radhakrishna
Updated on 25-Jun-2020 13:18:24

116 Views

Use the grid-auto-flow property to include auto-placed items in the grid.ExampleYou can try to run the following code to implement the grid-auto-flow property with CSS −Live Demo                    .container {             display: grid;             grid-auto-columns: 50px;             grid-auto-flow: column;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

CSS nav-up property

Lakshmi Srinivas
Updated on 25-Jun-2020 11:42:28

219 Views

The nav-up property is used to move up when you have pressed on up arrow button in the keypad. You can try to run the following code to implement the CSS nav-up propertyExampleLive Demo                    button {             position: absolute;          }          button#btn1 {             top: 10%;             left: 15%;             nav-index: 1;             nav-right: #btn2;             nav-left: #btn4;             nav-down: #btn2;             nav-up: #btn4;          }          button#btn2 {             top: 30%;             left: 30%;             nav-index: 2;             nav-right: #btn3;             nav-left: #btn1;             nav-down: #btn3;             nav-up: #btn1;          }          button#btn3 {             top: 50%;             left: 15%;             nav-index: 3;             nav-right: #btn4;             nav-left: #btn2;             nav-down: #btn4;             nav-up: #btn2;          }          button#btn4 {             top: 30%;             left: 0%;             nav-index: 4;             nav-right: #btn1;             nav-left: #btn3;             nav-down: #btn1;             nav-up: #btn3;          }                     Result1       Result2       Result3       Result4    

Linear gradient with rainbow color

George John
Updated on 24-Nov-2023 01:23:07

1K+ Views

To create a linear gradient that looks like rainbow color, you can try to run the following code - Example                    #demo {             height: 100px;             background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);          }                     Linear Gradient       Rainbow    

HTML5 geolocation 'permission denied' error in Mobile Safari

Jennifer Nicholas
Updated on 30-Jul-2019 22:30:22

502 Views

Whenever a mobile website is created and there is a requirement in which user is requested for current position on button click, then HTML5 geolocation is used.This is working fine in mobile chrome.However when in Mobile Safari, the user is prompted to share location and browser defaults to geolocation then browser is defaulted to Permission denied errorTo solve this, the Geolocation services in mobile services is turned on to get current location of requested user.

HTML5 Canvas layer disappears on mouse click in Fabric.js and Firefox stops responding when creating a canvas for the image?

karthikeya Boyini
Updated on 04-Mar-2020 10:21:10

488 Views

If the HTML5 Canvas layer disappears on mouse click in Fabric.js and Firefox stops responding when creating a canvas to the image, then there is a way to drag and drop images from your computer to canvas using Fabric.This can be done by making image draggable property to true by this way −

Websockets Apache Server compatibility in HTML5

Govinda Sai
Updated on 04-Jun-2020 11:29:30

253 Views

When an app is to be developed that displays new data whenever it is stored in a folder through XML, we use websockets apache server.Mod_websocket or php websocket can be used.we can also use self-hosted realtime web technology for realtime communication between server and client.A hosted realtime web solutions and realtime push aspect of your application can be offloaded.However, Apache server is not good in long-running persistant connections between server and client.Best solution for this is:While using Apache as application server we need to use second dedicated realtime webserver.Self hosted realtime webserver can be used to handle many concurrent connectionsA ... Read More

Fire HTML5 dragstart

Lakshmi Srinivas
Updated on 04-Jun-2020 11:28:03

174 Views

To fire dragstart after mousemove, try the following:If you are firing dragstart event, then implement the rest of the process flow as well:To solve the problem, create the user experience as follows:You need to instruct the user to click on the respective area for enabling drag When a user clicks on the area, a dialog should be visible to show that the dragging may now be used.

Advertisements