I am building a webpage with a customisable print settings.What happens is that whenever the print button is clicked, a dialog box is opened (I did with the onclick
attribute and some js). The dialog box has some checkboxes, which are named as follows:
So, what I want is, whenever a user clicks the checkboxes, the linked items are removed from the @media print
queries.
So, the ways I can think of is to use media queries in JavaScript or conditional statements in css.
Is it possible or some other language is required?
What I would recommend instead is adding/removing classes to the items, and including them in your print CSS. Could be as simple as:
.hidden {
display: none;
}
Then, in your JavaScript:
document.querySelector('.comments').classList.add('hidden');
See also: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Working:
Click on Update Print Info button to update the print info and then click submit.
After closing of modal click on Print button to find out the changes.
I hope this code will help lots of users in future too.
Good Luck Everyone.
function update_print() { var style = "<style>@media print {"; if (document.getElementById('remove_menu').checked) { style += ".menu { display: none; }"; } if (document.getElementById('remove_sidebars').checked) { style += ".sidebars { display: none; }"; } if (document.getElementById('remove_links_buttons').checked) { style += ".links_buttons { display: none; }"; } if (document.getElementById('remove_comments').checked) { style += ".comments { display: none; }"; } style += "}</style>"; document.getElementById("div_for_style").innerHTML = style; $('#myModal').modal('hide'); }
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div id="print_box"> <p class="menu">This is Menu</p> <p class="sidebars">This is Sidebar</p> <p class="links_buttons">This is Links & Buttons</p> <p class="comments">This is Comments</p> </div> <style> @media print {.hide_while_print { display: none; } } </style> <div class="container"> <div class="hide_while_print"> <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Update Print Info</button> <button type="button" class="btn btn-info btn-md" onclick="window.print();">Print</button> </div> </div> <;-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <;-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Print Information</h4> </div> <div class="modal-body"> <input type="checkbox" id="remove_menu" /> <label for="remove_menu">Remove Menu</label> <br /> <input type="checkbox" id="remove_sidebars" /> <label for="remove_sidebars">Remove sidebars</label> <br /> <input type="checkbox" id="remove_links_buttons" /> <label for="remove_links_buttons">Remove Links & Buttons</label> <br /> <input type="checkbox" id="remove_comments" /> <label for="remove_comments">Remove Comments</label> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <input type="button" class="btn btn-success btn-sm" onclick="update_print();" value="Submit" /> </div> </div> </div> </div> <div id="div_for_style"></div>
As a complementary answer to this one : the snippet provided can benefit from refactoring to avoid common pitfalls:
addEventListener
instead (if you absolutely must support old browsers, utilize polyfills and bundlers, but do not write your source code like that). if
statements. There is a native way to modify Element
classes - via the classList
property exposing DOMTokenList
methods like add
or remove
.innerHTML
to update nodes (see, for example, here for details) and element styles (you can use style
property to update specific values programmatically).Below is a reworked snippet dealing with the issues above (note the HTML markup changes as well):
(() => { const $ = (selector) => document.querySelector(selector); const $$ = (selector) => document.querySelectorAll(selector); const submitBtn = $("#submit"); const modal = $("#myModal"); const inputs = $$("input[type=checkbox]"); const hideClass = "hide_while_print"; submitBtn.addEventListener("click", (event) => { inputs.forEach(({ id, checked }) => { const { classList } = $(`.${id.replace("remove_", "")}`); checked? classList.add(hideClass): classList.remove(hideClass); }); }); $("#print").addEventListener("click", () => window.print()); })();
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div id="print_box"> <p class="menu">This is Menu</p> <p class="sidebars">This is Sidebar</p> <p class="links_buttons">This is Links & Buttons</p> <p class="comments">This is Comments</p> </div> <style> @media print {.hide_while_print { display: none; } } </style> <div class="container"> <div class="hide_while_print"> <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Update Print Info</button> <button id="print" type="button" class="btn btn-info btn-md">Print</button> </div> </div> <;-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Print Information</h4> </div> <div class="modal-body"> <input type="checkbox" id="remove_menu" /> <label for="remove_menu">Remove Menu</label> <br /> <input type="checkbox" id="remove_sidebars" /> <label for="remove_sidebars">Remove sidebars</label> <br /> <input type="checkbox" id="remove_links_buttons" /> <label for="remove_links_buttons">Remove Links & Buttons</label> <br /> <input type="checkbox" id="remove_comments" /> <label for="remove_comments">Remove Comments</label> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success" data-dismiss="modal" id="submit">Submit</button> </div> </div> </div> </div>
In the snippet, I shadowed $
to define a lightweight utility using DOM API. If you do not use Bootstrap (which has JQuery as a hard dependency ), the $
and $$
utilities can allow you to avoid loading JQuery just to select elements.
You can use :checked
:
@media print {
.checkbox-class:checked + .remove-me {
display: none;
}
}
Remember the element with the class .remove-me
should be adjacent siblings. Like this:
<label for="checkbox-id">Click Me</label>
<input type="checkbox" id="checkbox-id" class="checkbox-class">
<div class="remove-me">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
Check it in action on Codepen: Editor View Debug Mode
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.