Trying to show a loader div until the Ajax-populated div is returned. Want to hide "responseDiv" until it's filled with Ajax data and display a loading div in the meantime.
#loading {
background: url('images/loading.gif') no-repeat center center;
position: absolute;
display: block;
background-color : #ffffff ;
}
#responseDivOverlay {
position: absolute;
background-color : #ffffff ;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
Two Divs
<div id="loading"></div>
<div id="responseDiv">
Javascript Setup
Include jQuery libraries for slider functionality and set up the range of values. The loader will be displayed until the response data is populated after sliding action on the UI.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
// Slider setup
$(function () {
$("#slider-range").slider({
range: true,
min: <%=lowestPrice%>,
max: <%=highPrice%>,
step: 0.01,
values: [<%=lowestPrice%>, <%=highPrice%>],
stop: function (event, ui) {
getMessage("1", ui.values[0], ui.values[1]);
},
slide: function (event, ui) {
$("#amount").val("£" + parseFloat(Math.round(ui.values[0] * 100) / 100).toFixed(2) + " - £" + parseFloat(Math.round(ui.values[1] * 100) / 100).toFixed(2));
}
});
$("#amount").val("£" + $("#slider-range").slider("values", 0) +
" - £" + $("#slider-range").slider("values", 1));
});
</script>