Hi guys, i am new on jquery. i am trying to do some practices. i' want to do an ajax autocompleter. First i have to solve some client side script issues. Below, there is a page that includes div elements. i want to work them like a dropdownlist. You can navigate between rows by pressing down and up keys. Anyway,what i did it is working with ie7, but it does not work with firefox. Does anybody know why?
Thanks for any response. Here is the code; <html> <title></title> <style type="text/css"> .main { border:1px solid #000; width:200px; position:absolute; /*top:200px; left:200px;*/ } .selected { background:#ccc; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> function focusIt() { $("#main").focus(); } function main_onkeydown(e) { if (this && !this.disabled) { var e = e ? e : window.event; if (e == null) return; kCode = e.keyCode || e.which; } switch (kCode) { case 40: moveDown(this); break; case 38: moveUp(this); break; case 13: hideMain(); break; default: alert(kCode); } } function hideMain() { $("#main").fadeOut(500); } function moveDown(objWnd) { var $selected = $("#main .selected"); if ($selected.length == 0) { $("#main > div").filter(function(index) { return index == 0; }).attr("class", "selected"); return; } $selected.attr("class", ""); var $nextRow = $selected.next() $nextRow.attr("class", "selected"); } function moveUp(objWnd) { var $selected = $("#main .selected"); if ($selected.length == 0) { $("#main > div").filter(":last-child").attr("class", "selected"); return; } $selected.attr("class", ""); var $nextRow = $selected.prev() $nextRow.attr("class", "selected"); } $(document).ready(function() { //Here is the part that i use for event binding. //it does not work even you try with keypress //i think something worng with div elements key capture events. //Anyway if somebody solve this issue, i will owe him/her. $("#main").bind("keydown", function(e) { main_onkeydown (e); }); }); </script> </head> <body onload='focusIt()'> <form id="form1" runat="server"> <div> <div id="main" class="main" > <div id="row1">Row1</div> <div id="row2">Row2</div> <div id="row3">Row3</div> <div id="row4">Row4</div> <div id="row5">Row5</div> <div id="row6">Row6</div> </div> </div> </form> </body> </html> Thank you