Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To play randomly, add the songs like this −init ([ 'http://demo.com/songs/song1.mp3, 'http://demo.com/songs/song2.mp3, 'http://demo.com/songs/song3.mp3 ]);Use the following to play randomly using Math.random −function displayRandom() { var audio = Math.floor(Math.random() * (collection.length)); audio = collection[audio]; audio.play(); setTimeout(loop,audio.duration*1000); }
To implement animation on the border-top-left-radius property with CSS, you can try to run the following codeExampleLive Demo table,th,td { border: 2px solid black; } #newTable { width: 500px; height: 300px; background: yellow; border: 15px solid yellow; animation: myanim 3s infinite; background-position: bottom left; background-size: 50px; } @keyframes myanim { 30% { background-color: orange; border-spacing: 50px; border-top-color: red; border-top-left-radius: 150px; } } Performing Animation for border top left radius Subject Student Marks Maths Amit 98 Science Sachin 99
HTML5 canvas provides the necessary methods to draw an image and erase it completely. We can take JavaScript help to simulate good animation over an HTML5 canvas.ExampleYou can try to run the following code to perform basic HTML5 Canvas Animation − var pattern= new Image(); function animate(){ pattern.src = '/html5/images/pattern.jpg'; setInterval(drawShape, 100); } function drawShape(){ // get the canvas ... Read More
Use the grid-auto-columns property to set a default size for columns.You can try to run the following code to implement the grid-auto-columns property with CSSExampleLive Demo .container { display: grid; grid-auto-columns: 100px; grid-gap: 10px; background-color: blue; padding: 10px; } .container>div { background-color: #E5E7E9; text-align: center; padding:10px 0; font-size: 20px; } 1 2 3 4 5 6
HTML5 canvas provides rotate(angle) method which is used to rotate the canvas around the current origin.This method only takes one parameter and that's the angle the canvas is rotated by. This is a clockwise rotation measured in radians.ExampleYou can try to run the following code to rotate HTML Canvas − #test { width: 100px; height:100px; margin: 0px auto; } ... Read More
HTML5 canvas provides two important methods to save and restore the canvas states.Canvas states are stored on a stack every time the save method is called, and the last saved state is returned from the stack every time the restore method is called.Sr.No.Method and Description1save()This method pushes the current state onto the stack..2restore()This method pops the top state on the stack, restoring the context to that state. ExampleYou can try ... Read More
To draw a circle with transparent background and border-radius, use the following CSS −body { background: repeating-linear-gradient(45deg, white 0px, green 100px); height: 400px; background-size: 400px 400px; background-repeat: no-repeat; } html { height: 100%; } #box { position: absolute; width: 400px; height: 400px; border: solid blue 2px; animation: colors 5s infinite; } #demo { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center; animation: cliprotate 18s steps(2) infinite; -webkit-animation: cliprotate 18s steps(2) infinite; } .circlehalf { box-sizing: border-box; ... Read More
For Geolocation enableHighAccuracy, you need to set it to true −enableHighAccuracy: trueIf you still fail in getting the result i.e. handling the timeout error, then again try it withenableHighAccuracy: falseThe above would work on Android, Chrome, and Firefox as well.
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