Web Development Articles - Page 159 of 801

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

To make the Flexbox work on all the web browsers, use the min-width and max-width equivalents of flex. For example, for this − min-width: 40%; max-width: 40%; Use the CSS Shorthand Property. It states flex-grow | flex-shrink | flex-basis as shown in the below syntax − flex: flex-grow flex-shrink flex-basis|auto; For the above, we can set the Flex as − flex: 0 0 40%; Let us now see a Flexbox example that works on all the web browsers. We have two divs inside our parent div parentBox − ... 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

To auto resize an image to fit a div container, it ensures that the image is scaled properly without affecting its original aspect ratio. It helps in preventing the distortion of image and ensures that image fills the container without stretching or cropping. In this article we are having a div container and an image. Our task is to auto-resize image to fit the div container using CSS. Approaches to Auto Resize an Image to Fit div Container Here is a list of approaches to auto-resize an image to fit the div container using CSS which we will be discussing ... 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

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