Window resize event working issue on FF/Safari

Window resize event working issue on FF/Safari

Hi there!

At some different points of my code I have developed some table data, wich structure is a static header and a scrollable body.

The HTML code goes as:
  1. <!DOCTYPE html>
  2. <html>
  3.       <head>
  4.             [..]
  5.       </head>
  6.       <body>
  7.             <div id="wrapper">
  8.                   <div id="static_header">
  9.                         <table>[..]</table>
  10.                   </div>
  11.                   <div id="scroll_table">
  12.                         <table>[..]</table>
  13.                   </div>
  14.             </div>
  15.       </body>
  16. </html>
Ok. All styles and scrollable/static behaviour works out!

Due to be in different <div> elements, both tables doesn't got the same width.
I adjust the width of the "static" table dinamically with the following JS function:
  1. function applyDataTableWidthToStaticTable($div_static, $div_scrollable){
  2.       $div_static.width($div_scrollable.find('table').width());
  3. }
It also works.
And then, cames the issues.

When the window is resized, I need to re-adjust the tables' width, so:
  1. $(window).resize(function(){
  2.        applyDataTableWidthToStaticTable($('#static_header'), $('#scroll_table'));
  3. });
This works fine one the data is loaded, or the window is resized manually, but it doesn't works when I click on the maximize or minimize browser buttons.
So I fixed it this way:
  1. $(window).resize(function(){
  2.        applyDataTableWidthToStaticTable($('#static_header'), $('#scroll_table'));
  3. }).resize();
This works for Chrome and Internet Explorer.
Under Firefox and Safari it doesn't fires out the 2nd resize event, so when I click minimize or maximize, the tables' width get misadjusted.

Any solution?

- I didn't know it was imposible, so far I wouldn't had achieved it. -