Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To solve this problem, follow the below-given steps −For android versions less than 4.4, loading data into a webview with a file scheme as a directory like this won’t work.browser.loadDataWithBaseUrl("file:///android_asset/", html, "text/html", "UTF-8", null);Add a filename and it works on older Android versions −browser.loadDataWithBaseUrl("file:///android_asset/new.html", htmlContent, "text/html", "UTF-8", null);You can use the following too, in case your URL is http://www.demo.com −browser.loadDataWithBaseURL("http://www.demo.com", htmlContent, "text/html", "utf-8", null);
The following are the flex-item propertiesorderflex-growflex-shrinkflex-basisflexalign-selfLet us see an example of flex-basis propertySet the length of a flex item with the flex-basis CSS property. You can try to run the following code to implement the flex-basis propertyExampleLive Demo .mycontainer { display: flex; 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 Q7 Q8 Q9
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.ExampleLet us see an example of SVG − #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } SVG HTML5 SVG Circle To center it, add the CSS like the following −# svgelem { margin-left:auto; margin-right:auto; display:block; }
Internet Explorer 11 does not support the element. Add support using Modernizr of the following JS −document.createElement('main');Adding the above element, will not give you the element for the browser, therefore, you need to use the following CSS finally −main { display:block; }
Translate the image dimensions to 32, 120 −context.translate(32, 120);Now rotate the canvas −context.rotate(90 * Math.PI/180);Now draw the image −context.drawImage(img, -32, -120, 64, 120);
Retrieve the mouse coordinates in the click event. Now, retrieve the element by hiding your overlay, and use the following. After that, redisplay the overlay −document.elementFromPoint(x, y)You can also use the following CSS −div { pointer-events:none; }
Define a flex container and set the flex items in it.You can try to run the following code to learn how to implement Flexbox elements. Q1, Q2, Q3 here are the flex-items. The entire area is Flexbox elementExampleLive Demo .mycontainer { display: flex; 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 disable zooming capabilities in responsive design, you need to create a META viewport tag.With that, set the user-scalable property to 'no' like −user-scalable=noAdd the following in your HTML code to disable zooming capabilities in responsive design −
To preview an image before and after upload, you need to try the following code − HTML The following is the jQuery −function display(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(event) { $('#myid').attr('src', event.target.result); } reader.readAsDataURL(input.files[0]); } } $("#demo").change(function() { display(this); });
HTML5 video should work in Firefox web browser. If it is still not working, try the following −Start Firefox in Safe Mode to check if any extension is creating issues.To reach Extensions, go to, Firefox/Tools > Add-ons > ExtensionsTry to turn off hardware acceleration.You need to check the media prefs that do not have the default value.If the media.windows-media-foundation.enabled is set to false, you need to set it to true and restart.Any of the above fixes should work.