I have tried to search for this all over, but haven't found anything close to my question anywhere.
Does anyone know if it's possible to print out a CSS generated linear-gradient? I am mocking up a website for my boss, and it looks really nice, but when I try to make a printer-friendly page, the gradients don't display at all.
For reference, what I'm trying to print is a indicator bar that has a slider element on top of it, to indicate the result of a value within a range.
The gradients look really great on the page, but just don't show up in a print dialog.
Thanks in advance!
If i understand your problem correctly, sounds like all background images aren't printing right? That's a default behavior of IE. To print background graphics (which might include your 'gradient graphic', go to print -> page setup and click on "Print background colors and images".
Hope this helps.
Not exact here, but printing is rendered in it's own engine apart from the browsers engine.
It TYPICALLY (with the exception of say, the iPad) filters out background images and certain types of rendered material to save on ink. The only way to change this is if the user changes his or her own printing preferences.
There is no CSS or Javascript way to make this happen, unless you render the page as an image, and print the image.
I can go in to more detail if you'd like, but with the exception of the iPad, print formatting like eMail formatting is a tricky area to get in to.
Related
How do I create a global overlay of all tags?
Pressing a shortcut should make all tags appear in seperate boxes in one screen. It should look something like this:
How can I make something like this? How can I seperate tags in boxes?
My collision module or the bling module has something close enough. Getting the exact layout you ask for is non-trivial because AwesomeWM is not a compositing window manager. This means it cannot really take screenshots (let alone live-views) of invisible clients/windows. Usually, the only "safe" thing is to display the outline and client icon.
If you really, really want this, you need:
A compositing manager such as picom
Either these patches or use gears.surface(client.content) to take a screenshot
Lot of code to properly render a wibox with the right screenshots. You can read the bling or collision code to know how to get the size and position.
I want to show the user how a page will look when printed, without actually asking them to click on the print button. I have the necessary media query based CSS for printing, but that will only be applied in print preview and when the page is actually printed. My requirement is to display the print formatted page in a dialog box within the app.
I have come across this same requirement for a project. AFAIK this cannot be done as the #media print rule is specific for printing to low cost devices, as per the specification.
My workaround has been to emulate a printed paper using CSS. For instance, I created a div with a grey background and then an inner div with a white background, emulating paper. I set margins according to my print margins and placed html inside this container. This approach does not guarantee by any means a replica of what to expect when printing, since elements such as wide tables and images might make the container wider than the printed page, while a print engine could apply scaling.
Compounding these issues, it is not possible to reliably predict how print engines and printer configurations might handle page breaks. You can help with suggestive css attributes in the #media print rule, like page-break-inside, page-break-before, page-break-after, widows, and orphans. In my print preview div, I simply layout a continuous html within the emulation containers and make it clear to the user this is an emulation.
In other topics I've found that IE/FF doesn't print background images by default. Now that's a shame, because background images add some possibilities that are very difficult to reproduce with classical <img> tags:
You can align them both horizontally and vertically
You can crop them if they are larger than the target element (which also enables the idea of CSS sprites)
Now, it's not impossible to do, but it will require me to have different HTML layouts for printing and normal page, and the printing layout will be quite overcomplicated (since I'll have to use <table>s to achieve vertical alignment). Also, the benefits of CSS sprites will be lost.
Is there any hope? I gather that #media print doesn't help, but isn't there something else, maybe browser-specific, that would allow one to say: "Yes, this isn't a normal background, it really needs to be there even in print view"?
Not possible. You would have to some how convert your background images to img or use Canvas. Of course using canvas depends on which IE you supporting.
Its a browser setting which restricts the printing of background images. I think the logic behind it was that the vendors wanted to give the users the option of printing background images and ensure that the web developer could not alter these settings through some sort of script.
As a general rule, background images should be reserved for adding to the page design but aren't essential to understanding the content. Therefore it shouldn't matter if they are missing when the page is printed. If something (such as a product shot) is important, then it should be included as an actual image (which has the added bonus of being more accessible).
Could you look at including the image, then hiding it using CSS and duplicating is as a background image (perhaps dynamically using JS)? That way, you can ensure the image itself shows in your print stylesheet, and you get the benefits that having a background image brings. I've created a very simple example here.
I'd like to add a description field to an application that can be as long as several lines (or even paragraphs) or as short as a one-liner.
Instead of taking up a lot of screen real estate or have scroll bars, it would be preferable to have the textbox grow based on its input.
On IE6 adding Style="overflow-y:visible" accomplishes this nicely (both on display of read only, and if we are in edit mode).
However, it has no effect on Firefox, or IE7 for that matter.
Is there a relatively easy fix for this?
Thanks!
You can accomplish this using jquery if you want to go down that route. It's a nice effect, kind of like the comment textarea in facebook.
http://javascriptly.com/examples/jquery-grab-bag/autogrow-textarea.html
I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?