Home/ Questions/Q 6901883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:43:45+00:00

How to achieve independent horizontal scrolling between two ul lists using the left, right,

  • 0

How to achieve independent horizontal scrolling between two ul lists using the left, right, and spacebar keys? I can scroll listA upon loading the document but need a way to scroll listB independently from listA

   <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()
   {
      $("#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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a perfect example of where classes are very useful. You can add a class active to whichever list was last clicked in. Then target it for your movement.

    http://jsfiddle.net/mmTra/

    //on click activate list
$('.listcontainer').click( function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
});

//target active container for highlighting
$("div.active ul li.highlight").removeClass("highlight").prev().addClass("highlight");
    • 0