How to select between two list to scroll horizontally using the left, right, and spacebar keys?

areyouready344
areyouready344 used Ask the Experts™
on
How to select between two list to scroll horizontally using the left, right, and spacebar keys? The code shows two ul list, listA and listB each wrapped inside a div. For listA, I can scroll horizontally but don't know how to select the listB to scroll horizontally separately from listA.

<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
<SCRIPT type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
<script type="text/javascript">
$(document).ready(function()
{
      $("#containerA ul li:first").addClass("highlight");
      $("#containerB ul li:first").addClass("highlight");

                  $(document).keydown(function(e)
                  {                        
                        if(e.which == 37)
                        {      
                              $("#containerA ul li.highlight").removeClass("highlight").prev().addClass("highlight");

                        }else if(e.which == 39 || e.which == 32)  
                        {
                  
                              $("#containerA ul li.highlight").removeClass("highlight").next().addClass("highlight");
                        }
                  });
            
      
});
</script>
<style>
.highlight
{
      background-color: blue;
      color: white;
}
#containerA, #containerB
{
      height: 100px;
      width: 999px;
      background-color: black;
      color: white;
      text-align: center;
      position: relative;
      border: 5px solid blue;
      padding: 5px;
}
ul
{
        list-style-type: none;
      margin: 0px;
      padding: 5px;
      line-height: 2;
      margin-top: 15px;
      margin-left: 20px;
      margin-right: auto;      
}
li
{
      background-color: gray;
      width: 100px;
      float: left;
      margin-right: 4px;
      margin-top: 3px;
}
</style>
</HEAD>
<BODY>
<div id="containerA"> List A
      <ul id="listA">
                  <li>aaaaaaaaa </li>
                  <li>bbbbbbbbb </li>
                  <li>ccccccccc </li>
                  <li>ddddddddd </li>
                  <li>eeeeeeeee </li>
                  <li>fffffffff </li>
                  <li>ggggggggg </li>
                  <li>hhhhhhhhh </li>
                  <li>iiiiiiiii </li>
      </ul>
</div>
<div id="containerB"> List B
      <ul id="listB">
                  <li>aaaaaaaaa </li>
                  <li>bbbbbbbbb </li>
                  <li>ccccccccc </li>
                  <li>ddddddddd </li>
                  <li>eeeeeeeee </li>
                  <li>fffffffff </li>
                  <li>ggggggggg </li>
                  <li>hhhhhhhhh </li>
                  <li>iiiiiiiii </li>
      </ul>
</div>
</BODY>
</HTML>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:


Change this code:

<script type="text/javascript">
$(document).ready(function()
{
      $("#containerA ul li:first").addClass("highlight");
      $("#containerB ul li:first").addClass("highlight");

                  $(document).keydown(function(e)
                  {                        
                        if(e.which == 37)
                        {      
                              $("#containerA ul li.highlight").removeClass("highlight").prev().addClass("highlight");

                        }else if(e.which == 39 || e.which == 32)  
                        {
                  
                              $("#containerA ul li.highlight").removeClass("highlight").next().addClass("highlight");
                        }
                  });
            
      
});
</script>

Open in new window


into:

<script type="text/javascript">
$(document).ready(function()
{
      $("#containerA ul li:first").addClass("highlight");
      $("#containerB ul li:first").addClass("highlight");

                  $(document).keydown(function(e)
                  {                        
                        if(e.which == 37)
                        {      
                              $("#containerA ul li.highlight").removeClass("highlight").prev().addClass("highlight");

                        }else if(e.which == 39 || e.which == 32)  
                        {
                  
                              $("#containerA ul li.highlight").removeClass("highlight").next().addClass("highlight");
                        }
                  });
  

                  $(document).keydown(function(e)
                  {                        
                        if(e.which == 37)
                        {      
                              $("#containerB ul li.highlight").removeClass("highlight").prev().addClass("highlight");

                        }else if(e.which == 39 || e.which == 32)  
                        {
                  
                              $("#containerB ul li.highlight").removeClass("highlight").next().addClass("highlight");
                        }
                  });
          
      
});
</script>

Open in new window


Nrisimha

Author

Commented:
thanks Nrisimha but how can I get them to scroll independently and switch between the two list? With your solution, the horizontal scrolling of ListA and ListB takes place at the same time.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial