In this tutorial, we shall learn to include another HTML file in an HTML file. Various methods are available to include another HTML file in an HTML file. Let us quickly go through the techniques that have support on the web. Using JQuery load to include an HTML file In this section, we shall check how to use JQuery’s load method to include an HTML file. Users can follow the syntax below to use this method. Syntax $(wrapper).load(htmlfile); The wrapper appends the new HTML file that jQuery loads. Parameters wrapper − ID of the DOM element that includes ... Read More

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

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

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 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

To clear the canvas for redrawing, use the canvas.clearRect() method in HTML. It clears the specified pixels. The parameters of the method includes − x − The x-coordinate to clear y − The y-coordinate to clear width − The width of the rectangle to clear height − The height of the rectangle to clear Let us see an example to create a canvas and clear it on the click of a button for redrawing in JavaScript. Here’s our canvas code that creates a canvas − var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.strokeRect(5, 5, 25, 15); ctx.scale(2, ... 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