1

I am trying to get height of a div, after window.resize method, so that the element has its new height, but before display the output to the user, so I could change height of another div.

What I know already and not so tempted to use in this case

  • Use percentages for setting height of another div
  • Use fixed heights
  • Use CSS instead
  • use clientHeight
  • use innerheight

so back to question

Is there any event in JS or JQuery which could get me state where document is re sized but not displayed to user yet on the screen.

 $(window).resize(WindowResizeNow);
Mathematics
  • 7,314
  • 25
  • 77
  • 152
  • 1
    Every change to DOM is updated immediately, but rendered _after_ all the code in an event handler has been executed. Hence `$(window).resize()` should do what you need. If multiple `onresize` handler calls are messing your layout, you can use [debouncer](http://stackoverflow.com/a/4298672/1169519) to fire only the last call. – Teemu Aug 26 '14 at 09:05
  • Even then, I don't think you can have new height to the elements without it being rendered already. Maybe you can some creative ways like setting css transition delays to delay the change in visual size, but have an transparent element that does not delay to allow you to get the updated sizes... maybe – user1600124 Aug 26 '14 at 09:05
  • 1
    @user1600124 Why not? Rendering is based on the DOM, all the information is available before rendering starts. – Teemu Aug 26 '14 at 09:12
  • @Teemu I guess you're right. I do notice that you could quickly set two different sizes to a div but only one is perceivable to the user. I guess by checking the event logs in dev tool we can verify the behavior. – user1600124 Aug 26 '14 at 09:18
  • @Teemu i am using $.data answer with 6 votes, thanks for the link, i was not knowing that JS resize event triggers twice, now i got what i was after, thank you – Mathematics Aug 26 '14 at 09:23
  • 1
    @CustomizedName Actually resize is fired tens of times per second, not just twice. – Teemu Aug 26 '14 at 09:26
  • @Teemu just realized, much appreciated, thanks for your help, if you could put this down as a answer i will accept it :-) – Mathematics Aug 26 '14 at 09:30
  • @Teemu After some thinking, I still have some doubts. DOM is updated, but for the elements that has no specific height and width, the rendering engine has to calculate their layout to know their sizes. Then display the result on screen. Can you use the re-calculated layout to make changes to the dom before the result is displayed on screen? – user1600124 Aug 28 '14 at 02:46
  • 1
    @user1600124 If I've understood your comment correctly: yes, [you can use](http://jsfiddle.net/ytj3f2rq/) re-calculated layout before rendering. – Teemu Aug 28 '14 at 04:30

1 Answers1

1

You can use $(window).resize().

When you change the DOM in JS function, DOM is updated immediately, but a page is rendered after the function has been executed.

This might not be obvious in case of some events, which fire several times per second (like resize and scroll, keydown etc.), but user might keep them as a single event.

If multiple handler calls cause troubles, they can be omitted by using a debouncer.

Community
  • 1
  • 1
Teemu
  • 22,918
  • 7
  • 53
  • 106