I'm using ng print directive for angularjs that provides the ability to print pages built using angularjs.
https://github.com/gilf/ngPrint
It works in Chrome and Firefox, however in IE browsers, even in the latest ones, the content disappears. There is a line of code where innerHTML is set to "" and then the cloned DOM is appended using appendChild followed by a window.print() function.
function d(g) {
var h = g.cloneNode(true);
//f.innerHTML = "";
f.appendChild(h);
window.print()
}
The page I'm trying to print contains ui-grid tables. On clicking the print buttons, the original contents i'm trying to print shrink in size like shown in the attachment. May be there is some IE quirk that is not adding the css files? How to get around with making it work in IE browsers?
Related
Using the latest version of the FireFox (40.0.3) on Mac:
Run the following code:
$(function() {
var $sc = $('<script id="tempScript" type="text/template"/>');
$("body").append($sc);
$("<div><h3>Hi</h3></div>").appendTo($sc);
});
Then in the console run:
$("#tempScript").html()
Actual result:
result is "undefined"
Expected result:
It should have returned: "<div><h3>Hi</h3></div>"
This is very serious problem and has effected a lot of our web applications functionality. Basically has broken a lot of pages of our applications.
Is there a workaround for this?
We would have to use Javascript to generate the dynamic content.
UPDATE:
I changed the script tag to a hidden DIV and Firefox started to respond. This is a good workaround for the time being, but I am surprised why Firefox would not handle the situation correctly when script template is used.
Turns out Firefox does not handle dynamically added script text/template tag and cannot return its HTML content in Javascript (Chrome and Safari work fine).
I changed the script tag to a hidden DIV and Firefox started to respond. This is a good workaround for the time being, but I am surprised why Firefox would not handle the situation correctly when script template is used.
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'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
I am currently working on a contenteditable iframe, which so far works perfectly under all browsers except for mobile Safari. I am using iOS 5.1.1. The issue is reproducible in any version of iOS that supports contentEditable up to the latest.
The issue is the following:
The content gets focused correctly when you tap on it, you can move the cursor and everything, however once you apply an action to it the following happens:
The focus is still in the iframe and you can see the cursor, however it does not respond to keydown as it previously did. Nothing happens, even if I move the cursor and still try to type anything inside.
Here is an example of what happens:
http://www.quirksmode.org/dom/execCommand/
If you focus the iframe anywhere inside the content and say you apply text-align right. The content is correctly aligned to the right, but if you try typing any additional characters, you can see that the ui locks, but no new characters appear inside where the cursor is. If you try to apply a different command it would still work though.
Does anyone have an idea of how I can workaround this?
you can simply use Iframes design mode instead of contenteditable attribute to make any HTML elements editable .
the javascript code to make elements in iframe editable is :
var iframe = document.getElementById ('the iframe Id ') ;
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.designMode = "on";
As I read no cross browser problems found in this method
for complete reference see here
Is upgrading your version of iOS an option? I just tested all the conditions you described using iOS 6.1 without a problem.
Since iOS5 was the first version of iOS Safari to support content editable, it's likely that the implementation contained bugs. It appears to have matured.
iOS 5.1.1 supports very minimal features of HTML5. It will work perfectly fine after you've updated it to iOS 7.
http://www.measureraajje.com/
The webpage works fine in firefox and opera,
but it doesn't work at all in internet explorer, google chrome and safari.
HOW IT SHOULD WORK:
The user should select an atoll first... then the adjacent combobox should display a list of islands.
After selecting 2 islands. the user will have to press add route... then the route will be added and the result will be displayed in the table below.
Use a single script tag at the end of the body tag and put in every js code which are using html elements of the page. Html elements must be present before excecuting javascript code.