Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Use the JavaScript FileReader to allow users to choose an image.Let us see an example − Here is the JS −function readURL(input) { if (input.files && input.files[0]) { var r = new FileReader(); r.onload = function (ev) { $('#myid).attr('src', ev.target.result); } reader.readAsDataURL(input.files[0]); } }
For data-attribute typecasting of Numbers and String, use −[...document.querySelectorAll("a")].forEach(a => console.log("type: %s, value: %o", typeof a.dataset.value, a.dataset.value) );The above is for the following data-attributes −6.0 6.5
To detect HTML5 audio MP3 support, use the Modernizr library.As stated in the official specification − Source − Screenshot from the official Modernizr documentation For detecting HTML5 audio MP3 support, you can also check the User-Agent to detect which browser is used.You can also use JavaScript to test −var x = document.createElement('audio'); return !!(x.canPlayType && x.canPlayType('audio/mpeg;').replace(/no/, ''));
To add transparency to a button, use the CSS opacity property. This creates a disabled look for the button.You can try to run the following code to add transparency to a buttonExampleLive Demo .btn1 { color: black; text-align: center; font-size: 15px; } .btn2 { color: black; text-align: center; font-size: 15px; opacity: 0.8; } Result Click below for result: Enabled Disabled
Use the align-content property with value space-between to add space between the flex lines.You can try to run the following code to implement the space-between valueExampleLive Demo .mycontainer { display: flex; height: 200px; background-color: red; align-content: space-between; flex-wrap: wrap; } .mycontainer > div { background-color: yellow; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Queue Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
Use the flex-direction property to specify the direction of the flexible items. You can try to run the following code to implement the flex-direction property:ExampleLive Demo .mycontainer { display: flex; flex-direction: column; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6
To set the style of the rule between columns, use the column-rule-style property. You can try to run the following code to implement the column-rule-style property.ExampleLive Demo .demo { column-count: 4; column-gap: 50px; column-rule-color: maroon; column-rule-style: dashed; } This is demo text. This is demo ... Read More
Use the justify-content property with value space-around to add space between the flex-items.You can try to run the following code to implement the space-between valueExampleLive Demo .mycontainer { display: flex; background-color: red; justify-content: space-between; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
Use the :hover selector to add hover effect. To give a rounded effect, use the border-radius property. You can try to run the following code to set rounded active and hover button with CSS:ExampleLive Demo .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration: none; border-radius: 5px; } .demo a.active { background-color: orange; color: white; border-radius: 5px; } .demo a:hover:not(.active) { background-color: yellow; } Our Quizzes
Use the flex-direction property with row value to set the flex-items horizontally.You can try to run the following code to implement the row valueExampleLive Demo .mycontainer { display: flex; flex-direction: row; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6