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
Related
My nav menu items (li's) are changing size on different pages and I can't figure out why. Nothing is different with the dom prior to the main content, however, from the home page to the contact page, the size of the entire menu increases by about almost 7 pixels, from 655px to 672px. I tried both Chrome and MS Edge and it happens in both browsers. I am using em for the menu font size but in the inspector it computes as 16px for both pages so its not that. The menu is actually brought into the page using server side includes so the html itself and the associated css is identical in both pages.
It's not really a big deal, but I do want to figure out why it's happening. I would put the relevant code here but have no idea which code is causing it. Its a basic html/css website (although the contact page is php, could that have something to do with it?).
https://avayoupaint.com
I shouldn't be doing this, as you shouldn't be sharing a link to a production site, but instead share code of your menu and relevant styles.
If you are on a Mac like me, and inspect your menu, you'll see the letter o for "Home" is different. Inspect with DevTools, and you'll see one is serving Open Sans, the other page serving Helvetica.
Somewhere in your code, you are not loading the fonts consistently (probably a file path issue). One font has slightly different letter shapes than the other, explaining that 7px difference.
EDIT: DevTools might be showing this for you:
Blocked loading mixed active content “http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800”
Make sure to load the Google Font using the https protocol to avoid this issue.
I want to remove URL from page at printing time with PHP is there any way to do this? Actually I don't want to push my clients to change their browser's settings at printing time.
Any help really appreciated!
That is a browser setting, unfortunately you can't change it and it sucks.
Only workaround that I can think of is that you serve PDF file which could be displayed inline if user has PDF plugins installed. In that case you have full control of content and user can print it.
No. As per my knowledge.
The web-page url that gets displayed while printing a web page is a feature added by a broswers, and hence it can't be done through php as it is completely server-side scripting.
Also, I guess this can't be done using javascript, as said before "This is a feature of browsers" and javascript can be used to manilulate the dom of the page only.
I guess you cant do such thing.
You cant change in browser defaults like printer settings, margins, or any other browser setting, temporarily or permanently, from CSS or JavaScript.
There is a #page directive in css that enables some formatting that applies only to paged media (like paper). Refer link. But problem is this does not work in Firefox, Google Chrome, but it works in IE 8 and Opera 10.
Programmatically, you can't control this and it does suck. There are options that control this are part of the specific browser. Therefore, each user would have to change their browser settings to remove the URL from printing. Unfortunate, I know, but the browsers don't let you have that much control over them. One way to get around this is to generate a PDF document for printing. Any document that is downloaded and printed from the client machine rather than from within the browser will not have this problem.
Also, you may have a look at Prevent Firefox or Internet Explorer from Printing the URL on Every Page
Change Firefox setting
Go to file->page setup -> Margins Header & Footer and set --blank-- what you need.
See more here
Maybe you can try to use CSS properties like "#page", "#top-left", ...
For example:
#page {
#top-left {
content: "";
}
}
I found this example on W3C website : http://www.w3.org/TR/css3-page/
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.
I don't know why the space between the content-bottom and the footer is bigger than the space between header and content-top you can see an example here: [not found]. I want the same equal spacing for the content(that box) between header and footer...but always I get bigger spacing between content and footer..and I don't know how to fix it, please help me guys.
Best Regards
You have given your header, position:absolute and footer position:fixed. also height to middle container. This way your elements won't flow correctly.
My suggestion:
give header and footer position normal.
and give content:
.wrap {margin:100px auto; width:---px;}
Instead of using .css('height'), use .height() or .outerHeight() if you want to calculate also padding and margins of the element in question.
You can download the Firebug plugin (http://getfirebug.com/) if you have Firefox. Using this plugin, you can view the CSS of individual elements on the page by hovering over them and pressing ctrl+shift+c.
You may also view paddings, margins, and heights via the "Layout" tab as well as edit CSS and see updates immediately as live, local changes. That allows for rapid CSS debugging.
When I view the page source of a page (like this for example: http://my.sa.ucsb.edu/public/curriculum/coursesearch.aspx) there's not very much code/info in it. On that linked page, for instance, none of the class info is shown in the page source.
BUT: when I view it in firebug, I can see a lot more of the html information. For instance, I can see all of the class info, in tables.
Why is this? How can I access the full (firebug html)? Can I do it in php/javascript?
This is the order in which stuff happens:
PHP generates HTML
Browser loads HTML
JavaScript manipulate loaded HTML
Why is this?
The view source browser feature normally shows the plain HTML as received by the browser. Other advanced tools like Firefug are able to display the current HTML after being changed by JavaScript. (Firefox itself has this feature as well: just right click on some generated HTML and choose "View selected source".)
How can I access the full (firebug html)?
I'm not sure about the HTML tab but the Network tab always displays documents as received from the server.
Can I do it in php/javascript?
PHP is no longer running when the original HTML reaches the browser.
JavaScript can display HTML with the .innerHTML property of any DOM node.
View Source shows what the browser got from the server. Firebug shows the browser DOM - i.e. representation of the page view that exists in browser memory. DOM can be changed by Javascript. Javascript can access DOM by using document value and then going to its children, etc. - for example, to see all tables, you might do document.getElementsByTagName('table')
If you want whole DOM contents as HTML, you can do something like document.getElementsByTagName('html')[0].innerHTML
View Source simply shows you the HTML loaded from the server, which means that any changes done to the DOM after the page has been loaded will not be shown. The Page source only shows you the first source when the page finishes loading.
On the other hand, Firebug is dynamic and shows you the DOM and how it is being manipulated. When the DOM is being changed, Firebug's source will change as well. This is important for debugging as you can see what is really going on, unlike the View Source.
When viewing the source with "View Source", the HTML you view is the HTML of the URL you are in, and the HTML without any modification from JavaScript and the sort.
Also, if the page had frames or iframes in its code, the content of them will not show either.
Instead, in firebug, changes to HTML dynamically and content of frames/iframes will be visible.
Also, viewing the source of a page before it's fully loaded, can be a reason of not having the whole HTML code (or any HTML code at all).
Traversing the HTML code with JavaScript will always return the full updated HTML code. (i.e. what you would see in firebug)
I'm not sure how you want to access the HTML with PHP, but PHP does not have access to the code after it reaches the browser. But if you are sending a URL to PHP to load the HTML, the HTML you will have is the original HTML before any dynamic changes (i.e. the one you would see in "View Source")
Also firebug will show you the css file which will just be targeted from the main html via
<link rel="stylesheet" type="text/css" href="css">
Therefore showing some more information.
Page source shows you HTML when page was loaded for first time. It does not show you modifications made using javascript etc after page was loaded or after you clicked any button on webpage. To view the currently visible DOM, you can use the following:
For IE/firefox, following bookmarklet works:
https://www.squarefree.com/bookmarklets/webdevel.html#generated_source
For google chrome, right click on any element and choose 'Inspect Element' option. It will show the position of element in DOM. Now right click on '
For opera, right click on any element and choose 'Inspect element'. This will start opera dragonfly. In dragonfly window, Click on 'Expand the DOM tree' button (first button with a dot and two arrows) and then 'export the current DOM panel' button (second button)
In IE, open the webpage and press F12 to open developer tools. Click View->Source->DOM(page) or shortcut Ctrl+Shift+G in developer tools window. This will show the complete currently visible DOM.
For firefox, alternative is Web developer toolbar extension and choose View Source->View Generated source in it.
View source gives you the source of the page when it is loaded, to get the current html, there is a option in web developer tool (Firefox addon) - "View generated source"
in menu :
view source -> view generated source