Squackattack Squackattack - 1 month ago 11
HTML Question

Keep row height from changing after fadeOut()

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

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.