Sunday, January 17, 2010
HTML CSS JS navigation list issue
I am working on a small application below where there is a collection of list items all list items should be within the box no matter how many they are like they can be on the second column. Also I want to keep a limit on the number of list items that can be displayed like not more then say 10 so the moment there are 10 items the 10th item should be omitted and "View All" should be displayed. so once user clicks on View All he can be directed to the second page and all items can be displayed.
below is my code.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {
border: 1px dotted #D7D7D7;
padding: 0px 5px 5px 8px;
height: 250px;
width: 250px;
}
#heading {
}
ul {
display: inline;
}
ul li{
display: block;
}
</style>
</head>
<div id="container">
<div id="heading">Style </div>
<ul>
<li> >>1 </li>
<li> >>2 </li>
<li> >>3 </li>
<li> >>4 </li>
<li> >>5 </li>
<li> >>6 </li>
</ul>
</div>
<body>
</body>
</html>
Answers
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.
No comments:
Post a Comment