As a web systems programmer, I'd like to generate some reports and be able to send it to the printer directly from my user's browser, wich is in the client side, not needing to generate PDFs or something like this.
I would like to be able to:
Print user friendly paging, something like "Page 1 of 3"
Print some things in the bottom of every page, like "Generated in 2009-02-20"
not printing the URL
Is all this possible? Javascript? CSS? What are the best practices here?
All those things are controlled exclusively through browser preferences. If you want to be able to specify that, then you probably should be looking at PDF instead of HTML.
You're out of luck using the browser there... I think it is impossible to not print in the corners the URL, Date/Time Accessed etc.
However, Page 1 or 3 etc is generally always printed somewhere (bottom right corner I believe in FireFox)
Printing a 'Generated in 2009-02-20' is easy enough, however printing it at the bottom of every page will be difficult. Most browsers, IIRC, display the date and time accessed in a corner (though not in that format, in a more readily human readable format).
Anything you want to appear in print but not in the normal screen view, will need to be shown using a print stylesheet.
For what you want here (complete control of the printing output), I'd recommend generating a PDF. Perhaps if this is an internal tool, you might be able to program a plugin for Firefox that may print your pdfs automatically, but I'm not that familiar with the capabilities of Firefox plugins so you'd need to experiment.
Support from different browsers is surely lacking, but css has a media type called print, to use it, just define a section in your css file or tag like this:
#media print{
/* normal style declarations
but you probably want to hide menus
and other navigation, also use black on white, etc.
*/
}
#media screen{
/* your current stylesheet */
}
This List Apart article covers the basics.
And here's an entry point to the wc3 specification.
you might be able to use SQL reporting services to generate your reports. It uses its own client print control activex though, but the results are good.
Related
I have been searching for some solution to make my home page on mobile devices different than on normal browsers. I need 100% reliable solution but i found only:
Checking with $is_mobile (it doesn't work in all cases)
Using JS scripts to calculate device screen. Not sure how to apply that, all the solutions i have found were only useful for some elements on website not to change the home page in genereal.
Is there any solution to that? Most of the posts seems to be outdated also.
I too spent a lot of time on this topic. I would simply say do not use wp_is_mobile. It can be used to load an entirely new page but it is not reliable. And since you are looking for a reliable solution I would say do not use it. It fails.
Rather use javascript to alter different elements of your home page based on the screen size. Also use media queries.
Some important URLs which you might like to read to get more idea :
https://codex.wordpress.org/Function_Reference/wp_is_mobile
https://wordpress.stackexchange.com/questions/188881/proper-usage-of-wp-is-mobile
https://wordpress.stackexchange.com/questions/73273/wp-is-mobile-function
https://wordpress.stackexchange.com/questions/50219/responsive-theme-design-how-have-slideshow-on-desktops-tablets-and-static-photo/50265#50265
I'm wondering about using the print option by using JavaScript in Firefox.
I have a page that has a print link:
print
I also have followed the instructions on About Javascript's print button page.
The problem is that when I try to print a page under Firefox, I get a four page PDF preview with missing content:
The first page is empty,
The second will start with the content that should be on the third page, and
The third and fourth pages are empty
I tried using Chrome, and it works as expected.
Any ideas?
The best way to get a consistent printing behaviour is using a print stylesheet. This defines exactly, which content should be printed how, because browsers differ strongly on that matter. Some browsers have problems with certain markup (e.g. floated elements).
You can find a very good article about print stylesheets on A List Apart that should be very helpful for you.
Certainly there might be other good articles which are newer but this ALA article is so fundamental that it still is worth reading even though it is 10 years old - which is like stoneage for web-content;)
It's all because of Firefox inability to handle different container styles. I use UIkit and fixed the issue by adding the following code to my CSS file:
#media print
{
.uk-grid {
display: inline !important
}
}
You might want to set "display: inline !important" for classes you use.
I'm trying to allow the user to view a PDF from a webpage, but disable them to download or print said PDF. I keep running into problems with flash or chromes built in PDF viewer. I've tried Iframe, normal embed, PDF security, adobeJS or w/e it's called but no luck.
Anybody have a universal suggestion on how I can get this to work?
1a. You can not send content to a user that they won't be able to print, or save... The closest you can come, would be to show the equivalent content in Flash, and then they can only print the "visible" portion in the flash viewer.
1b. If it goes over the wire, it can be captured.
What are you using to generate the PDFs? You should be able to do a "write-only" PDF, and YMMV even on that.
After 8+ hours of trying many different approaches to the problem we ended up going with a paid option of Scribd which works in all browsers and looks decent enough for us to use. That is our solution.
I am trying to extend some Javascript in one of my pages and for quick "will this work" code it's a huge pain. Basically it consists of editing code in my IDE and save, switch to Firefox, reload page, set breakpoint in Firebug, examine and repeat
Are there any Firefox extensions that will aid me in this respect?
The only thing I can find is using javascript: ... in the address bar, but that's a huge pain, can only hold a single line, and there is no way of making the test code persist across a page reload.
Try jsfiddle.net. You can experiment with html, css and code within your browser and debug that with firebug for example. You can use a diversity of js-frameworks (or none), simulate XHR, and add your own (js/css)resources. It's not ideal, but much better than the practice you described.
You can also try using KomodoEdit, which offers 'view in browser' functionality, even for URLS and with a preset browser.
just use the js console that comes with firebug. You can write all manner of code in there and even declare functions and variables that can be referenced. if you need more than one line, firebug can do that too.
EDIT: except page reload.... if you need to do page reload it needs to be saved somewhere. I would use a Greasemonkey script
You can use the Web Console (new in Firefox 4 and higher) - press Ctrl-Shift-K to open it for a particular page. The command line is at the bottom, press Shift-Enter on the command line to enter more than one line.
Every day I use a web site which has a really great flash card system for language learning.
However, the authors of the site seem to have a really bizarre sense of what makes for good usability. They make font sizes so large that you only get a few lines of text per screen, and you have to scroll down to access buttons. And don't get me started on what it's like to access the site from a mobile device.
I've been in contact with the developers of the site, and I have even written CSS and header code for them in order to try and help. While they're nice people, unfortunately they have for months been unwilling or able to make changes.
So, I'm going rogue... I want to be able to impose my own damn CSS.
I vaguely remember this being a possibility in a Firefox addon, but can't seem to find it now.
In any case, because I aspire to use this on my mobile phone as well, here's the ideal solution:
I'd like to be able to set up a page on my web server that relays to the source web site, but over writes the CSS and displays it to me with my own CSS.
Is this possible? I know some CSS tricks to over write inline styles, but I'm much less clear on how I can set up a web page to relay the content of another page.
I hope my explanation and goals are clear. I will try to clarify more if I haven't conveyed any part of this properly.
Thank you for any tips.
Update: Here is the CSS I've placed in my userContent.css to try and get font size under control.
#-moz-document domain(badsite.com) {
body {
font-size: 12px;
}
font {
font-family: inherit !important;
font-size: inherit !important;
color: inherit !important;
}
}
You can edit userContent.css in Firefox. Use the #-moz-document to target that site only.
#-moz-document domain(bad-ui-site.com) {
body {
font-size: 80%;
}
}
I'd like to be able to set up a page on my web server that relays to the source web site, but over writes the CSS and displays it to me with my own CSS
I'd recommend you don't. It is difficult, and probably violates their terms.
I believe the FireFox Addon you are referring to is FireBug
As for the problem you're having, I thought that Internet Explorer let you define your own default styles for Web Pages?
depending on the site structure and it's security, it may be possible to use your own site as a proxy for it. In this manner, you would have the power to change any client-side content such as css,js and html.
This is very unlikely to happen, because it would imply a great effort to "redirect" a whole site to another one; in many cases, if the site is not secured, it surely has a server-side functionality that you want to use in your proxy and which you can't "copy" with this method.