Question

In my Web application I have content in a div, which will be positioned in the center of the browser window.
This content is hidden at the beginning and one time has few content, another time much content, so the dimensions of the div and the position of the top left corner change.

I use the jQuery UI position utility in order to position the div, but it cannot handle hidden elements.

Until now I did the following:
* The div is hidden (display: none) and has opacity 0, “top” is 0 and “left” is 0.
* Now I change from display “none” to “block”.
* Because of the opacity 0 the div is still not recognizable at the top left corner of the window.
* In this situation I position the div with jQuery ui position to center.
* After that I change from opacity 0 to 1.
* This way I wanted the user not to see the “jumping” from the 0/0 to the center position.

Now I want to simplify my widget.
I want to put away the opacity, just change from display “none” to “block” and position the div.

I will soon test it and I will see if I see the div “jumping” from some start postion to the target position. The problem is that I only have relatively fast machines for testing.

And if some people will tell me that users will see the jumping from the initial position to the target position on slow machines/slow browsers I will not change anything with my widgets.

Thanks alot in advance

Answer 1

You will notice it jumping to the middle of the page even on a very fast machine. Guaranteed.

Instead you should use visibility: hidden; instead of display: none;. Objects hidden that way, still maintain their box size and your position plugin will have no problem centering it.

Toggle the visibility property to visible when you want to show the div.