Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
In this tutorial, we will learn how we can add HTML and CSS to PDF. The HTML and CSS construct the webpages with styles and designs. We can save that webpage as a PDF file. Creating a PDF from scratch using vanilla JavaScript makes it very difficult, and the code will be lengthy. There are many libraries created upon JavaScript that will helps us to execute our task. The libraries like html2pdf, jsPDF, etc. are well-known libraries that convert webpages into pdf. These libraries can be implemented in the project using the script we are adding to the program. So, ... Read More
In this tutorial, we will learn why using onClick() in HTML is a bad practice. There are events and methods in JavaScript to handle the actions like clicking, hovering, etc. The onClick() is the most used method that executes a function on clicking an element. This method is applied to the element as its attribute. It may contain the name of the function or the script itself. JavaScript also contains the addEventListener method used to execute a function on the occurrence of an event. There are many ways to execute events, and every way has advantages and disadvantages. ... Read More
Yes, it is possible to append to innerHTML without destroying descendants event listeners. Let us see an example. First, we will create two functions with JavaScript. Here’s the demoFunc() − function demoFunc() { alert("Hello"); } The function demoFunc() above will display an alert box and a message. With that, the start() function loads when you load the web page and displays “Two” with “One” in the div. Here’s the start() function. We have appended the text “One” from the div with the text “Two” using the innerHTML property − function start() { mydiv.innerHTML ... Read More
We can Use the canvas.toDataURL() to capture HTML canvas as different file formats, such as gif, png, jpg, webp, etc. Capture HTML Canvas as png Example Herein, after using canvas.DataURL(), set the type to image/png to allow saving the image as PNG − window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle ... Read More
To add images in the select list, set the img text for the image in the tag, which is enclosed in a div − Python In the above div dropText, all the other select items is placed with the individual images. The dropText div is styled as. This also sets the background color of the select items i.e. skyblue − .dropText { display: none; position: absolute; background-color: skyblue; ... Read More
We will set the vertical scroll using the overflow-y property − overflow-y: auto; We will hide the horizontal scroll using the overflow-x property − overflow-x: hidden; Example Let us see an example − Display table with vertical scrollbar table.scrolldown { width: 100%; border-spacing: 0; ... Read More
A flex container is always the parent and a flex item is always the child. The scope of a flex formatting context is limited to a parent/child relationship. Descendants of a flex container beyond the children are not part of flex layout and will not accept flex properties. There are certain flex properties that apply only to flex containers − justify-content, flex-wrap andflex-direction There are certain flex properties that apply only to flex items” align-self flex-grow flex Always apply display: flex or display: inline-flex to a parent in order to apply flex properties to the child. Let ... Read More
To fix this use, we need to use the overflow property and set it on the outer parent div. We have an inner child div and an outer parent div − The outer parent div is set with the following CSS style. The min-height is set 100px and the overflow property is set to auto. This doesn’t let the height of the container element to increase even if it contains floated elements − .outer { margin: 0 auto; width: 960px; ... Read More
To close browser tabs, we can surely use Keyboard Shortcuts. Close a Tab on Google Chrome To close a tab on the Chrome web browser, use the following shortcut key on Windows − Ctrl+W To close the entire window on the Chrome web browser, use the following shortcut key on Windows − Ctrl+Shift+W Use the following shortcut key on Mac to close a tab on Chrome − Command+W To close the entire Firefox window on Mac, use the following shortcut − Command+Shift+W Close a Tab on Firefox To close a tab on the Firefox web browser, ... Read More
Yes, IDs must be unique in the entire HTML page. Even the official HTML standards suggest the same − Unique IDs with the id attribute Example Let us see an example. Here, we have used the id attribute − #myHeader { border: 2px solid yellow; background-color: orange; padding: 50px; text-align: ... Read More