Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Use the align-content property with value center to set the flex lines to the center.You can try to run the following code to implement the center valueExampleLive Demo .mycontainer { display: flex; height: 200px; background-color: red; align-content: center; 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 align-content property with value space-around to add space around the flex lines.You can try to run the following code to implement the space-around valueExampleLive Demo .mycontainer { display: flex; height: 200px; background-color: #884EA0; align-content: space-around; flex-wrap: wrap; } .mycontainer > div { background-color: #00FF00; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Queue Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
The touchstart event is fired when the touchpoint is positioned on the touch surface. Use addEventListener() for touchmove pointer-events −overlay.addEventListener('touchstart', function(ev){ ev.preventDefault(); });Here, we have also used the preventDefault() method. The preventDefault() method prevents the browser from executing the default action.
Use HTML with jQuery to achieve this and fire after pressing ENTER −Example $(document).ready(function(){ $('input').bind("enterKey",function(e){ alert("Enter key pressed"); }); $('input').keyup(function(e){ if(e.keyCode == 13) { $(this).trigger("enterKey"); } }); }); Press Enter key in the above input text.
Set a linear gradient as the background image, with linear-gradient() CSS function. You can try to run the following code to implement linear-gradient() function in CSSExampleLive Demo #demo { height: 200px; background: linear-gradient(green, orange, maroon); } Setting background as linear gradient.
HTML5 canvas provides methods that allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.ExampleLet us see an example of canvas transformation − function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(200, 200); var c = 0; for (var i=0; i
It can be a Cross-Origin Resource Sharing (CORS) issue.video.crossOrigin = 'anonymous';To enable cross-origin resource sharing, use the following. It allows the images to pass the HTTP header with an image response.Access-Control-Allow-Origin: *You can also use the HTML() method −$('#audio').html('');
HTML5 canvas provides scale(x, y) method that is used to increase or decrease the units in our canvas grid. This can be used to draw scaled down or enlarged shapes and bitmaps.This method takes two parameters where x is the scale factor in the horizontal direction and y is the scale factor in the vertical direction. Both parameters must be positive numbers.ExampleLet us see an example − function drawShape(){ // get the canvas element using the DOM ... Read More
With grid-row property, set the size of grid items. It has grid-row-start and grid-row-end properties. You can try to run the following code to implement the CSS grid-row property.ExampleLive Demo .container { display: grid; background-color: green; grid-template-columns: auto auto; padding: 20px; grid-gap: 10px; } .container > div { background-color: orange; text-align: center; padding: 10px 0; font-size: 20px; } .ele1 { grid-row: 1 / 6; } Game Board 1 2 3 4 5 6
To implement animation on font-weight property with CSS, you can try to run the following codeExampleLive Demo p { border: 2px solid black; width: 400px; height: 100px; animation: myanim 5s infinite; } @keyframes myanim { 70% { font-weight: bold; } } This is demo text