Hide button but with white space

Question

I have this system where I decided to hide all buttons and later(on the bottom of the page) make them visible again as a jQuery button.

On the beginning:

$('button').hide();

On the end:

$('button').button(...button options yadda yadda...);

And my scripts are loaded on the bottom of the page as recommended.

When the page renders, it renders without buttons, and don't render their empty spaces. But when the jquery comes to action the page flicks and expands the empty spaces where the buttons will be rendered and render them.

How can I make the page render the button spaces even when they are hidden?

Answer 1

Use visibility property of button instead of hide() / Show() function, hide() uses display:none, read more over here

To show

$('button').css('visibility', 'visible');

To Hide

$('button').css('visibility', 'hidden');

Answer 2

If I understand your question correctly.

The jQuery function hide() sets element to display:none; in CSS. For the document to keep the elements space you need to set the element to

visibility: hidden;