The page I am working on has a javascript function executed to print parts of the page.
For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth.
The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/
Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way.
Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided?
P.S.: On my real site the same occurs with Chrome. In the example fiddle Chrome seems to not show the same behaviour as Safari, though.
Edit: I also tried to have the printing button on a different tag than an a anchor, like span or button, but that didn't help with the problem.
Edit: I run into this problem with Safari 5.1.2 on Mac OS 10.6.8. In the jsfiddle example, the behavior shows as a white "flicker" that covers the whole browser after having clicked the print button and closing (either printing or aborting) the print dialogue.
Edit: Just started a bounty for this question, as I am still looking for an explanation for this browser behaviour. I am more than willing to give more details on the issue. From my experience on SO it is not adviseable to post links to online pages, however I feel the problem is really hard to reproduce. I think the "flicker & re-render" I experience with the posted jsfiddle is hopefully is result of the same problem.
Edit: As explained in the comments, opening a new window containing the current state of the application, then printing and closing that window, might be a fix, but I don't consider it a sufficient answer to the problem at hand.
If you can't figure a way to fix the problem you might get a quick fix this way:
var win=window.open() the same page you are on
then win.print() it, then win.close(). Hope this helps.
Sadly, I don't have a solution. but since I was able to reproduce this in Safari and Webkit with the fiddle, I thought I'll at least offer my observations:
The white-out doesn't happen if you hit Print dialog button right away. You need to wait few seconds before you hit Print to be able to see the white. On OSX 10.6.8 I see the threshold marked by appearance of the spinning beachball.
When the mouse stays stationary since the Print button hit, the page stays white until you move the mouse again (beachball still spinning).
Hope this will help somehow.
I'm not sure if this will fix your problem but i recently found a very good Jquery plugin to print only certain part of your webpage.
You should give it a try :) It has a some very cool parameters to customize it to your needs.
Take a look here.
Why does your page refresh? Here's my answer on that. the window.print() function will print the entire content of your page. So since i read that you only want to print a part of the page, I guess you are using some function to remove all unwanted content from the page for a very short moment, then you call the window.print() function and after that you put all orignal content again on the screen. This results in a very short flash that will look like your page is refreshing and will load all flash parts again.
I had the same problem yesterday and this jquery plugin really helped me out. I hope it will help you too.
Have a nice day!
Since it seems window.print() is not part of any standard, browsers are free to implement it in any way they choose.
The only work-around I can see, if you really have to leave the page as-is, would be to open another window and print that. Which is a whole other, possibly worse, can of worms.
Try this in your function:
document.write("<script type='text/javascript'>window.print()</script>");
I am referencing this stack:
After window.open, can't print in Safari for Mac
Update, Try:
document.writeln("<script type='text/javascript'>window.print()</script>");
Related
I find myself in need of a script to (1) open a link in a new tab and (2) close the current tab so the back button cannot be used to see the website that was previously being viewed. This is a security feature for a site, and unfortunately I'm at a complete loss. Nothing I've tried works and I don't know where to begin. This is likely very simple and is staring me in the face, but I don't normally find myself needing to use java for anything. Any ideas?
Its impossible, but as found in this thread how to stop browser back button using javascript you can prevent users from going back.
Theres a JS bin with an example
Edit - Please bear in mind the warning 'It is generally a bad idea overriding the default behavior of web browser.'
I have a website prototype https://arcane-beyond-35849.herokuapp.com/
I have a strange bug. In internet explorer v11.
please go to the site and press new button.
You will see this picture...
Then you can reload the page and see this...
I use the jQuery steps wizard.
So I have no idea why the first time everything breaks.
(If you need a code I can provide it just tell me.)
$(".myform").steps({
*some stuff and options
});
Okay I found another weird behavior when you go to the main page and try to click on the menu button in the right top corner nothing happens.
When you reload a page and click menu button again side menu appears.
I simply on document.ready use something like this :
$('.somebutton').click(function(){});
I guess I should provide code and I will do it as soon as get to another laptop. But if take away all business logic The code is as simple as I described.
In google chrome everything works normal.
Can someone help? Seems like my JavaScript code just doesn't execute.
Update:
okay guys Console give me some errors. My IE11 not in English so no point to post exact errors here.
There is something about the content that is loaded over http when I have https.
But it's just a placeholder picture. So I don't know. And when I reload page my JavaScript code works. So this is strange.
The client's website has product listings. The prices for the product are pulled dynamically in through an iFrame at the bottom of the page. There is Javascript on the page that automatically resizes this iFrame to the correct height based upon how big the iFrame content is, once it's loaded.
The client is reporting that when printing the page, they cannot see anything from the iFrame where the prices should be - apparently it is not printing in IE, just the main page itself.
I am on a Mac and so can't test in IE, so I'm having a hard time experimenting with this.
Can anyone clarify the expected behaviour in this situation? Is it possible to get IE to print both page and included iFrames by default, and if so, how would I go about doing this? I can only find examples for printing a specific frame from a parent window.
Thanks!
The expected behaviour should be what you're experiencing in other browsers. If the page is printed, the iframe should be printed along with it. It would be difficult to imagine that everyone else got it wrong and IE got it correct in this instance.
Below is a bit of speculation on what the issue might be, but without knowing more/seeing code it's difficult to know the specifics:
This issue could be due to some css that you may have on your page. I've read of similar iframe printing issues where the visibility was set to hidden initially resulting in the iframe not printing correctly. To get around this specific case the user had to set the width and height to 0px. Without knowing more about your site, I can not correctly predict that this is happening.
Another issue may by your dynamic resizing based on the contents of the iframe. A simple test would be to comment that section out and set a generic width and height on the iframe to see if the printing issue still occurs. Perhaps those dynamic styles are not being carried over to the print stylesheet and are not getting applied (therefore not appearing at all).
As a quick suggestion, look into css media types:
print
Intended for paged material and for documents viewed on screen in
print preview mode. Please consult the section on paged media for
information about formatting issues that are specific to paged media.
Helpful link: Print Specification
This was an interesting point, so I did a test using IE8 (on a server, not locally).
I printed in IE8 a web page that included an iframe of something that I built. And it printed some of the contents the first time (the other contents showed up black). The second time I printed, the iframe contents were all black.
However, in my example, the contents in the iframe are changing constantly (images and text that fade in and out) and the css background behind it is black.
This test has the contents of the iFrame on a different host server than the contents of the main page. But to my knowledge, there is a cross-domain policy file working here.
Cross-domain policy issues were my first guess, but it's entirely possible there is some issue with how internet explorer renders the screenshot when it sends it to the printer.
If you are using Javascript, then why not try window.print() function along with print media CSS.
I can't explain why IE isn't working, but maybe you can fix the problem by adding this part of code into the parent page, in order to force each iframe to be refresh :
$(document).ready(function() {
if($.browser.msie) {//Only for IE
$('iframe').each(function() {
$(this).attr('src', $(this).attr('src'));
});
}
});
To get the browser, i use this method.
And i don't use contentDocument.location.reload(true); method to be sure the iframe to be refresh. See SO topic.
Try this Plugin it will solved your problem
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
I have a really weird problem.
I have a site (running wordpress), and I use jquery roundabout plugin.
When I visit the site with the address bar, the site is displayed fine. When I'm already in the site and I hit refresh - everything is messed up. I checked in both chrome and firefox, and I get the same result. In IE there is no problem.
Also, I noticed that the problem occurs only when doing a soft refresh (F5) and it's ok when doing a hard refresh (Ctrl+F5)
You can check for yourself in my test site
http://50.112.34.111
try to press enter in the address bar a few times - should display ok. try to refresh - and you'll see the problem...
First of all I would try to put the JS includes (<script.../>) in the header AFTER all CSS includes! That might already help. Since the CSS might influence your JS, JS has to know all CSS before it gets loaded.
I've been looking at using a script I've found online (here) as a basis for a website I'm looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page "repaints" - I think this is the right term - and all is well again.
Is there anyway to do a repaint like this? I don't mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you'll see the problem when trying to then scroll.
Initially I'm thinking there might be some javascript I can call at the end of switching pages that repaints the page.
Thanks
You could try doing something like this after the slide has completely transitioned to a new page:
Since you've commented that it didn't work as I originally suggested, here's a way to "encourage" Chrome to do the hide/display trick:
$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
$(".slide.loaded.prev").css("display","");
});
or you could try this:
var slide=$(".slide.loaded.prev");
slide.css("display", "none").height(); // just get the height to trigger a relayout.
slide.css("display", "");
The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.
It appears that the scroll bar is for the previous "slide" in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current "slide's" content.