Crazy Horse
asked on
How to position loader with CSS
I had this question after viewing showing loader for php/mysql/ajax live search.
When displaying the loader, it is in the right position on my screen initially. If I use Google inspect and select another screen size, the loader does not act responsivley (yes, that's a pun) and stay within the text field. It spins outside of the text field and looks random.
When displaying the loader, it is in the right position on my screen initially. If I use Google inspect and select another screen size, the loader does not act responsivley (yes, that's a pun) and stay within the text field. It spins outside of the text field and looks random.
#loading{
position: absolute;
top: 68px;
left: 790px;
}
<div style="display:none" id=loading><img src="img/ajax-loader.gif"/></div>
$(document).ready(function(){
$('#search').focus();
$('#search').keyup(function(){
$("#loading").show();
var search = $('#search').val();
if(search.length >3) {
$.ajax({
type: 'POST',
url: 'models/provider-search.php',
data: {search:search},
success: function(data) {
if(!data.error) {
$('#result').html(data);
$("#loading").hide();
}
}
});
}
if (search.length < 1) {
$('#result').html('');
$("#loading").hide();
}
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for your comments. Only the % solution worked for me on this.
right:0;
Or
right:790px;
Instead of
ledt:790px;