Wednesday, February 2, 2011

Forcing UI redraw/repaint in IE7

A while ago I had a nasty problem with an element that got on top of other elements and was not clickable anymore. This happened in Internet Explorer 7 when I changed the position from absolute to static during horizontal scrolling.
I tried several techniques for redrawing the element but none of them were successful until I stumbled upon this method:
var nastyElement = $("#elementId");
nastyElement.css("display", "none");
nastyElement[0].offsetHeight; // redraw
nastyElement.css("display", "block");
Credits go to vasko who wrote about this on http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript.

2 comments:

Dan King said...

I think you have a problem with this line:

var redraw = nastyElement.offsetHeight;

nastyElement is jQuery wrapped, so it doesn't have an offsetHeight property.

If you're using jQuery anyway though, and you want to force a repaint of an element, I found that this worked for me:

nastyElement.hide();
nastyElement.show();

JStorm said...

Thanks Dan! (and yes, this reply is really late). I've updated my original solution but your version seems easier :)