asked on

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>

Kiran Sonawane

Can you please show your html code

Gurvinder Pal Singh

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.

areyouready344

ASKER

How do I fix this problem?

yeelokhk

Move your arrow key handling code outside of the hover handler of "insertData2 li"

Gurvinder Pal Singh

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

anandblitz

$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "left pressed" );
return false;
}
});
-----------------------------------------------------------------------------
Character codes:

37 - left

38 - up

39 - right

40 - down

areyouready344

ASKER

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;
});
});

areyouready344

ASKER

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>

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

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 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...

areyouready344

ASKER

Here is the link to the latest code

http://jsfiddle.net/nBsfm/14/

areyouready344

ASKER

Still can not get it working....

http://jsfiddle.net/nBsfm/20/

areyouready344

ASKER

Expert solution did not solve this problem

areyouready344

ASKER

no thanks