Unknown gaps between elements in flexbox are due to margin collapsing of the header to the bar division. To resolve this −Either Margin is reset to 0 for header or Border is added to the bar.Padding can be done to bar by adding property padding: 10px to bar. Try the following code snippet to resolve the unknown gap problem −.bar {    background: yellow;    color: gray;    height: 250px;    padding: 10px;    text-align: center; }

HTML 5 Geolocation is used to find out the location of the user. This can be without SSL connection. This can be generated as follows −// Variable apigeo shows successful location: var apigeo = function(position) {    alert("API geolocation success!lat = " + position.coords.latitude + "lng = " + position.coords.longitude); }; var tryapigeo = function() {    jQuery.post( "check the location on google map", function(success) {       apiGeolocationSuccess({coords: {latitude: success.location.lat, longitude: success.location.lng}});    }) //Gives success on given geolocation    .failure(function(err) { //On failure, alert with failure is shown       alert("error while showing geolocation! "+err);   ... Read More

The only way to materialize CSS checkbox to work with Html.checkbox without disappearance of the checkbox to the left is by moving the hidden element to the bottom of the parent element.$("input[type='hidden']").each(checkbox1 (0,IsActive ) {    $(this).appendTo($(IsActive).parent()); });In this hidden element, IsActive is placed in the bottom of parent element thus removing the disappearance of the checkbox to left and thus materializing CSS checkbox to work with HTML.checkbox.

JSRadial gradient with matrix is created in the following way. You can try to run the following way to create JS Radial gradient with matrix −var canvas1 = document.getElementById("canvas"); //canvas1 variable to identify given canvas var ctx1 = canvas.getContext("2d"); //This is used to tell context is 2D   var gradient1 = ctx1.createRadialGradient(100/horizontalScale, 100/verticalScale, 100, 100/horizontalScale, 100/verticalScale, 0); //This will create gradient with given canvas context   gradient1.addColorStop(1, "green"); //New color green is added to gradient gradient1.addColorStop(0, "red"); //New color red is added to gradient ctx1.scale(horizontalScale, verticalScale); //Context matrix ctx1 is shrinked according to horizaontal and vertical scale ... Read More

The date-time format can be changed by using custom HTML5 elements. If we wish to change or override existing Html tags then we can do so with the help of shadow DOM.We can make customizable tags like −Here is an example −However, E10 and older versions do not support customizable tags; however, all newer versions support customizable tags.

Align list-item with the help of flex. Flex will make columns flexible according to content. The wrapper will layout columns in a row..wrap{    display : flex }// This will help wrapper to become flexible .wrap.col{    flex: 1 0 33%; }Flex is basically a property which helps in making element flexible.Use the following to keep the lists vertically aligned to the bottom −.col .content {    margin-top: auto; }

DIV content can be saved as an image with the help of html2canvas() function in JavaScript. DIV tag defines a section in HTML document.Example      Welcome This shows the division area named cpimg.The html2canvas() function save div as an image with the following code −html2canvas(document.querySelector(“#cpimg”)).then(canvas  {         document.body.appendChild(canvas)  });It saves the referred div section “cpimg” into the image.

A Canvas is just a rectangular area on the HTML page. We can draw graphics in this rectangular area (Canvas) with the help of JavaScript. Canvas can be created in HTML5 as −                                 This creates an empty canvas with name canvas1 with width=200 and height=100. To draw graphics in it, we use JavaScript −var canvas = document.getElementById("Canvas1");  var ctx1 = canvas.getContext("2d"); ctx1.moveTo(0, 0); ctx1.lineTo(300, 200);  ctx1.stroke(); // This method actually draw graphics as per context object             To save this graphic, we need ... Read More

Meta tags are used to store data about HTML documents such as who wrote it and the description of the document.The best solution is to define default tags in the application and overwrite default parameters in view. We can do so in PHP.Making changes in config file first −

HTML5 allows us to interact with local client files (local client files are the files that are locally stored in the user’s computer). This is possible because HTML5 provides powerful APIs (Application Programming Interfaces) which are the interfaces with the help of which binary data and user’s local file system can be accessed. With the help of these file APIs, web applications can read files, file directory, can drag and drop from desktop to browser.The following are the APIs that are used to access local client files −File System APIFile APIFile Writer APIThe following are some examples −With the help ... Read More