Link to home
Start Free TrialLog in
Avatar of Crazy Horse
Crazy HorseFlag for South Africa

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.

#loading{
		position: absolute;
		top: 68px;
		left: 790px;
	}

Open in new window


<div style="display:none" id=loading><img src="img/ajax-loader.gif"/></div>

Open in new window


$(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();
				
			}
		});
	});

Open in new window

Avatar of Guy Hengel [angelIII / a3]
Guy Hengel [angelIII / a3]
Flag of Luxembourg image

Please try
right:0;
Or
right:790px;

Instead of
ledt:790px;
ASKER CERTIFIED SOLUTION
Avatar of Robert Granlund
Robert Granlund
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Crazy Horse

ASKER

Thanks for your comments. Only the % solution worked for me on this.