Positioning problems in Opera
Hi All,
I'm very new to jQuery so please bear with me.
At the moment, I'm in the midst of developing an application in Ruby on Rails (also a newb in this) which will include a 'search as you type' interface. The prototype code works pretty well but, when testing it with various browsers, I've found that Opera does not correctly position the div containing the returned search results. The results are supposed to position directly below the input field -- which it does in Safari and Firefox -- but in Opera (both Mac and Windows), it puts it half-way down the page. I'm hoping that it's just that I'm doing something wrong -- any ideas? My code is below.
Thanks in advance,
Mark
*****
<label for="drink_name">Name</label><br />
<input autocomplete="off" id="drink_name" name="drink[name]" size="30" type="text" />
<div id="drink_select" style="position:relative; width:400px;" ></div>
<script type="text/javascript">
var le;
var selectCount = 0;
var selectedItem = -1;
var realm = "drinks";
var nameField = $("#drink_name");
var selectList = $("#drink_select");
var ajaxURL = "<%= url_for(:controller => 'drinks', :action => 'search_list') %>";
nameField.bind("keyup", function(e) {
switch (e.keyCode) {
case 37 :
case 39 :
return;
break;
case 38 :
case 40 :
this.blur();
return;
break;
}
$.post (ajaxURL, { lookup: nameField.val() }, function(data) {
if (data.length == 0) {
selectList.css('display', "none");
return;
}
var position = nameField.position();
var count;
selectList.css('top', position.top + nameField.height());
selectList.css('left', position.left);
selectList.html(data);
selectList.css('display', "");
selectCount = data.match(/count=[\d]+/).toString().replace("count=","");
le = new ListEvents(realm);
return;
});
});
</script>