Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To create a full screen video background with CSS, the code is as follows −Example Live Demo * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 17px; } .backgroundVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } .content { position: fixed; bottom: 0; ... Read More
To create a responsive table with CSS, the code is as follows −Example Live Demo table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { text-align: center; padding: 16px; font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; } th:first-child, td:first-child { text-align: left; } tr:nth-child(even) { background-color: #f2f2f2 } Comparison Table Example Features Basic Pro Free Yes No Customer Support No Yes Validity 1 Year Lifetime Warranty No 5 Years OutputThe above code will produce the following output −
To create a responsive table with CSS, the code is as follows −Example Live Demo body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } div{ overflow-x: auto; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid rgb(0, 0, 0); } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} Responsive Table Example First Name Last Name marks marks marks marks marks marks marks marks marks marks JACK ROY 50 60 10 20 40 50 10 20 30 40 Evelyn Monroe 24 14 22 44 55 44 11 55 22 33 Joe Anderson 54 22 99 55 91 61 81 11 22 55 OutputThe above code will produce the following output −On resizing the window the scrollbar will appear as follows −
To sort an HTML list using JavaScript, the code is as follows −Example Live Demo Sorting list example Click to sort Giraffe Camel Dog Lion Cheetah Cat document .getElementsByTagName("button")[0] .addEventListener("click", sortList); function sortList() { var list, i, sortFlag, LiEle, sorted; list = document.querySelector(".animalList"); sortFlag = true; while (sortFlag) { sortFlag = false; LiEle = list.getElementsByTagName("LI"); for (i = 0; i < LiEle.length - 1; i++) { ... Read More
To create a filter table with JavaScript, the code is as follows −Example Live Demo * { box-sizing: border-box; } .searchField { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } .birthDayTable { border-collapse: collapse; width: 100%; font-size: 18px; } .birthDayTable th, .birthDayTable td { text-align: left; padding: 12px; ... Read More
To create a filter list with JavaScript, the code is as follows −Example Live Demo * { box-sizing: border-box; } .searchInput { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 2px solid grey; margin-bottom: 12px; } .animalUL { list-style-type: none; padding: 0; margin: 0; } .animalUL li a { border-top: 1px solid rgb(0, 0, 0); ... Read More
To add form validation for empty input fields with JavaScript, the code is as follows −Example Live Demo JavaScript empty input field validation example Name: Submit the form empty to see the validation performed function emptyValidation() { var formField = document.forms["Form1"]["firstName"].value; if (formField == "" || x == null) { alert("Name must be filled out"); return false; } } OutputThe above code will produce the following output −On submitting the form empty −
To turn off spell check for form elements, the code is as follows −Example Live Demo Disabling Spellcheck Example Your Name: About Yourself Type wrong spelling in the above input field to see spellcheck in action OutputThe above code will produce the following output −On typing something in the input fields −
To disable autocomplete of an input field, the code is as follows −Example Live Demo input{ font-size: 18px; padding: 10px; margin: 10px; border:1px solid grey; } Autocomplete on/off Example First name: Last name: Type in the above fields and refresh page to see autocomplete at work OutputThe above code will produce the following output −On typing something in the above fields after submitting the form one time −
To create autocompletion in a form, the code is as follows −Example Live Demo * { box-sizing: border-box; } body { margin: 10px; padding: 0px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .autocomplete { position: relative; display: inline-block; } input { border: none; background-color: #f1f1f1; padding: 10px; font-size: 16px; border-radius: 4px; } input[type="text"] { ... Read More