I'm trying to adjust a set of divs to fit the "Avery" business-card printer paper. What this thing does it allows the user to print out the content of a dynamic number of divs (as business-card shaped) unto a specific type of paper to easily separate the pieces post-printing.
My problem is that every browser displays the "window.print()" content differently. If I try to set up the divs to fit the printer-paper under Chrome (for example) it won't work well if the user prints the same document from Opera or Firefox.
I tried three browsers so far (Opera, Firefox and Chrome), and each one of them displays the content slightly differently. The problem with this is that I can't control which browser the end-users will utilize when printing.
Is there a way to create a file that is read equally from any browser? I know the pdf is suppose to do that, but is there a way to dynamically generate a pdf in js or jquery?
Thanks much in advance.
You can use jsPDF
http://jquer.in/random-jquery-plugins-for-superior-websites/jspdf/
See live example:
http://parall.ax/products/jspdf
Related
My website project uses html, PHP, javascript, css and mysql. My page is always fullscreen. (so no browser bars etc) Everything that is being displayed, is controled by my code. However...
My page reloads a php page in an iframe every 0.5 seconds. (and more might be added) When the page is loading, I get a "connecting with 192.168.XXX.XXX", or something scimilar, in the left bottom of my full screen. How do I disable these kinds of messages?
Most of my buttons are already javascript functions, since they have to do multiple things, but with a href=, I also get that same display in the bottom of my browser. This really screws up my full-screen layout.
Things I've tryed: google, and changing z-index of my images, in the hopes it would cover up this "connecting with" info box.
I would like to get a CSS/javascript solution for this problem. If I need to change browser settings with the "about:config" page in firefox, that is also fine.
*PS: English isn't my native language, and my browser is also in another language then english. Tryed to find a solution on google, but could not get any relevant info, not even the name of that bar.
As far as I know, it isn't possible to fix this problem using any code on my web page. It is browser related.
Finding some help at the mozillazine.org forums, got me to some good search queries.
If you want to remove the status bar (that's what it's called), you can use the plugin "Status-4-evar". It gets you the ability to turn back time, and get some lost functionality back into firefox. It also allows you to disable the status bar. However... When in full-screen, firefox (version 43.something) then puts back the unwanted status bar, even if the plugin/add-on should have blocked it.
Second solution should be to create a userChrome.css file, and put it in some directory in your firefox profile. Finding this directory using the mozilla KB was really frustrating, since it isn't correct/out of date.
Correct location for your userChrome.css file should be:
C:\Users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles*random string*.default\chrome\
c:\users\XXXXX\ could be different on other windows versions. The chrome folder might not excist, so just create it.
Then create the userChrome.css file, if it does not excist already, and add the following tekst:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.statuspanel-label {background:#FF9!important;color:black!important;font-family:"DejaVu Sans Mono"}
statuspanel {display:none!important}
statuspanel {max-width:90%!important}
statuspanel[type="overLink"] .statuspanel-label
statuspanel[type="status"] .statuspanel-label[value^="Looking"]
statuspanel[type="status"] .statuspanel-label[value^="Connect"]
statuspanel[type="status"] .statuspanel-label[value^="Waiting"]
statuspanel[type="status"] .statuspanel-label[value^="Transfer"]
After having done that, restart your firefox, and all status bar messages will be removed, even in full-screen.
I'm encountering a lot of problems with printing on a rather huge website we are working on.
The problem is there are issues in FF, IE etc... that appear only when printing.
The workflow is like this: I click a print button on the page, a popup opens with different template and styles and the window.print command is triggered.
MY POSSIBLE SOLUTION:
When the popup opens, I will render the entire DOM in a canvas element and then put it back in page as a png file, and then trigger the print action.
Is this a feasible solution?
You can approach this in two ways:
Browser extension
Writing an extension for the browser(s) (at least Chrome and FireFox) will allow you to grab the current content as a bitmap you can use with canvas.
This is probably the fastest option as the screen snapshot is created internally. Though, I am not sure if the browser snapshots client window or the full document so this need to be determined.
Simulate the DOM tree
There are libraries such as html2canvas and canvas2image that simulates the DOM tree and tries to render an approximate representation of the web page.
There a couple of things to notice with this:
It's relatively slow
You may run into cross-origin restrictions in relation to images (work around is to use an image proxy)
You cannot get content of "foreign objects" (Flash, Java etc.)
It is not 100% accurate (if this matters)
When you have a snapshot one way or the other the other things should be straight forward. Just remember that users have different printers, drivers and resolutions and you may not be able to produce identical results cross-over as you are also dependent on the browser's own print implementation.
provide special css for print view:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
in which for everything you dont want to print use something like:
#qqq, .#aaa, #header, ...., ...., .banner{
display: none;
height: 0;
width: 0;
}
so you leave only content you want to see printed. In this case visitor or you dont need to use special print popup version. Just click print.
example: http://viliusle.github.io/miniPaint/ - only canvas will be printed.
We have a print functionality on our application which we implement through JavaScript window.print where in we print those pages which have records to be displayed. Some of these pages have pagination which have records greater than 20.
The functinality works fine in almost all browers except IE 7, in which either the print popup does not open when the page has pagination or if it opens an empty page is printed.
Any pointers to deal with such a problem?
If I had to take a guess based on what I can see, it is more then likely not the window.print() function at all. To print we usually would use conditional style-sheets to format the page for print #media print but this is not supported by IE7, however a conditional IE style-sheet with an media="print" attribute can force it.
The reason I say this is because IE is a dinosaur now, it does not play nice when it comes to re-rendering for something like printing, so a conditional style-sheet is critical to get proper functionality.
Though considering that IE is so outdated and that even things like jQuery is starting to remove support, I would not be to worried and just stick with the more modern browsers witch will save you a lot more time in the long run.
this link shows another post similar to this one.
Support of media queries, IE 7 is not even listed!
I am trying to make a web page which allows users to drag and drop images into Microsoft Office applications, specifically Powerpoint.
By default (as of FF3.5), Firefox will insert the source URL when an image is dropped rather than the image itself. After adding the following Javascript/jQuery code (derived from https://developer.mozilla.org/En/DragDrop/Drag_Operations),
$('img').attr('draggable', true).bind('dragstart', function (event) {
event.originalEvent.dataTransfer.effectAllowed = 'copy';
});
dragging and dropping works from Firefox to Word and Excel, but not to PowerPoint. For an example of what happens, see http://slides.html5rocks.com/#drag-and-drop. I have tested this with FF3.6 and FF9.
How can I make it work with PowerPoint?
Just drag'n'drop outside the boundaries of the ppt slide (to make sure you're not dropping on a predefined textbox) - and release the mouse button -no coding needed!
Firefox drag will drop the image at the center of te ppt slide.
Status quo
Sadly there is nothing you can do from within your browser and the application to enable drop support for PowerPoint.
This is something that needs to supported at source level in PowerPoint (and it seem to be if you don't drop the image on an existing element but right outside the slide frame you want to drop it onto - but probably depending on version).
If it (for some reason still) does not support the image part of the drop but just the link (and if there is no option provided for changing this behavior) there is little to do but to hope Microsoft will update PowerPoint with this support in the future, - or - check the following options for work-arounds if needed:
Add-ins
You can look into writing an add-in (or possibly just use a macro - you might need to lower security to medium [PDF] for macros) for PowerPoint that will take the link that is dropped and replace it with the image the link refers to.
Here is one place to get you started making add-ins if this is a viable option.
Here is a commercial framework that makes creating add-ins very simple.
(disclaimer in this regard: I am here assuming this will be possible due to add-ins such as this which allow you to show a live web page inside PP).
Pipe-line / work process
There is also the option of injecting a third-party applications in the pipe-line to do screen snapshots of the image and have it inserted automatically into PP.
SnagIt is such an application (and there are probably others) and it has free extensions that will allow you to integrate "snags" directly with PowerPoint.
Or (the perhaps too obvious option): simply copy the image in browser and paste it into PowerPoint.
What is your version of Powerpoint?
It's very important because image format support may be lacking.
If that's the case your code needs a minimum version warning addition.
Could also ask to convert image to suitable format.
It may even be the case that it's impossible to the version of Powerpoint you're using to support this in the way you want.
You could try to use html code.
This code might help you:
http://classroomtech.org.uk/2008/08/drag-and-drop-in-powerpoint/
Other possibilities are OLE object with a link to a image.
Could check how other Microsoft applications, that do something similar, handle things.
If that doesn't work you could try to generate an OLE object with a link to the image in it.
Browsers can display certain media inline, and will provided they are sent with content-disposition: inline. What's the best way to detect whether the browser is capable of doing so with a particular type of media?
I am running into the question lately with PDFs and Mac/FF, which seems to refuse to display PDFs inline (actually, in iFrame), instead prompting a download. I don't mind the forced download; I'd just like to be able to anticipate it so that I can give the end user a nice "download" link rather than an iFrame that fails at displaying inline content. My current solution is just browser detection (sample code below), but surely there must be a better mode.
var isMacFF = window.navigator.userAgent.search(/Mozilla.*Mac/i) != -1
This doesn't directly answer the question, but something you need to be aware when analyzing any answer you get - you can NOT reliably 100% determine that due to assorted browser plug-ins.
Specifically, in case of FireFox, look at PDF Downloader as an example - it basically allows the user 100% full control over how PDF gets displayed.