I am trying to make a script that uses Javascript/CSS/HTML so that when a user clicks on a link a loader image appears. I got that to work but the problem is depending on the size of the window the loader image moves to a different position. How do I fix this? Here is a simple version of the HTML Script that Im using to try and fix the problem :
<html>
<head><title>Template Table w/ Ajax Loader</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="wrapper">
<ul id = "mainlevel-nav">
<li><a href="#" class ="mainlevel-nav">TEST1</a></li>
<li><a href="#" class ="mainlevel-nav">TEST2</a></li>
</ul>
<div id="content"></div>
</div>
</body>
</html>
CSS:
#load {
display: none;
position: fixed;
top: 70px;
right: 600px;
background: url(ajax-loader.gif) ;
width: 30px;
height: 35px;
text-indent: -9999em;
}
<html>
<head><title>Template Table w/ Ajax Loader</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="wrapper">
<ul id = "mainlevel-nav">
<li><a href="#" class ="mainlevel-nav">TEST1</a></li>
<li><a href="#" class ="mainlevel-nav">TEST2</a></li>
</ul>
<div id="content"></div>
</div>
</body>
</html>
CSS:
#load {
display: none;
position: fixed;
top: 70px;
right: 600px;
background: url(ajax-loader.gif) ;
width: 30px;
height: 35px;
text-indent: -9999em;
}