Can someone tell me why the arrow keys not working?

This code this working except the left and right arrow keys. Can someone tell me why the arrow keys not working?

<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;
                        $('#insertData2').append('<li>'  + textW + '</li>');                              
                  }else
                  {
                      return false;
                       
                  }
                  $('#insertData2 li').hover(function()
                  {
                            $(this).addClass('highlight');
                        $('#insertData2 li').keyup(function(e)
                        {
                              if(e.keyCode == 37)
                              {
                                    $('#insertData2 li').addClass('highlight');
                              }else if(e.keyCode == 39)
                              {
                                    $('#insertData2 li').addClass('highlight');
                              }
                                    return false;
                        });
                  }, function()
                  {
                            $(this).removeClass('highlight');
                  });
            });
      });
                  
});
</script>
areyouready344Asked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
make it

 $('#insertData2 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;
      });
0
 
Kiran SonawaneProject LeadCommented:
Can you please show your html code
0
 
Gurvinder Pal SinghCommented:
you are assigning the keyup event to 'insertData2 li', only when they are hovered once.
So, if you haven't yet hovered on them yet, then it means the keyup event has not binded yet.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
areyouready344Author Commented:
How do I fix this problem?
0
 
yeelokhkCommented:
Move your arrow key handling code outside of the hover handler of "insertData2 li"
0
 
Gurvinder Pal SinghCommented:
copy this code
$('#insertData2 li').keyup(function(e)
                        {
                              if(e.keyCode == 37)
                              {
                                    $('#insertData2 li').addClass('highlight');
                              }else if(e.keyCode == 39)
                              {
                                    $('#insertData2 li').addClass('highlight');
                              }
                                    return false;
                        });

directly inside the document.ready, and outside $('#container').click
0
 
anandblitzCommented:
$(document).keydown(function(e){
    if (e.keyCode == 37) {
       alert( "left pressed" );
       return false;
    }
});
-----------------------------------------------------------------------------
Character codes:

37 - left

38 - up

39 - right

40 - down
0
 
areyouready344Author Commented:
I put the keycode outside the container code as suggested but still not highlighting. The hover code is still working.

$(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;
                        $('#insertData2').append('<li>'  + textW + '</li>');                              
                  }else
                  {
                      return false;
                       
                  }
                  $('#insertData2 li').hover(function()
                  {
                            $(this).addClass('highlight');
                  }, function()
                  {
                            $(this).removeClass('highlight');
                  });
            });
      });
      $('#insertData2 li').keyup(function(e)
      {
            if(e.keyCode == 37)
            {
                  $('#insertData2 li').addClass('highlight');
            }else if(e.keyCode == 39)
            {
                  $('#insertData2 li').addClass('highlight');
            }
                  return false;
      });
});
0
 
areyouready344Author Commented:
Still does not work. I even tried putting it into a separate document.ready. The hover code is still working.

<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;
                        $('#insertData2').append('<li>'  + textW + '</li>');                              
                  }else
                  {
                      return false;
                       
                  }
                  $('#insertData2 li').hover(function()
                  {
                            $(this).addClass('highlight');
                  }, function()
                  {
                            $(this).removeClass('highlight');
                  });
            });
      });
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
      $('#insertData2 li').keyup(function(e)
      {
            if(e.keyCode == 37)
            {
                 $('#insertData2 li').addClass('highlight');
            }else if(e.keyCode == 39)
            {
                  $('#insertData2 li').addClass('highlight');
            }
                  return false;
      });      
});
</script>
0
 
areyouready344Author Commented:
thanks gurvinder372 but still not working after trying:

 $('#insertData2 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;
      });

    Accept Multiple Solutions
    Accept as Solution

But the hover code is still working...
0
 
areyouready344Author Commented:
Here is the link to the latest code

http://jsfiddle.net/nBsfm/14/
0
 
areyouready344Author Commented:
Still can not get it working....

http://jsfiddle.net/nBsfm/20/
0
 
areyouready344Author Commented:
Expert solution did not solve this problem
0
 
areyouready344Author Commented:
no thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.