is there a possible bit of code (php, java, css, html) that will force a page to display a print dialogue box, and by default only allow page 1 of X to be printed, or just simply set the print dialogue box to those settings?
I have a page that is being printed out via a barcode printer that likes to print lots of blank pages based on the margins and other silly stuff. I just need the content on the first page only, if possible, a print dialogue pop-up box would be even better!
Any ideas on what code type and some resources to direct me would be grand, google hasn't turned up much.
You can get a print dialog by triggering the window.print event. This will only open the browser's print dialog however, you have no control over the actual print process other than setting stuff in the dialog box that opens.
As for blank page printing, your best bet is styling the page to avoid that.
I don't know how is the structure of your page, how the blocks of divs or tables are arranged but in my case I can do it easily with CSS.
Consider you have a div with id="FAQ" and that's the only thing you want to be printed, you can do it like this:
<style>
#media print
{
body div, body table {display: none;}
body div#FAQ, body div#FAQ table {display: block;}
}
</style>
This way I hide everything except the div id="FAQ".
I don't believe this is the best way, because I use #media print to hide some divs from printing like instructions or FAQs not the other way arround, but, it is a way.
Although, bamba1 seems to have a nice answer.
Related
I am developing a web application in PHP that needs to generate some invoices, and I chose mpdf to do this.
Now, I have the following challenge: the invoice exists out some divs under eachother. I want MPDF to try and see if this FULL div fits on 1 page. If this is the only div on the page, it can overflow to the next page. If it's the second or third, fourth, etc. then this whole div needs to be put on the next page.
I tried this "avoid page break" but it bugs a lot and creates empty pages.
Does anyone have a suggestion?
Not sure what you mean with 'tried "avoid page break"'
But the following seems like this worked well for me with latest MPDF:
#media print {
div {
page-break-inside: avoid;
}
}
However, it doesn't work (well) for floating divs.
I want to print an HTML page the way it is, without any additional content such as URL and date.
Some people told me that you cannot do it using CSS/JavaScript because those additional stuff are from the browser/printer.
The user who will print the page is using the server machine. The browser will be the interface and PHP can be used in conjunction to print.
What would be the best way to do it?
The URL, date, and page title, and other information that are often printed in the header and/or footer are controlled by the web browser. Unfortunately, you cannot control these via CSS or HTML. It is up to the visitor of your site to decide whether or not they want these elements to print.
Users can turn off headers and footers by following the steps below. (Steps may vary based on browser version, or may even be unavailable on older browsers. All steps done in the latest version of each browser.)
Chrome
Click the icon in the top right corner of the browser.
Click Print.
Uncheck Headers and Footers under the Options section.
Firefox
Click in the top left corner of the browser.
Place your mouse over Print, the click Page Setup.
Click the Margins & Header/Footer tab.
Change each value under Headers & Footers to --blank--.
Internet Explorer
Click the icon in the top right corner of the browser.
Place your mouse over Print, then click Page Setup.
Change each value under Headers and Footers to -Empty-.
You can do it including a page media CSS rule in your page:
<style>
#page {
size: auto;
margin: 0;
}
</style>
In google chrome you can turn off additional content when you print.
In the options section at the bottom left, turn off "headers and footers".
https://storage.googleapis.com/support-kms-prod/SNP_2703025_en_v0
I am having a hard time figuring out what's going on with a theme for a new script that i just bought.
My site is azngirls.com (don't worry it's not pornographic hahah) and if you go to the frontpage you will see that there is a nav bar on top or header bar that shows Login - Register (Forgot Password) and etc. and that bar is supposed to be on top without any gap but if you go to other parts of the site like for example http://azngirls.com/tos - you will see that there is a gap between that nav bar and the actual top of the website which makes it look awkward when you scroll down. This problem occurs everytime i edit the smallest things inside the php file, as in even if i change a single word or letter it suddenly shows that gap.
Another problem that I am having is that on the same page - on the side bar to the right there is a "Show me" button for Browser Plugins but when i click the link it takes me to a 404 page, but when i click the Tools link in the footer menu it takes me to a page that works.
Thanks alot for any help you guys can give! Really appreciate it!
you have a huge empty line filled with whitespace between <body> and <meta> tags. and you included a <meta> tag inside a body, as it should be in the <head> tag.
As #tpaksu suggested, your html is totally messed up. And there is a easy fix to your problem, just add the following code to your style sheet.
.content-infobox {
top: 0;
}
use this code on the respective ID
#id{
margin:0px;
}
I need to adapt my template to mobile versions, without creating different page files for each case, or subsites. I think the easiest way to do that is to change the css files to "rearrange" some elements.
So this is what I´ve done so far:
I´m working with php.
I´ve made use of #media queries, adding inside the <head> this: <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/css/smartphones.css" />, so it will call the smartphones.css file each time the users access the site with a small device.
Everything goes kinda smoothly, up until now, when I decided to adapt the dropdown menu.
I´ve got a dropdown menu in pure css, that gets activated on mouse over. I use :hover to get the menu to actually drop down.
I want to replace that big dropdown menu with many items (horizontally and vertically), to a single button, that onclick will dropdown, and show just a couple of things.
In order to do that I need to adapt my php page file to hidden the entire dropdown menu and show the "mini-onclick" dropdown menu instead. And here is what I don´t know how to do it.
I need some -javascript I guess- inside my body tag (as the menu appears inside the body) to say something like:
IF the screen is less than 700px, show this XXXX code. ELSE keep going with the rest of the page.
I´m planning to hide the normal dropdown menu using css inside the smartphones.css file, but don´t know how to show the special dropdown menu instead.
Any help will be greatly appreciated! THANKS!
Rosamunda
You can use the User-Agent HTTP header in PHP to determine if smartphone-relevant code should be generated instead of normal code.
You could also get screen properties via the screen object, and if it's a smartphone, attach the dropdown state to the onclick event and if not to the onmouseover event.
That's pretty simple. You just change your CSS from someclass:hover to someclass.hoverstate and when the dropdown needs to be triggered, you add the hoverstate class to the target element.
For a current project I'm doing I'm using PHP includes for my nav bar to save time when making changes to it. The nav bar is composed of a CSS sprite, which currently caters for the default background image for the anchor tags and the a:hover states. In this case having the same nav bar included on every page via the PHP include obviously works fine as neither of these states need to be conditional to any of the pages.
However, what I want to be able to do is to have a different section of the sprite visible depending on what page the user is currently visiting - just to show them what page they are on.
Without doing a PHP include I could have a different ID or class for each page (i.e. "page1Current") and just change the CSS accordingly. However, using the PHP include method I can't seem to work out a way to get around this.
I'm guessing that, using a bit more PHP, it would be possible to use some sort of IF statement to get the page address and use that to conditionally alter the CSS accordingly. Unfortunately I'm a total PHP beginner so I can't quite get my head around it.
I've not posted any code as I'm just looking to get the right idea, but if it helps I can post some.
Any help would be appreciated :)
Rich
You don´t need more php, you can set a class or id to every page on the body tag and give all your links a separate class as well.
If for example the id of your contact page is contact and the class of the contact link in the navigation menu is contact you can style that button on just that page using:
#contact .contact {
// highlight button
}
Why not include some a style tag in the html rendered by the include that changes whatever css attribute you want for your bar, ie :
<style type="text/css">#menu .navbar { background-position: 0 0 }</style>
in include #1 and
<style type="text/css">#menu .navbar { background-position: 50px 0 }</style>
in include #2