bootstrapGrowl() - Bootstrap Toast Alerts like Growl
by bizamajig
HTML
<script src="https://ifightcrime.github.io/bootstrap-growl/jquery.bootstrap-growl.min.js"></script>
<table >
<thead>
<tr>
<th>Fruit</th>
<th>Preference</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Like</td>
</tr>
<tr>
<td>Pear</td>
<td>Like</td>
</tr>
<tr>
<td>Raisin</td>
<td>Dislike</td>
</tr>
</tbody>
</table>
CSS
table, th, td
{
border: 1px solid black;
padding: 15px;
}
table {
width: 100%;
}
JavaScript
$(function () {
/*
$.bootstrapGrowl("This is a test.");
setTimeout(function () {
$.bootstrapGrowl("This is another test.", {
type: 'success'
});
}, 1000);
setTimeout(function () {
$.bootstrapGrowl("Danger, Danger!", {
type: 'error',
align: 'center',
width: 'auto',
allow_dismiss: false
});
}, 2000);
*/
setTimeout(function () {
$.bootstrapGrowl("Danger, Danger!", {
align: 'left', // ('left', 'right', or 'center')
delay: 14000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut!
ele: 'body', // Which element to append to
offset: { // 'top', or 'bottom'
from: 'bottom',
amount: 20
},
stackup_spacing: 10, // spacing between consecutively stacked growls.
type: 'info', // (null, 'info', 'danger', 'success')
width: 250 // (integer, or 'auto')
});
$.bootstrapGrowl("Danger, Danger!", {
align: 'left', // ('left', 'right', or 'center')
delay: 14000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut!
ele: 'body', // Which element to append to
offset: { // 'top', or 'bottom'
from: 'bottom',
amount: 20
},
stackup_spacing: 10, // spacing between consecutively stacked growls.
type: 'info', // (null, 'info', 'danger', 'success')
width: 250 // (integer, or 'auto')
});
}, 100);
});