.NET (283) administrative (42) Ajax (42) ASP.NET (144) bicycle (2) books (152) browser (7) C# (121) cars (1) chess (25) CodePlex (10) Coma (7) database (37) deployment (3) Entity Framework (2) essay (96) flash/shockwave (2) flex (1) food (3) friend (2) game (14) idea (5) IIS (8) javascript (76) LInQ (2) Linux (6) management (4) manga (35) misc (590) mobile (1) movies (70) MsAccess (1) murder (2) music (62) mysql (1) news (96) permanent (1) personal (58) PHP (1) physics (2) picture (261) places (12) politics (13) programming (462) rant (107) religion (3) science (38) Sharepoint (3) software (53) T4 (2) technology (10) Test Driven Development (4) translation (2) VB (2) video (87) Visual Studio (44) web design (45) Windows API (8) Windows Forms (2) Windows Server (4) WPF/Silverlight (60) XML (10)

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() { 
    header.each(function(){ 
      this.className+=''; 
    }); 
  },1); 
});
where panel is the collapsible part and header is the clickable part. Same for slideDown.

No comments: