Response title
This is preview!
Window resize event working issue on FF/Safari
in Using jQuery
•
7 years ago
Hi there!
- I didn't know it was imposible, so far I wouldn't had achieved it. -
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:
- <!DOCTYPE html>
- <html>
- <head>
- [..]
- </head>
- <body>
- <div id="wrapper">
- <div id="static_header">
- <table>[..]</table>
- </div>
- <div id="scroll_table">
- <table>[..]</table>
- </div>
- </div>
- </body>
- </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:
- function applyDataTableWidthToStaticTable($div_static, $div_scrollable){
- $div_static.width($div_scrollable.find('table').width());
- }
It also works.
And then, cames the issues.
When the window is resized, I need to re-adjust the tables' width, so:
- $(window).resize(function(){
- applyDataTableWidthToStaticTable($('#static_header'), $('#scroll_table'));
- });
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:
- $(window).resize(function(){
- applyDataTableWidthToStaticTable($('#static_header'), $('#scroll_table'));
- }).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. -
1