There are two print buttons styled with unique CSS designs

Question

There are two print buttons styled with unique CSS designs

I am currently working on an application using Django. Within one of my HTML pages, I need to display a receipt. There are two print buttons available: print_btn and print_btn_new, each with distinct styles. To accommodate these styles, I have created two separate stylesheets called print.css and print_new.css.

In the header section

<link rel="stylesheet" href="{% static 'css/print.css' %}" id="printCss" media="print">

Everything appears to be working correctly. However, when the user clicks on print_btn_new, the printed receipt does not reflect the intended CSS styling.

For the print_btn_new

<button id="print_btn_new" onclick="printNewOnClicked();" name="button">Print New</button>

The printNewOnClicked() function :

function printNewOnClicked(){
        document.getElementById('printCss').href = '{% static 'css/print_new.css' %}';
        alert(document.getElementById('printCss').href);
        window.print();
    }

Interestingly, the alert message correctly displays the URL for print_new.css. Despite this, manually inputting the URL from the alert box into the address bar results in displaying the correct file.

javascript html css django

Answer 1

Answer №1

It seems like there is an issue with the JavaScript code you copied. In the second line, make sure to escape the quotation marks like this:

document.getElementById('printCss').href = '{% static \'css/print_new.css\' %}';

Additionally, simply changing the href in this manner may not update the CSS styles on your page without a reload.

Answer 2

It seems like there is an issue with the JavaScript code you copied. In the second line, make sure to escape the quotation marks like this:

document.getElementById('printCss').href = '{% static \'css/print_new.css\' %}';

Additionally, simply changing the href in this manner may not update the CSS styles on your page without a reload.

Answer 3

Answer №2

When you assign one or more classes to the HTML tag, it allows you to create distinct CSS rules for different sets of rules effortlessly. The process of writing these rules in plain CSS can be tedious; however, tools like LESS/SASS can make it less repetitive and time-consuming. Moreover, by using this technique of adding classes to the HTML tag, it opens up possibilities for other uses by different individuals!

var _global_printCSSnames = [ 'funky' ];
function printPage(mode){
    let doc = document.querySelector('html');
    //doc.className = mode !== null ? `${mode}-printstyle` : ''; // just for our print css switch
    _global_printCSSnames.forEach( pmode => { doc.classList.remove( `${pmode}-printstyle` ) } ); if(mode!==null) doc.classList.add( `${mode}-printstyle` ); // if other classes may be set on HTML tag
    window.print();
}

html,body{ background-color: #444; color: #fff; }

@media(min-width:50em){
    html,body{ background-color: #aaa; color: #444; }
}

@media(min-width:80em){
    html,body{ background-color: #444; color: #fff; }
}

@media print{
    html,body{ background-color: #fff; color: #000; }
    html.funky-printstyle,html.funky-printstyle body{
        background-color: #fff; color: #00f;
    }
}

.buttonBox{ display: flex; flex-direction: row; justify-content: space-around; }
.buttonBox>*{ flex: 0 1 auto; width: 9em; height: 2em; margin: 4px 8px; }

button{
    background-color: #333;
    color: #0f8;
    border-radius: 4px;
    border: 2px solid #888;
    box-shadow: 4px 8px 4px rgba( 128, 128, 128, .5 );
    transition: all ease-in-out .3s;
}
button:hover{
    background-color: #555;
    color: #0ff;
    text-shadow: 1px 1px 0 1px #000, -1px -1px 0 1px #fff;
    cursor: pointer;
}

<h1>Lorem ipsum…</h1>
<p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. </p>
<p>Heizölrückstoßabdämpfung. Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. </p>
<div class="buttonBox">
    <button onclick="printPage(null)">print (regular)</button>
    <button onclick="printPage('funky')">print (funky)</button>
</div>

Answer 4

When you assign one or more classes to the HTML tag, it allows you to create distinct CSS rules for different sets of rules effortlessly. The process of writing these rules in plain CSS can be tedious; however, tools like LESS/SASS can make it less repetitive and time-consuming. Moreover, by using this technique of adding classes to the HTML tag, it opens up possibilities for other uses by different individuals!

var _global_printCSSnames = [ 'funky' ];
function printPage(mode){
    let doc = document.querySelector('html');
    //doc.className = mode !== null ? `${mode}-printstyle` : ''; // just for our print css switch
    _global_printCSSnames.forEach( pmode => { doc.classList.remove( `${pmode}-printstyle` ) } ); if(mode!==null) doc.classList.add( `${mode}-printstyle` ); // if other classes may be set on HTML tag
    window.print();
}

html,body{ background-color: #444; color: #fff; }

@media(min-width:50em){
    html,body{ background-color: #aaa; color: #444; }
}

@media(min-width:80em){
    html,body{ background-color: #444; color: #fff; }
}

@media print{
    html,body{ background-color: #fff; color: #000; }
    html.funky-printstyle,html.funky-printstyle body{
        background-color: #fff; color: #00f;
    }
}

.buttonBox{ display: flex; flex-direction: row; justify-content: space-around; }
.buttonBox>*{ flex: 0 1 auto; width: 9em; height: 2em; margin: 4px 8px; }

button{
    background-color: #333;
    color: #0f8;
    border-radius: 4px;
    border: 2px solid #888;
    box-shadow: 4px 8px 4px rgba( 128, 128, 128, .5 );
    transition: all ease-in-out .3s;
}
button:hover{
    background-color: #555;
    color: #0ff;
    text-shadow: 1px 1px 0 1px #000, -1px -1px 0 1px #fff;
    cursor: pointer;
}

<h1>Lorem ipsum…</h1>
<p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. </p>
<p>Heizölrückstoßabdämpfung. Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. </p>
<div class="buttonBox">
    <button onclick="printPage(null)">print (regular)</button>
    <button onclick="printPage('funky')">print (funky)</button>
</div>

There are two print buttons styled with unique CSS designs

Answer №1

Answer №2

Similar questions

The value of 'null' was passed as a parameter in a Mongoose query for the function 'findOne()'

Dragging an image within a div using JQueryUI

Utilizing Ajax for Efficiently Updating a Singular Field within a Designated Object

setTimeout in CSS animation causing issues

"Consistent Behavior: jQuery ajax always triggers fail event, even when success is expected

Using Ajax to update multiple text field rows with unique values

The transformation of a class-based component into a functional one is proving to be ineffective

What is the significance of using composability over the deprecated method in Reactjs Material-UI menuItems?

Is there a way to trigger the "day click" event when the "Event Click" is clicked on in Jquery full calendar?

Adjust the dimensions of the main svg while keeping the proportions of all elements contained within

Creating a basic JSON array using the push method

Look through the contents of each child within a div to locate specific text, then conceal any that do not include it

Stop the auto-scroll feature when the user begins manually scrolling upwards, and resume the auto-scrolling when the user continues

A guide on changing a class dynamically in a Vuejs component by utilizing a variable from Laravel

What is the best way to apply margins to a nested div element in relation to its parent div element using CSS?

Unwanted transparency issue in MaterialUI (MUI) BottomNavigation

Heroku NodeJS - Page Not Found: Error 404

Creating a standalone Wordpress child theme with its own CSS

Can you tell me the appropriate type for handling file input events?

Ensure that a distinct cross button is included within the text or search input and positioned to float alongside the text for