I'm trying to figure why the #media print doesn't seem to work on the iOS, on android the functionality works fine. Basically I've made a functionality to hide the contents that aren't part of the print
body.printing *{display : none}
and only display the contents that will be printed
body.printing .print-me, body.printing .print-me > div{display : block}.
$('.print-modal').on('click', function() {
$('body').addClass('printing');
window.print();
$("body").removeClass("printing");
})
#media print {
/* Hide everything in the body when printing... */
body.printing * { display: none; }
/* ...except our special div. */
body.printing .print-me, body.printing .print-me > div { display: block; }
}
#media screen {
/* Hide the special layer from the screen. */
.print-me { display: none; }
}
Maybe the issue is, you are adding a class printing and removing the same class immediately. That's could be the reason.
Try changing the logic. You don't need to add a class for printing. Instead use print media query #media print to handle print logic.
$('.print-modal').on('click', function() {
window.print();
})
#media print {
/* Hide everything in the body when printing... */
body * { display: none; }
/* ...except our special div. */
body .print-me, body .print-me > div { display: block; }
}
#media screen {
/* Hide the special layer from the screen. */
.print-me { display: none; }
}
Related
I'm writing this message as I'd need to know how to set a div made of 3 buttons that, in the moment in which the broswer's window is shrunk and it's no longer on full screen, turns into a pop-up menu visible through the conventional three lines.
You can define #media in your css.
An example has been set here:
https://jsfiddle.net/jfgm9r2v/8/
The html code is like this:
<div class="hideOnSmall">
<button>Text1</button>
<button>Text2</button>
<button>Text3</button>
</div>
<div class="displayOnSmall">
<div class="hamburger-box">
<button>MyHambuger</button>
</div>
The magic happens in the css:
.hideOnSmall {
display: block;
}
.displayOnSmall {
display: none;
}
#media only screen and (max-width: 768px) {
.displayOnSmall {
display: block;
}
.hideOnSmall {
display: none;
}
}
I am printing html pages in c#. In the print function I have used
OnClientClick="window.print();return false;"
But the print comes along with the url in the header. How to remove this url?
I have a print button in the page and the button also comes in the print. How to remove this?
I am using CSS 2.0 so need a solution for CSS 2.0.
Thanks
Just use print media query in css to hide button :
#media print {
#button-id{
display: none; /* This will hide your print button in print view */
}
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
}
I did this and both the problems got solved.
#page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
#media print {
#print {
display : none;
}
}
I'm making an invoice in HTML & CSS. The goal is that after filling in, the invoice gets printed. But for some reason it doesn't print the CSS color of text. All text is black.
All other CSS styling works, like font-family, font-size, font-weight ...
This is the original in HTML & CSS :
And this is what is printed :
The printing is done with js: window.print();
Does anyone know why CSS color isn't working?
EDIT:
the title is placed in a table with id 'factuur':
<td id="factuurTitel">Stukadoorwerken Vanhees Frank</td>
The title has this CSS:
#factuurTitel {
font-weight: bold;
font-size: 30px;
color: #194197;
text-align: center;
vertical-align: middle;
font-family: 'Carrois Gothic SC', Calibri, sans-serif;
}
I have this #media print :
#media print {
body * {
visibility: hidden;
}
#factuur, #factuur * {
visibility: visible;
}
#page {
margin: 0;
}
}
I've tried adding #factuurTitel { color: #194197; } to the #media print.
Usually JS Print only handles html content alone if you want to give stylings to print, Use separate media query print in your css file:
#media print
{
/* your css goes here */
}
#factuur, #factuur * {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
This works in webkit browsers and the latest firefox updates, otherwise there's no other known solution.
I had the same problem myself.
I'm currently using CSS to hide a div section when the screen goes under a certain width. That bit works fine, but I'm struggling to get my head round, how to show a replacement div when I hide the div.
I might be going about it the wrong way, but here's my code:
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
}
#media all and (max-width: 954px) {
div.grid12-12 {
display: block;
}
}
What I'm trying to achieve is when the screen width goes below 955px grid12-11 is hidden and replaced with grid12-12.
Currently both the div's are being shown > 955px rather than replacing the block.
Is there a better/correct way to doing this?
There is no need to change the media query
div.grid12-12 {
display: none; // make it hidden on default view
}
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
div.grid12-12 {
display: block;
}
}
Check this: http://jsfiddle.net/Mohamed_nabil/cHQcD/
#media (max-width: 955px) {
div.gridFirst {
display: none;
}
}
#media (min-width: 955px) {
div.gridSecond {
display: none;
}
}
How are your initial rules set up? I think you're running into a problem of specificity. If your 'standard' rules are the same or more specific than your rules in your media query, the media query will not override them.
This seems to do what you expect:
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
div.grid12-12 {
display: block;
}
}
.grid12-11 { display:block; }
.grid12-12 { display:none; }
Note that if your standard rules (non-media) are prefixed with "div", it will NOT function (depending on what order the rules are processed in, and which browser you are using).
I'm trying to make some responsive page begin by mobile first and i'm always coming back to the same mistake.
When I have my pull-down menu in mobile version the menu it's ok, but when I try to change it to no-mobile version it doesn't works. i'd like a mobile version with one column and when the windows size oversteps the mark of 400px modify to two columns.
This is my code after lots of changes.
$('.slide ul').slideUp();
var ventana;
ventana=$('.wrapper').width();
$(window).on('load',preguntaTamano());
$(window).resize(preguntaTamano());
function preguntaTamano(e){
if(ventana<400){
mobile();
}
else if(ventana>400){
noMobile();
}
}
function mobile(e){
$('.especial').hide();
$('.toggle').on('click',controlaMenu);
}
function controlaMenu(e){
$('.slide ul').slideToggle();
e.preventDefault();
}
function noMobile(e){
$('.lista').show();
var listaElegidos;
listaElegidos= $('.elegidos').html();
$('.especial').preppend(listaElegidos);
}
Thank you very much!
I'd use CSS media queries instead:
#media (max-width: 400px) {
.lista {
display: block;
}
.especial {
display: none;
}
}
#media (min-width: 401px) {
.lista {
display: none;
}
.especial {
display:block;
}
}