Menu
I have an html select element with an id of background designed to set a background image for the <div class=”results-area”>. Then I have a print button to print the .results-area content.
The problem is that when I wanna print the .results-area I need to set what background image to set when printing, if I use CSS @media print I cannot set rules which background it should print (based on user selection).
Is there another way to accomplish that?
HTML
<select id="background">
<option value="url(picture1.jpg)">picture1</option>
<option value="url(picture2.jpg)">picture2</option>
<option value="url(picture3.jpg)">picture3</option>
<option value="url(picture4.jpg)">picture4</option>
<option value="url(picture5.jpg)">picture5</option>
<option value="url(picture6.jpg)">picture6</option>
</select>
<div class=”results-area”>
...
</div>
<a id="printMe" class="btn btn-warning">Print</a>
jQuery
$('#background').change(function () {
$('.results-area').css("background-image", $(this).val());
})
$('#printMe').click(function () {
print()
});
CSS:
@media print {
.results-area{
background-image: ??????;
}
}
322
CSS Print Media Query. Using the @media rule in your CSS allows you to target different media types, and screen sizes, from a single stylesheet. Using media queries with max-widths is integral to the current push towards responsive design. They can also be used to create your print styles using @media print.
CSS Printing - @media Rule. You can use CSS to change the appearance of your web page when it's printed on a paper. You can specify one font for the screen version and another for the print version. You have seen @media rule in previous chapters. This rule allows you to specify different style for different media.
They can also be used to create your print styles using @media print. You’ll notice this used on modern base templates such as the HTML5 Boilerplate. In fact, the Boilerplate has a great bunch of default print styles to start with. Grab them from the bottom of the style.css on the GitHub repository.
jQuery - css () Method 1 jQuery css () Method. The css () method sets or returns one or more style properties for the selected elements. 2 Return a CSS Property 3 Set a CSS Property 4 Set Multiple CSS Properties 5 jQuery Exercises 6 jQuery CSS Reference. For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.
The way I solved it is as follows.
HTML
I changed the values to digits "1-2-3..." And added a class to each picture "a-b-c..."
<select id="background">
<option class="a" value="1">Picture 1</option>
<option class="b" value="2">Picture 2</option>
<option class="c" value="3">Picture 3</option>
<option class="d" value="4">Picture 4</option>
<option class="e" value="5">Picture 5</option>
<option class="f" value="6">Picture 6</option>
</select>
<div class=”results-area”>
...
</div>
<a id="printMe" class="btn btn-warning">Print</a>
CSS
With the @media print I specified for each class his own background-image
@media print {
.a {
background-image: url(image1.jpg) !important;
}
.b {
background-image: url(image2.jpg) !important;
}
.c{
background-image: url(image3.jpg) !important;
}
.d{
background-image: url(image4.jpg) !important;
}
.e {
background-image: url(image5.jpg) !important;
}
.f {
background-image: url(image6.jpg) !important;
}
}
JQuery
$('#background').change(function () {
if ($(this).val() === "1") {
$('.results-area').css("background-image", "url(image1.jpg)");
replace();
$('.results-area').addClass("a");
}
else if ($(this).val() === "2") {
$('.results-area').css("background-image", "url(image2.jpg)");
replace();
$('.results-area').addClass("b");
}
else if ($(this).val() === "3") {
$('.results-area').css("background-image", "url(image3.jpg)");
replace();
$('.results-area').addClass("c");
}
else if ($(this).val() === "4") {
$('.results-area').css("background-image", "url(image4.jpg)");
replace();
$('.results-area').addClass("d");
}
else if ($(this).val() === "5") {
$('.results-area').css("background-image", "url(image5.jpg)");
replace();
$('.results-area').addClass("e");
}
else if ($(this).val() === "6") {
$('.results-area').css("background-image", "url(image6.jpg)");
replace();
$('.results-area').addClass("f");
}
else {
replace();
}
});
function replace() {
$('.results-area').removeClass("a b c d e f");
};
$('#printMe').click(function () {
print()
});
It feels like a crazy way of doing it, but it did the job.
I hope this works for you too!
114
Add a <style> tag to your <head> and give it an id:
<head>
...
<style id="bg-for-print"></style>
...
</head>
Then when you want to change the background image, select that style tag and set the appropriate background image:
$("#bg-for-print").text(
"@media print {" +
".results-area{" +
"background-image: url(" + backgroundUrl + ");" +
"}" +
"}"
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
