asked on

how to get the arrow left and right keys to fire off using jquery?

The left and right arrow keys in the code below is not working.

<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
<script type="text/javascript">
$(document).ready(function()
{
$('#container').click(function()
{
var totalWidth = 0;
var sizeWidth = $('#insertData1').outerWidth();
$('#ul_a li').each(function()
{
var widthS = $(this).width();
var textW = $(this).text();

var widthN = parseInt(widthS,10);
if((totalWidth + widthN) < sizeWidth)
{
totalWidth = totalWidth + widthN;
$('#ul_b').append('<li>' + textW + '</li>');
                  }else
{
return false;
}
            });
                  $('#ul_b li').hover(function()
                  {
                        $(this).addClass('highlight');
                  }, function()
                  {
                        $(this).removeClass('highlight');
                  });
                  $('#ul_b li').keyup(function(e)
            {
            if(e.keyCode == 37)
      {
      $(this).removeClass('highlight');
      $(this).prev().addClass('highlight');
      }else if(e.keyCode == 39)
      {
      $(this).removeClass('highlight');
      $(this).next().addClass('highlight');
      }
            return false;
            });
            });
});
</script>
<style>
.highlight
{
      background-color: white;
      color: black;
}
#container
{
      height: 30px;
      width: 150px;
      background-color: black;
      color: white;
      text-align: center;
      position: absolute;
}
#verticalAlign
{
      height: 20px;
      position: absolute;
      top: 50%;
      margin-top: -10px;
      margin-left: 5px;
}
ul
{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
}
#ul_b li
{
     display: inline;
      margin: 0px;
      padding: 0px;
      text-align: center;
}
#insertData1
{
      width: 600px;
      height: 25px;
      background-color: black;
      color: white;
      margin-top: 20px;
      padding: 5px;
}
#ul_b
{
      list-style-type: none;
}
#ul_a li
{
      display: inline;
      visibility: hidden;
}
</style>
</HEAD>
<BODY>
<div id="container">
      <div id="verticalAlign"> Click Here </div>
</div>
<div>
      <ul id="ul_a">
                  <li>aaaa </li>
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  <li>aaaaaaaaa </li>
                  </ul>
<p></p>
</div>
<div id="insertData1"><ul id="ul_b"></ul></div>
</div>
</BODY>
</HTML>

ncoo

The way you are using keyup will not work, take a look at the following example.

The left/right arrows return 0

Check out http://api.jquery.com/keypress/ for more details.

<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<SCRIPT type="text/javascript" src="http://jquery.bassistance.de/jquery.js"></SCRIPT>
<script type="text/javascript">
$(document).ready(function()
{

$("#box").keypress(function(event) {
alert(event.which);
});

});
</script>
</HEAD>
<BODY>
<input type="text" id="box" /></BODY>
</HTML>

Open in new window

areyouready344

ASKER

Thanks ncoo but how do I used in my situation. I have seen it worked in other situations but can not get it to work in my situation.

areyouready344

ASKER

Not working after trying your suggestion of:

$('#ul_b li').keypress(function(e)
            {
            if(e.which == 37)
      {
      $(this).removeClass('highlight');
      $(this).prev().addClass('highlight');
      }else if(e.which == 39)
      {
      $(this).removeClass('highlight');
      $(this).next().addClass('highlight');
      }
            return false;
            });

ASKER CERTIFIED SOLUTION

ncoo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

areyouready344

ASKER

Thanks ncoo, see your point. I have to work through the logic