Friday, August 10, 2012

How to force a browser render on elements in Internet Explorer (and other browsers as well)

I know of this method from the good old Internet Explorer 6 days. In order to force the browser to redraw an element, solving weird browser refresh issues, change it's css class. I usually go for element.className+='';. So you see, you don't have to actually change it. Sometimes you need to do this after a bit of code has been executed, so put it all in a setTimeout.

More explicitly, I was trying to solve this weird bug where using jQuery slideUp/slideDown I would get some elements in Internet Explorer 8 to disregard some CSS rules. Mainly the header of a collapsible panel would suddenly and intermittently seem to lose a margin-bottom: 18px !important; rule. In order to fix this instead of panel.slideUp(); I used
panel.slideUp(400/*the default value*/,function() { 
  setTimeout(function() { 
where panel is the collapsible part and header is the clickable part. Same for slideDown.