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 ex
function getScrollTop(){
ReplyDeleteif(typeof pageYOffset!= 'undefined'){
//most browsers
return pageYOffset;
}
else{
var B= document.body; //IE 'quirks'
var D= document.documentElement; //IE with doctype
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}
alert(getScrollTop())
If you don't want to include a whole JavaScript library, you can often extract the bits you want from one.
ReplyDeleteFor example, this is essentially how jQuery implements a cross-browser scroll(Top|Left):
function getScroll(method, element) {
// The passed in `method` value should be 'Top' or 'Left'
method = 'scroll' + method;
return (element == window || element == document) ? (
self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] ||
(browserSupportsBoxModel && document.documentElement[method]) ||
document.body[method]
) : element[method];
}
getScroll('Top', element);
getScroll('Left', element);
Note: you'll notice that the above code contains a browserSupportsBoxModel variable which is undefined. jQuery defines this by temporarily adding a div to the page and then measuring some attributes in order to determine whether the browser correctly implements the box model. As you can imagine this flag checks for IE. Specifically, it checks for IE 6 or 7 in quirks mode. Since the detection is rather complex, I've left it as an exercise for you ;-), assuming you have already used browser feature detection elsewhere in your code.
Edit: If you haven't guessed already, I strongly suggest you use a library for these sorts of things. The overhead is a small price to pay for robust and future-proof code and anyone would be much more productive with a cross-browser framework to build upon. (As opposed to spending countless hours banging your head against IE).
to save you all the trouble use a framework such as jquery or mootools
ReplyDeletethat calculates all these values in one line (cross browser)
in mootools its $('element').getTop();
in jquery you will need a plugin named dimensions if i remember correctly
although most of the time even without a framework you can actually use element.getScrollTop(); to get what you'll need
the only problem is on IE7 and below this calculation is somewhat buggy as it doesn not take the position value of the element into consideration
for example if you got a position: absolute css attribute for that element
the calculation is performed on the parent element of that element
YUI 2.8.1 code does this:
ReplyDeletefunction getDocumentScrollTop(doc)
{
doc = doc || document;
//doc.body.scrollTop is IE quirkmode only
return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
}
I think jQuery 1.4.2 code (a bit translated for humans) and supposing I understood it properly does this:
function getDocumentScrollTop(doc)
{
doc = doc || document;
win = doc.defaultView || doc.parentWindow; //parentWindow is for IE < 9
result = 0;
if("pageYOffset" in win) //I'don't know why they use this, probably they tested it to be faster than doing: if(typeof win.pageYOffset !== 'undefined')
result = win.pageYOffset;
else
result = (jQuery.support.boxModel && document.documentElement.scrollTop) ||
document.body.scrollTop;
return result;
}
Unfortunatley extracting the value of jQuery.support.boxModel is almost impossible because you would have to add a temporary child element into document and do the same tests jQuery does.