ansaurus

Question

navigation list issue

Answer 1

+2 A:

Hey Josh,

If you're looking to limit the amount of items displayed you can do this with a fixed width on your list items and overflow hidden to clip additional items from being displayed.

<style>
   ul {
        height: 20px;
        overflow: hidden;
        width: 180px;
      }

   li {
        display: block;
        float: left;
        height: 20px;
        width: 20px;
      }

   ul.unlimited {
       height: auto;  
   }

   #view_all {
       display: none;
   }
</style>

No for displaying the view all link. I would advise generating that on the server side. However if you don't have control over that, you can do this with javascript for example you could make a simple jquery script:

<script>
        $(document).ready(function() {
          if ($("#container ul li").length > 9) {
            $("#view_all").show().click(function() {
              $("#container ul").addClass("unlimited");
              return false;
            });
          }
        });
</script>

Here I'm assuming you have an anchor embedded in your html with an id of "view_all". You can see what we're doing here. The CSS hides the view all link by default and uses a fixed width and height on the list. If there are more than 10 items they won't be visible as the default styling only permits 9 to be shown. However, the jquery script will tell the web browser to make the view all link visible. Then we assign a click event handler on that link. This applies a class to the list which removes the fixed height allowing all of the list items to be displayed.

You can handle this in a variety of different ways but this is one simple solution. Also note that you would want to add an id or class to the unsorted list so you could be a bit more explicit in your CSS/JS code.

Jim Jeffers 2010-01-18 05:29:37

ansaurus

tags:

views:

answers:

navigation list issue

related questions