How to make print use desktop media queries? - css

I am attempting to add some print functionality to my page, but I am having an issue where when I print, it is printing as if it is mobile. How can I make it so that when someone hits print it prints the desktop version?
$('.print-btn').click(function(e) {
window.print();
});
.visible-desktop {
display:none;
}
#media only screen and (min-width:768px) {
.visible-desktop {
display:block;
}
.visible-mobile {
display:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="visible-desktop">Viewing from desktop</div>
<div class="visible-mobile">Viewing from mobile</div>
</div>
<a class="print-btn" href="#">Pring</a>

You can add an #media print rule at the bottom of your stylesheet:
#media print {
.visible-desktop {
display:block;
}
.visible-mobile {
display:none;
}
}

only screen
This excludes print. If you want to include print, don't write that.

You should pick one state (probably desktop) and make it the "default", by moving that state outside media queries.
The other states should override the default state's properties in media queries.

Related

use different css when button clicked with different media queries

Good afternoon. I have a little problem that is causing me a headache. I have a DIV with an ID of 'booking-md' This changes size with media query and works well like so.
<div id="booking-md" class="container-fluid booking-md"></div>
and media queries change it like so:-
#media screen and (max-width:991px) {
.booking-md { height: 320px}
}
#media screen and (max-width:767px) {
.booking-md { height: 220px}
}
#media screen and (max-width:560px) {
.booking-md { height: 320px}
}
I also have a button which makes the 'booking-md' height bigger like so
<button type="button" onclick="ret()" class="btn btn-return">Return</button>
function ret() {
$('#booking-md').css('height', '175px');
$('#return').show()
}
Now this adds 50px to the size ok but when It resizes it does not use the original media queries to change size. Ideally I need to have 2 different sets of media queries, one for if button has been clicked and one if not.
I have tried this with changing the class but doesnt do much after changing the size once. It looks like it loses all the media queries.
document.getElementById("booking-md").className = "booking-sm";
Is using php with this an option? Im at a loss and seem to have tryied everything, thanks
#wayneuk2, please have a look at the below working snippet, have made a few minor updates to your own code, hope it helps :)
.set-height {
height: 175px;
}
.booking-md {
border: 4px solid #ccc;
}
#media screen and (max-width:991px) {
.booking-md {
height: 320px
}
}
#media screen and (max-width:767px) {
.booking-md {
height: 220px
}
}
#media screen and (max-width:560px) {
.booking-md {
height: 320px
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="booking-md" class="container-fluid booking-md">
</div>
<br />
<button type="button" onclick="ret()" class="btn btn-primary btn-return">Return</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script>
function ret() {
$('#booking-md').addClass('set-height');
$('#return').show()
}
</script>
wow that was easy!! Dont know why I was trying the hard ways, I simply too out the change the height in the media queries and just set the 'booking-md' height like this to fit in the content.
.booking-md {height:auto;overflow: hidden;)
Works like a charm

How to continuously check current window height of web page?

I have a navbar on a website and after reaching a certain point of the height(y axis). I'd like to manipulate the css Code of my navbar for example the background color.
So far so good now I check with an if statement the height and if it overcomes a certain value I manipulate the css of the navbar class....but how can i make sure this gets checked constantly i have used the setInterval method but im not sure if this is a good solution...anyone who can help me out?
Thanks in advance!
function update() {
if (currentHeight>600) {
$(".class").css({"background-color":"blue"});
} else {
$(".class").css({"background-color":"transparent"});
}
}
setInterval(update, 10);
You can do it with jQuery like this:
$(window).resize(function () {
if ($(window).height()>600) {
$(".class").css({"background-color":"blue"});
} else {
$(".class").css({"background-color":"transparent"});
}
});
You can also do it without jquery with using CSS #media tags:
.class {
background-color:blue;
}
#media screen and (max-height: 600px) {
.class {
background-color:transparent;
}
}
If you want to change CSS when your screen is too small, you might not need jQuery:
#media screen and (max-height: 600px) {
.class {background-color:transparent}
}

Media Queries - Should we always set a default value on original/parent stylesheet?

On a mobile-first design, after changing values with Media Queries, Are we supposed to set them back to their original values on the parent stylesheet? or will it be handled by the browser?
<div id="mobile">
<div class="box1">
<div class="box2">
...
</div>
stylesheet:
( default style for mobile goes here )
#media (min-width: 500px) {
.box1 {
float: right;
}
.box2 {
float: left;
}
}
#media (min-width: 700px) {
.mobile {
display: none;
}
}
like in this case, should I to set the display value to, for example block on the default stylesheet? and/or reset the float attributes respectively?
No, setting default values won't be required in this case.
HTML has default display property with value inline, but say we want default value as block then we might want to specify default values.

How to remove class using CSS?

I'm trying to make my wordpress blog responsive for mobile devices. I was able to customize homepage in style.css, but I'm having some problems with single post page.
The problem is: I have three columns and I want to remove right and left sidebars. But they are not id like on homepage, but classes.
Single post page has one id (#postcolumn) with 3 classes: .leftsidebar, .postzone and .rightsidebar. How do I remove .leftsidebar and .rightsidebar?
Here is my code for homepage, which is working great...
#media only screen and (max-width: 480px) {
#wrapper, #header, #column {
width:400px;
}
#middlecolumn, #rightcolumn, #header, #footer {
display:none
}
}
If I understand your question correctly, your HTML markup for your single post page looks something like the following:
<div id="postcolumn">
<div class="leftsidebar">
// something
</div>
<div class="postzone">
// something
</div>
<div class="rightsidebar">
// something
</div>
</div>
Applying the same logic as your home page, the CSS would look like:
#media only screen and (max-width: 480px) {
#wrapper, #header, #column {
width:400px;
}
#middlecolumn, #rightcolumn, #header, #footer, #postcolumn .leftsidebar, #postcolumn .rightsidebar {
display:none
}
}

Generic String Setting via CSS / SASS

Is there some type of value that can be assigned any arbitrary string using CSS? For example, "large" or "small".
My purpose is to watch a generic div with display: none and change this as-of-yet-unknown type of value "large" or "small" via a media query. Javascript will watch for this change and use the assigned value.
Example HTML:
<div class="state"/>
Example corresponding SASS:
.state {
#media #{$isSmall} {
unknown-type-of-value: "small";
}
#media #{$isLarge} {
unknown-type-of-value: "large";
}
}
You can't change the value of a <div> with CSS, but you can use :after to have css "append" text to it.
Something like
#media screen{
div.test:after{
content: "small";
}
}
#media print{
div.test:after{
content: "large";
}
}
DEMO: http://jsbin.com/edirad/1 (try to print it, and look at the preview)

Resources