Achieve dynamic styling and adjust window size using window.open

My mind is exhausted after days of trying:

function prtDiv( o ) {
var css = 'body {font:normal 10px Arial;}' ;
var wo = window.open('','print','width=600,height=600,resizable=yes');  
wo.document.write( '<head><meta name="viewport" content="width=device-width, initial-scale=0.5 user-scalable=1"/> <style>'+css+'</style><body>'+ o.innerHTML+'</body>'); 
wo.focus();
}

I attempted changing the body style and using an URL to replace a token with the div-content in various browsers like chrome, opera, firefox, edge...

However, all variations resulted in the same font display, without user-scalability, only accepting font-name with font-size missing.

Your assistance would be greatly appreciated. Thank you.

At this point, I suspect it's because the content is loaded via XHR (Ajax).

It seems impossible to format HTML content written to a new window when the content was loaded via XHR.

I resorted to creating a PDF instead :((

javascriptcsswindow.openscalable

Answer №1

Typically, a font-size of 10px is considered standard and would not cause any noticeable change in the appearance of text.

However, if you were to adjust the font-size to a larger value, such as 100px, then you would definitely see a significant difference in size.

For a demonstration, you can check out the JSFiddle link here: http://jsfiddle.net/mt6fydg8/4/

Answer №2

Here is the code snippet that has worked well for me. Simply copy and paste this code into an HTML file: https://i.sstatic.net/xpCiv.jpg

<html>
<head>
<script>
function prtDiv(o) 
{
var css = 'body {font-size:25px; font-weight:bold; font-face:Arial; color:red;}' ;
var wo = window.open('','print','width=600,height=600,resizable=yes');  
wo.document.write( '<head><meta name="viewport" content="width=device-width, initial-scale=0.5 user-scalable=1"/> <style>'+css+'</style><body>'+ o+'</body>'); 
wo.focus();
}   
</script>
</head>
<body>
<button onclick="prtDiv('<p>Hello world<p>')">Click</button>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the background image of the body when hovering over a li element: a step-by-step

For my website, I want to achieve the same effect as seen on the homepage of this site: I am looking to change the background image of my webpage when a specific li element is hovered over. Each li element should trigger a different background image. Add ...

javascriptjqueryhtmlcss

After being redirected from another page using history() in React, the state is initially set to null but later gets updated to the correct value - Firebase integration

After logging in and being redirected to the profile page, I encounter an error that says 'Unhandled Rejection (TypeError): Cannot read property 'email' of null'. How can I ensure that the state is set before proceeding with any additio ...

javascriptreactjsfirebase

Finding elements through their text representation

I am struggling to select an element using the text "SELECT PRODUCT" in the following HTML: <div style="font-family: franklin-gothic-urw; font-weight: 400; font-style: normal; font-size: 19px; opacity: 1; color: rgb(255, 255, 255);">SELECT&nbsp; ...

javahtmlcssseleniumxpath

The ReCaptcha and AJAX Integration

I am attempting to display the ReCaptcha image using its AJAX API. I have been following the instructions from this documentation and observing the behavior of this demo. Despite my efforts, I am still unable to create a functional fiddle. I have added jsf ...

javascriptjqueryajaxrecaptcha

Using CSS to create shape gradients

I've been attempting to replicate the shape gradient found on Laracasts for hours, but unfortunately, my code isn't displaying anything. Can anyone lend a hand? a{ background: linear-gradient(118deg,#328bf2,#1644ad); border-radius: 54% ...

htmlcss

Proper method for calling a function within a specific scope

I am utilizing user-contributed modules that I aim to avoid editing in order to make upgrades easier. My goal is to enable users to browse for a CSV file on the local filesystem, parse it, and display it in a dynamic table. For this task, I am using PapaP ...

javascriptangularjsangularjs-scope

Vue.js does not support sorting columns

In this specific codepen example, I have created a Vue table that allows for sorting by clicking on the column name. Although I can successfully retrieve the column name in the function and log it to the console, the columns are not sorting as expected. Wh ...

javascriptvue.js

Designing rows and columns using Angular CSS within an ngFor loop

Is there a way to align items in a row or column based on conditions within an *ngFor loop? I want the input type to display on the next line if it is textarea, and on the same line otherwise. Check out this Stackblitz Demo for dynamically generated HTML ...

cssangular6ngfor

Finding the Number of Days Between Two Dates in AngularJS Using JavaScript

When I receive two dates from a web service in the format below: var dateone = "2016-08-21T07:00:00.000Z"; var datetwo = "2016-08-28T07:00:00.000Z"; var datediff = datetwo - dateone; var numdays = Math.round(datediff); console.log("Number of Days is " + n ...

javascriptangularjs

Update the icon using CSS style properties

I have been using liqour-tree and I need to change the arrow icon to a custom one. Unfortunately, I am not sure how to do this. Can someone please help me out? I have identified the element tag where the icon is placed. <i class="tree-arrow expanded ha ...

cssvue.jstreevue-component

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

javascriptphpjqueryhtmlcss

Can you explain the difference between synchronous and asynchronous loading?

After exploring this website, I have learned that when using CommonJS, the browser loads files one by one after downloading them, which can lead to dependencies slowing down the process. However, with AMD, multiple files can be loaded simultaneously, all ...

javascriptnode.jsasynchronousamdcommonjs

Receiving an `Invalid module name in augmentation` error is a common issue when using the DefaultTheme in Material

After following the guidelines outlined in the migration documentation (v4 to v5), I have implemented the changes in my theme: import { createTheme, Theme } from '@mui/material/styles' import { grey } from '@mui/material/colors' declar ...

javascriptreactjstypescriptmaterial-ui

The sorting process fails to make any changes, thus leaving the state unaffected

Is there a way to sort an array of objects in descending order by their id? No errors appear in the console. Even after calling the sort method, the state of allPosts remains unchanged. import { useState } from "react"; import Button f ...

javascriptreactjs

What could be causing the request body in ExpressJs to be blank?

Using ExpressJs, I have created a simple app that can handle post requests and form submissions. Below is the code snippet from my index.js file: require ('./models/db'); const express = require('express') const app = express() const bo ...

javascriptexpress

Determine the precise boundaries of the React component

I am working with a basic ellipse element: <span style={{ width: /*someWith*/, height: /*someHeight*/, borderRadius: "50%" }}/> and, I am using getBoundingClientRect() to retrieve its bounds (displayed in blue). https://i.ssta ...

javascriptreactjs

Unraveling the Power of Recursive Functions within a React.JS

I'm encountering an issue with a React project. It involves a tic tac toe game where I'm currently working on the implementation of the computer player. The problem arises when the human player clicks on one square (Field-component), triggering ...

javascriptreactjs

Tips for resolving the "trim" of undefined property error in Node.js

Looking to set up a basic WebAPI using Firebase cloud functions with express and TypeScript. Here's the code I have so far: import * as functions from 'firebase-functions'; import * as express from 'express'; const app = express( ...

javascriptnode.jstypescriptfirebasegoogle-cloud-functions

Launching a React project using the terminal - my step-by-step process

I'm attempting to initiate a new react-app utilizing the command npx create-react-app <app name> as shown below: npx create-react-app new-app However, after downloading, it seems to be stuck. It's not progressing at all. I've even rei ...

javascriptnode.jsreactjsnpmterminal

What is the best way to reduce the size of a Bootstrap card image back to its original dimensions when

I am currently experimenting with a bootstrap card using HTML, CSS, and Bootstrap. My main focus right now is on how to shrink the image when hovering over it. The .card-header-img has a fixed height of 150px that I do not want to modify. What I want to a ...

htmlcssbootstrap-5