The printing code is not able to interpret the CSS

Having trouble with this script not reading the style properly when printing, can anyone assist in identifying the issue?

 <script type="text/javascript">
    $(function () {
        $("#btnPrint").click(function () {
            var contents = $("#dvContents").html();
            var frame1 = $('<iframe />');
            frame1[0].name = "frame1";
            frame1.css({ "position": "absolute", "top": "-1000000px" });
            $("body").append(frame1);
            var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
            frameDoc.document.open();
            //Create a new HTML document.
            frameDoc.document.write('<html><head><title>DIV Contents</title>');
            frameDoc.document.write('</head><body>');
            //Append the external CSS file.
            frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
            //frameDoc.document.write('<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />');
            //Append the DIV contents.
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
                frame1.remove();
            }, 500);
        });
    });
</script>

Answer №1

The problem could be related to the CSS file path.

Make sure to specify the root path when writing it, similar to this example:

<link rel="stylesheet" href="../css/style.css" />

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

How can we implement intricate looping mechanisms in hogan js?

Currently, I am in the process of familiarizing myself with expressjs. In my journey to learn this technology, I have encountered a controller that performs queries on a database and returns a JSON object with certain key-value pairs. An example of such an ...

Is there a way to create a Captcha image from text using JavaScript in an HTML document?

As I work on creating a registration web page, ensuring security is key. That's why I'm looking for a way to generate captcha images for added protection. Any suggestions on how I can transform text into captcha images? ...

Issue with parsing JSONP using jQuery's AJAX request

I am encountering an issue with a jQuery ajax request that I have set up. Here is the code: jQuery.ajax({ url: serverAddress+'php/product.php', type: 'GET', jsonpCallback: "callback7", dataType: 'jsonp', d ...

NPM TypeORM is throwing the error message "Duplicate migrations" when changes are made to a migration file

Recently, I made a modification to an existing table by adding a new column using the command npm run migration:generate <filename>. Unfortunately, I realized later on that I had misspelled the column name and needed to correct it (showComission -&g ...

Moving images displayed on a webpage

Is animating 5 pictures/photos a simple task? Take a look at this example: Which programming languages are recommended for achieving this effect? Thank you Tea ...

Despite implementing componentDidMount, the setState function is failing to update an initialized array state property

I have checked out similar questions such as : Why isn't this.setState updating the state property? Issue with this.setState not updating state Understanding that setState operates asynchronously is key. This snippet showcases my code: import Rea ...

Guide on transferring the Token from the initial response request to the header of the second request, with the help of Axios in an Ionic React application (Making 2 Post Requests

I am trying to create a user account and save the partner's data simultaneously. The initial axios request is used to create the user and obtain a token in return. I need to pass this token as a header in the second request. Despite implementing &apos ...

Like button for Facebook located at the bottom of a static webpage

I am facing an issue with my web application where it does not scroll properly, especially when there is a Facebook button at the bottom. The behavior in Chrome and Firefox is inconsistent and causing some trouble. In Chrome, the div repositions correctly ...

Utilizing Jquery DataTables for server-side processing in an MVC 4 environment

My project involves using Twitter Bootstrap and Jquery DataTable to showcase data. I am searching for an MVC example similar to the one linked here. http://datatables.net/examples/data_sources/server_side.html Your assistance would be greatly appreciated ...

JavaScript: Code for creating an overlay component

As someone who is new to javascript and Jquery, I have very little understanding of what I am doing. I have been relying on trial and error to make progress so far. While I am aware that users have the ability to disable javascript, I prefer not to use PHP ...

Exploring jQuery's ability to retrieve CSS values

Is there a way to use jQuery to read a specific CSS value from a class? The situation is as follows: HTML: <div class="box"></div> CSS: .box { margin-top: 100px; } I want to determine if the .box class has a margin-top of 100px in order t ...

Optimal method for identifying all inputs resembling text

I'm in the process of implementing keyboard shortcuts on a webpage, but I seem to be encountering a persistent bug. It is essential that keyboard shortcuts do not get activated while the user is typing in a text-like input field. The approach for hand ...

What options do I have for personalizing event listeners in d3.js?

I am currently working on a simple program that involves using a slider to move a rectangle across a webpage. I have set up the slider like this: <input type = "range" min = "5" max = "500" value = "5" id = "xvalue" > and I am able to access the sl ...

The issue arises when trying to use the Jquery .addClass() function in Chrome, yet it functions perfectly in Mozilla Firefox

I am trying to apply a class to my input tag using the addClass method in jQuery, but it doesn't seem to be working in Chrome! ` $('#username-signup').blur(function() { var tempusername = $('#username-signup').v ...

Unable to define an object within the *ngFor loop in Angular

In order to iterate through custom controls, I am using the following code. These controls require certain information such as index and position in the structure, so I am passing a config object to keep everything organized. <div *ngFor="let thing of ...

Issue encountered when attempting to modify the directive when the drop-down list is changed in AngularJS

Experiencing issues updating the directive when the drop down list is changed using AngularJS. Below is my application code: HTML Code <div ng-app="myApp" ng-controller="MyCtrl"> <select ng-model="opt" ng-options="font.title for font in font ...

Unresolved promise rejection on Repl.it

I decided to add a basic leaderboard feature to my game on Repl.it, so I set up a node.js backend for it. Here's the code snippet for the backend: const express = require('express'); const Client = require('@replit/database'); cons ...

Tips for displaying a tooltip when hovering over a label in a Material UI slider

I'm currently working on a slider quiz and my goal is to have the tooltip appear when hovering over the label on the slider. Currently, I can only see the tooltip when I hover directly on the thumb at the location of my mouse. Refer to the image belo ...

Display the same DIV element across various HTML tabs

When two different tabs are clicked, I need to display a set of 10 Search Fields. Both tabs have the same fields, so instead of using separate DIVs, I want to use the same DIV and only change the AJAX REST End-Point based on the selected TAB. Can someone ...

Delving into the intricacies of Promises/A+ and the mechanics of Asynchronicity in Javascript

I am new to JavaScript programming and may have some questions that seem basic. I was recently following a tutorial on Spring Boot and React. The author used a library called "rest" (package.json - "rest": "^1.3.1") and mentioned it is a Promises/A+ based ...