Thursday, March 25, 2010

JQuery to rescue for css issue on IE

It all started this way..... Business wanted a print page (popup in an iframe) on our site which was half baked and the status quo remained the same for the last 6 months and the developer who coded it was no longer in the organization. The issue was mainly with the UI. Not having a UI background, I thought why not give it a shot!! I did resolve all the issues but the the header (having a logo) with other items on that should always remain on the viewport even when the users scrolls down the page. It works perfect with FF (all versions), chrome (still not regarded as a standard) . But then IE was a big disappointment. Very high z-index don't help and IE does not recognize "position:fixed". While there might be a lot of better solutions to this problem, but the one that really worked for me is
if(navigator.appName == "Microsoft Internet Explorer") {
$jq(document).ready(function() {
$jq("#print_header_container").css("position", "absolute");//set other css attributes
}
$jq(window).scroll(function() {
$jq("#print_header_container").css("top", $jq(window).scrollTop() + "px");
$jq("#print_header_container").css("margin", "0 0 0 0px");
});
}
But then there is still a flicker as the user scrolls but it is negligible...phew! :)