Steps for printing a web page with a custom stylesheet instead of the default print.css file

I have a print.css file that handles printing website pages, but I now want to create a basic-print.css file specifically for printing out basic information. How can I add a button to the page that triggers the print functionality using basic-print.css instead of print.css?

Thank you in advance.

Edit: Here is a quick example of my goal...

  1. Pressing CTRL+P (or going to File > Print) will use print.css
  2. Clicking a button labeled "Basic Print" will use basic-print.css

Answer №1

Perhaps you could experiment with dynamically loading the basic-print.css file via JavaScript. It might be worth a try!

Consider something along the lines of this code snippet (using the jQuery library):

$(document).ready(function(){
    $('#print-basic-button').click(function(){
       $('link').first().removeAttr('href').attr('href', 'basic-print.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

What is the best method for extracting or filtering data from HTML using PHP?

Every day, I receive an email containing an HTML document with statistics from the previous day. The HTML format is difficult for all users to read, so I'm looking to automatically extract information from this table using a PHP script. Below, you&apo ...

Ways to split up array objects in an axios GET request

Hello, I recently implemented an AXIOS GET request that returns an array of objects. However, the current example I am using retrieves the entire array at once, and I need to separate the objects so that I can work with them individually. class CryptoAP ...

Real-time Broadcasts Straight to Your Web Browser

Feeling a bit frustrated with my current situation. I am eager to stream a live video broadcast to a web browser. At the moment, I am utilizing ffmpeg to stream a directshow live source as a webm stream to node.js, which then sends the stream to the http ...

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

Analyzing JSON information within a tabular format

JSONObject category;JSONArray eventsArray;JSONObject eventData; JSONArray contactsArray;JSONObject contactData; JSONObject jsonObject=new JSONObject(data); categories = jsonObject.getJSONArray("categories"); for (int i = 0; ...

Follow us text placed in front of social sprite images all aligned on the same line

Is there a way to align the Follow Us text with sprite images? Check out this jsfiddle link for more details! <ul class="social_Emp">&nbsp;&nbsp;&nbsp;Follow us: <li class="Emp_twitter"><a href="{if $userInfo.TwitterPage} {$u ...

Using jQuery to select the third element from every group of six

I am attempting to select the 3rd .foo element out of every set of 6. To clarify, here is a brief example: 1 2 3 (this) 4 5 6 1 2 3 (this) 4 5 6 and so on... So far, I have only managed to target every 3rd element, which is not exactly what I need beca ...

Updating Button Image on Click in Android

Hi everyone! I'm trying to change the image of a button when it is clicked. Here is my code: imageButton = (ImageButton) findViewById(R.id.imageButton); imageButton.setOnClickListener(new OnClickListener() { public void onClick(Vi ...

Steps for aligning the upper rectangular text in the center of the larger rectangular border

https://i.stack.imgur.com/7yr5V.png I was aware of a particular element in html that had text positioned in the upper left corner, but my knowledge didn't go beyond that. Should I be adjusting the translation on both the X and Y axes based on the par ...

Image Animation Using a Rotational Control (HTML/JavaScript/...)

I am interested in achieving a specific effect with a series of images that transition from dark to light. My idea is to have a dial or slider underneath or over the frame so that when it is moved to the left, the black image is displayed, and when moved t ...

Is using tables still considered a recommended practice for organizing a layout such as the one shown in the [IMG]?

Looking for recommendations on arranging images in the footer, in line with the design mockup using HTML/CSS. Wondering if tables are still a viable option for this purpose? ...

After a link is clicked in the Rails web app, the style undergoes a subtle transformation

Encountering an issue with my HTML/CSS that seems to be connected to Rails and its asset pipeline. Initially, the styling of my web app is perfect on the first page load (and hard refreshes). However, as soon as I click on a link, navigate away from the pa ...

In JSP, there is an issue with string matching not occurring correctly when comparing two time

Starting time=22:00:00,ending time=23:59:59. In the scenario where the current time is at 23:00:00, a success message will be displayed or else an error message will be shown. This time comparison is done with the system time. Here is the code snippet: / ...

Leveraging BeautifulSoup for retrieving targeted dl and dd item listings

Today marks my first time posting. I am currently utilizing BeautifulSoup 4 and Python 2.7 (PyCharm) to work on a webpage that contains various elements. Specifically, I am aiming to extract certain elements where the tags are either 'Salary:' or ...

How can I determine whether a list is sorted or not, and how do I display this information on the console

I have developed a program that can determine whether a given list is sorted or not. Now, I am looking for guidance on how to print out the answer indicating whether the list is sorted or not (e.g., "The list is sorted" or "The list is not sorted"). pub ...

Tips for adjusting the color of a <a> tag upon clicking, which remains unchanged until the URL is modified

My goal is to maintain the color of a link when it is clicked. Currently, hovering over the navbar link changes it to greyish, but I want it to remain a different color after clicking on it. I am implementing this using the react-router-dom library for the ...

Update the page using Ajax without relying on jQuery

I want to implement automatic page updates without the need for a refresh using Ajax. However, most resources I've come across suggest using jQuery and PHP, which are areas of coding I am not very familiar with. My goal is to integrate Ajax into my HT ...

The Asynctask did not complete its download process before the next method was called

I have a straightforward scenario where I utilize a basic class that extends AsyncTask. In this class, I retrieve content from a text file on the web and store it in String tmpString within the doInBackground() method. Immediately after calling execute();, ...

Is there a way to modify the color of a specific section of a font icon?

Currently, I am in the process of implementing an upvote button using fa fa signs. However, I have encountered an issue where the background color of the up vote button is bleeding outside of the sign (possibly due to padding on the icon), and I am strivin ...

How can you ensure that a row of content is accessible by making it clickable in a valid way?

I'm currently working on developing a widget that resembles a clickable bootstrap media object list that is easily accessible. https://getbootstrap.com/docs/4.3/components/media-object/#media-list The original code has the JavaScript click event attac ...