Keep row height from changing after fadeOut()

Question

So I have two elements with classes .start_over_button and .speed_buttons. .start_over_button is set to display: none; in css and my javascript makes it so that when .speed_buttons are clicked they fade out and .start_over_button fades in. My problem is that i'm using bootstrap to position my page elements and when the javascript function runs, because of the differing heights of .start_over_button and .speed_buttons, the page jumps around annoyingly. I want to make the height of both the same no matter the viewport so that this does not happen but when i try and set the heights the same in my stylesheet it either has no affect or cannot be made equal. Here is the div:

    <div class="row thirdRow">
        <!-- here I use some simple js to make my button reload the page. I should try to migrate this to my script.js file (href="javascript:location.reload(true)")-->
        <a class="start_over_button" href="index.html">
            <button type="button" class="btn btn-default btn-lg col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
                    <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                    Start Over
            </button>
        </a>
        <div class="speed_buttons">
            <label id="slowText" class="radio-inline col-xs-2 col-xs-offset-3">
                <input id="slow" class="difficulty" type="radio" name="user_options" value="300">
                    Slow
                    <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
            </label>
            <label id="medText" class="radio-inline col-xs-2">
                <input id="med" class="difficulty" type="radio" name="user_options" value="150">
                    Med
                    <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
            </label>
            <label id="fastText" class="radio-inline col-xs-2">
                <input id="fast" class="difficulty" type="radio" name="user_options" value="75">
                    Fast
                    <span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
            </label>
        </div>
    </div>

Here is the css:

.start_over_button{
    display: none;
} 

and here is the .js:

    $(".speed_buttons").fadeOut(0, function(){
        $(".start_over_button").fadeIn(0);
    });

I have only this week started to learn code so forgive me if this appears extremely ignorant. I have been looking for a solution to this for the last two days in w3schools, stackoverflow, and api.jquery.com. Thanks in advance for any help you can offer!

Answer 1

You need to add an extra div around all the buttons and set a height for that div so it doesnt change no matter what happens inside it:

<div class="row thirdRow">
  <div class="buttons-container">        
   <!-- here I use some simple js to make my button reload the page. I should try to migrate this to my script.js file (href="javascript:location.reload(true)")-->
    <a class="start_over_button" href="index.html">
        <button type="button" class="btn btn-default btn-lg col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
                <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                Start Over
        </button>
    </a>
    <div class="speed_buttons">
        <label id="slowText" class="radio-inline col-xs-2 col-xs-offset-3">
            <input id="slow" class="difficulty" type="radio" name="user_options" value="300">
                Slow
                <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
        </label>
        <label id="medText" class="radio-inline col-xs-2">
            <input id="med" class="difficulty" type="radio" name="user_options" value="150">
                Med
                <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
        </label>
        <label id="fastText" class="radio-inline col-xs-2">
            <input id="fast" class="difficulty" type="radio" name="user_options" value="75">
                Fast
                <span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
        </label>
    </div>
   </div>
</div>

CSS

.buttons-container {
  height:100px;
}

Just adjust the height to whatever the largest button size is and you should be good to go.

Answer 2

You can use visibility:hidden instead of display:none. This is because unlike being removed from the DOM, it is technically still there, and has space allocated for it, but it invisible to the user.

More info here: What is the difference between visibility:hidden and display:none?