bayman bayman - 5 months ago 8
Javascript Question

How do I make a dedicated row for javascript alerts?

In the jsfiddle example below, every time there's an alert it shifts the content below it down a row. How do I create a blank row dedicated to alerts that will just have the alerts fade in and out without shifting the content below it down?

jsfiddle

html:

<div class="alert-box success">Successful Alert !!!</div>
<div class="alert-box failure">Failure Alert !!!</div>
<div class="alert-box warning">Warning Alert !!!</div>
<hr>
<p>hello world</p>
<p>
<button id="success-btn">Success</button>
<button id="failure-btn">Failure</button>
<button id="warning-btn">Warning</button>
</p>


javascript:

$( "#success-btn" ).click(function() {
$( "div.success" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

$( "#failure-btn" ).click(function() {
$( "div.failure" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});

$( "#warning-btn" ).click(function() {
$( "div.warning" ).fadeIn( 300 ).delay( 1500 ).fadeOut( 400 );
});


css:

.alert-box {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}

.success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
display: none;
}

.failure {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
display: none;
}

.warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
display: none;
}

Answer

Wrap them in a wrapper div with a suffisant heigth.

Fiddle

<div id="alert-wrapper">
    <div class="alert-box success">Successful Alert !!!</div>
    <div class="alert-box failure">Failure Alert !!!</div>
    <div class="alert-box warning">Warning Alert !!!</div>
</div>

CSS:

#alert-wrapper{
    height:46px;
}