Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Front End Technology Articles
Page 553 of 652
How to create a full screen video background with CSS?
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 MoreHow to create a comparison table with CSS?
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 −
Read MoreHow to create a responsive table with CSS?
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 −
Read MoreHow to sort an HTML list using JavaScript?
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 MoreHow to turn off spell checking (grammar correction) for HTML form elements?
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 −
Read MoreHow to disable autocomplete of an HTML input field?
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 −
Read MoreHow to trigger a button click on keyboard "enter" with JavaScript?
To trigger a button click on keyboard "enter" with JavaScript, the code is as follows −Example Live Demo Trigger Button Click on Enter Example Button Press the "Enter" key inside the above input field to trigger the button. var inputText = document.getElementById("inputField"); inputText.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("alertBtn").click(); } }); OutputThe above code will produce the following output −On typing something in the field and then pressing enter −
Read MoreHow to create a responsive navigation menu with a login form inside of it with HTML and CSS?
To create a responsive navigation menu with a login form inside of it, the code is as follows −Example Live Demo Document body { margin: 0px; margin-top: 10px; padding: 0px; } nav { width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(178, 137, 253); ...
Read MoreJavaScript array.values()
The JavaScript array.values() return an iterator object that contains all the values of a given array.Following is the code for array.values() function −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 20px; font-weight: 500; } JavaScript array.values() CLICK HERE Click on the above button to see the array values only let fillEle = document.querySelector(".sample"); let arr = ["cow", "bull", "lion", "tiger", "sheep"]; var entries = arr.entries(); for (let x of entries) fillEle.innerHTML += x + ""; document.querySelector(".Btn").addEventListener("click", () => { ...
Read MoreJavaScript date.@@toPrimitive() function
The JavaScript date.@@toPrimitive() function converts the date object into a primitive value.Following is the code for date formats in JavaScript −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; } JavaScript date.@@toPrimitive() functiont CLICK HERE Click on the above button to see the date as primitive value let fillEle = document.querySelector(".sample"); let date = new Date(); let primitiveDef = date[Symbol.toPrimitive]("default"); let primitiveNum = date[Symbol.toPrimitive]("number"); document.querySelector(".Btn").addEventListener("click", () => { fillEle.innerHTML += "Hint = default :" + primitiveDef + ""; fillEle.innerHTML += "Hint = number :" + primitiveNum; }); OutputOn clicking the “CLICK HERE” button −
Read More