[jQuery] Dimension plugin added to jQuery core 1.2.6 is giving different results on IE and mozilla
Hi All,
I am writing a custom suggestbox using jQuery core version 1.2.6 (just
for learning purpose).
The problem I am facing is to nicely position my dynamically populated
list (using ajax) on the input box.
I used the offset() method from dimensions plugin, and it is giving me
nice results in Firefox 3 and Chrome browsers, but it is misplaced in
IE 7.
Please reply how should I use this method (or any other methods) to
properly position my list on suggest box in any given browser.
Below is my html code,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Test page</title>
<script type="text/javascript" src="<%= request.getContextPath() %>/
includes/jQuery/jquery-1.2.6-min.js"></script>
<script type="text/javascript">
var index = -1;
$(
function() {
$("#autocompleteOptions").hide();
$("#autocompleteInput")
.click(
function(event) {
var result = $("#autocompleteInput").position();
$("#autocompleteOptions")
.html("<li>dynamic1</li><li>dynamic2</li><li>dynamic3</li>")
.filter("#autocompleteOptions li")
.css({position : "absolute", top : result.top, left :
result.left})
.hover(
function(event) {
$("#autocompleteOptions li").removeClass("redHighlight");
if($(event.target).is("li")) {
$(event.target).addClass("redHighlight");
index = $("#autocompleteOptions li").index($
(event.target));
}
},
function(event) {
$("#autocompleteOptions li").removeClass("redHighlight");
if($(event.target).is("li")) {
$(event.target).removeClass("redHighlight");
index = $("#autocompleteOptions li").index($
(event.target));
}
}
);
$("#autocompleteOptions").show("normal");
}
)
.keydown(
function(event) {
var keyCode = getKeyCode(event);
var size = $("#autocompleteOptions li").size();
if(keyCode == 40) {
if(index < (size - 1)) {
$("#before").val(index);
$("#autocompleteOptions li").removeClass("redHighlight");
index++;
var option = $("#autocompleteOptions li").get(index);
$(option).addClass("redHighlight");
$("#after").val(index);
}
}
if(keyCode == 38) {
if(index >= 1) {
$("#before").val(index);
$("#autocompleteOptions li").removeClass("redHighlight");
index--;
var option = $("#autocompleteOptions li").get(index);
$(option).addClass("redHighlight");
$("#after").val(index);
}
}
if(keyCode == 13) {
var option = $("#autocompleteOptions li").get(index);
$("#autocompleteInput").val($(option).text());
$("#autocompleteOptions").hide("normal");
}
}
);
}
);
function getKeyCode(event) {
var key;
if(event.charCode) { key = event.charCode; }
else if(event.which) { key = event.which; }
else if(event.keyCode) { key = event.keyCode; }
return key;
}
</script>
<style type="text/css">
#autocompleteOptions {
background-color : #F5F5DC;
}
.redHighlight {
background-color : #CD5C5C;
}
</style>
</head>
<body>
<div id="dim">
<input type="text" id="autocompleteInput" />
</div>
<ul id="autocompleteOptions">
<li>XML</li>
<li>Ajax</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
Before : <input type="text" id="before" />
After : <input type="text" id="after" />
</body>
</html>
Regards,
Ajay