Web International Awards

payday loan

25

NOV 2009 5

Enhance your clients list page with jQuery goodness

clients list demo preview

I have seen a lot of web development companies, or for that matter, companies that offer IT services having a dull client list page. They usually reside to a logo showcase or a text list divided into multiple columns. This later design is what we will try to achieve in this tutorial, but we will also add a service list, and map the two lists together. Pointing to a service will reveal clients that bought that service while pointing to a client will reveal services bought by that client. We will use jQuery to map the two together.

The HTML

I will be using HTML 5 tags for this tutorial, which means what we are building here will only work on modern browsers. However, it's just a few tags and a doctype that need to be changed to make it work on every browser. The structure of the file will be consisted of two HTML 5 tags: header and section. Enough talk, here's the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header class="top-rounded">
	<!-- this is the horizontal bar with the gradient-->
	<h1>Services</h1>
	<h2>Clients</h2>
</header>
<section>
	<ul class="services btlft-rounded">
		<!-- this is the section that will hold the services-->
		<li>Systems Development
			<ul>
				<li class="ubn"><a href="#" class="">Business Needs</a></li>
				<li class="dd"><a href="#" class="">Design &amp; Development</a></li>
				<li class="ti"><a href="#" class="">Test &amp; Implement</a></li>
			</ul>
		</li>
		<li>Design &amp; Branding
			<ul>
				<li class="mr"><a href="#" class="">Market Research</a></li>
				<li class="bs"><a href="#" class="">Business Strategy</a></li>
				<li class="ci"><a href="#" class="">Corporate Identity</a></li>
				<li class="obp"><a href="#" class="">Online Brand Presence</a></li>
				<li class="ue"><a href="#" class="">User Experience</a></li>
				<li class="ia"><a href="#" class="">Information Architecture</a></li>
				<li class="ad"><a href="#" class="">Application Development</a></li>
			</ul>
		</li>
	</ul>
	<ul class="clients btrght-rounded">
		<!-- this is the section that will hold all clients -->
		<li class="dd ti"><a href="#" class="">Nike</a></li>
		<li class="ubn di ti"><a href="#" class="">Adidas</a></li>
		<li class="dd"><a href="#" class="">Hugo Boss</a></li>
		<li class="ci ad"><a href="#" class="">Canal +</a></li>
		<li class="mr bs ci obp"><a href="#" class="">TV shop plus</a></li>
		<li class="ad"><a href="#" class="">CBS</a></li>
		<li class="ia"><a href="#" class="">NBC</a></li>
		<li class="mr bs ci ue ia ad"><a href="#" class="">GOL TV</a></li>
		<li class="ia ad"><a href="#" class="">Petrom</a></li>
		<li class="ue ia ad"><a href="#" class="">OMV</a></li>
		<li class="ci obp"><a href="#" class="">La pizza</a></li>
		<li class="mr"><a href="#" class="">The shop</a></li>
	</ul>
</section>

As you see in the code above, each list item has a various number of classes. These classes are used to identify services and to map services to clients and viceversa. The class attribute in the anchor tags is used to emphasize which clients or services are selected. With that said it is time to move on to some basic styling.

The CSS

I will use some rounded corners instructions, but apart from that everything else is pretty simple. Here's the CSS code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* reset basic styling and set rounded corners */
*
{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
.all-rounded,
ul.services li a,
ul.clients li a			
{ border-radius:9px; -moz-border-radius:9px; -webkit-border-radius: 9px; }
.btlft-rounded			
{ border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; }
.btrght-rounded			
{ border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.top-rounded			
{ border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px; 
border-top-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; }
 
/* styling of the general structure: size, position and alike */
header
{ display:block; width:801px; height:40px; margin:0px auto; margin-top:100px; border:1px solid #888;  border-bottom:none; }
header h1, header h2
{ display:block; margin:0px; padding:0px; }
header h1
{ width:200px; float:left; }
section	
{ display:block; width:803px; margin:0px auto; margin-bottom:50px; overflow:auto; }
ul
{ display:block; float:left; list-style:none; padding-bottom:15px; }
ul.services
{ width:200px; }
ul.clients
{ width:600px; }
 
/* visual styling: colors, font size etc */
header
{ background:#999 url('../images/top.png') repeat-x; }
header h1, header h2
{ font-size:20px; color:#F6F6F6; line-height:40px; text-align:center; }
ul.services
{ background-color:#999; border:1px solid #888; border-right:none; }
ul.clients
{ background-color:#F0F0F0; border:1px solid #888; }
 
ul.services a, ul.clients a
{ text-decoration:none; }
ul.services li a		
{ display:block; color:#F0F0F0; height:23px; line-height:25px; padding:0px 5px; border:1px solid #999; }
ul.services li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
ul.services li ul		
{ margin-left:20px; }
ul.services li			
{ overflow:hidden; }
 
ul.clients li a			
{ display:block; float:left; width:138px; padding:0px 5px; line-height:25px; height:23px; text-align:center; border:1px solid #F0F0F0; }
ul.clients li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
 
ul.services li a.selected,
ul.clients li a.selected
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }

Clients list demo, columns of unequal height

And here is a demo of how what we coded looks like. Being done with HTML and CSS, we move forward to jQuery coding to map services and clients together.

The jQuery

As you've seen in the demo the two columns do not share the same height. If you have many services and few clients, or few services and lots of clients, it is very likely that the two columns will not be of equal height. We can easily fix that with the following jQuery code:

1
2
3
4
5
6
// resize column for same height
var servicesHeight = $('.services').height(); // get height of services ul
var clientsHeight = $('.clients').height(); // get height of clients ul
// check who's bigger and set height accordingly
if(servicesHeight>clientsHeight) $('.clients').height(servicesHeight); 
   else $('.services').height(clientsHeight);

You can view a demo with the equal height columns problem solved. Next piece of code is the one creating the behavior necessary when clicking on services.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// if services on the left are clicked
$('.services a').click(function(){
   $('.selected').attr('class',''); // a service is clicked, make any, if selected, as not selected
   // when we click one service we need to emphasize that it is selected
   $(this).attr('class','selected'); // set current link as selected	
 
   // get the services classes
   var classesString  = $(this).parent().attr('class');
   var classes = classesString.split(' '); // now classes contains all class attributes of the service clicked
   // loop through all classes
   for(var i=0;i < classes.length;i++)
      {
      // set selected to all clients that have such a service
      $('.clients li.'+classes[i]+' a').attr('class','selected');
      }
});

When clicking a client, same thing happens but exactly the other way. We first get the class attribute of the client to check out the services bought and then loop through those services and set them as selected. Pretty neat! Here's the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// if clients on the right are clicked
$('.clients li a').click(function(){
   $('.selected').attr('class',''); // a client is clicked, make any, if selected, as not selected
   // when we click one client we need to emphasize that it is selected
   $(this).attr('class','selected'); // set current link as selected	
 
   // get the client's classes
   var classesString  = $(this).parent().attr('class');
   var classes = classesString.split(' '); // now classes contains all class attributes of the client clicked
   // loop through all classes
   for(var i=0;i < classes.length;i++)
      {
      // set selected to all services that were bought by the client
      $('.services li.'+classes[i]+' a').attr('class','selected');
      }
});

And we're done. You can check out the final demo over here and download the source codes over here. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Published on Wednesday, November 25th, 2009 at 5:36 pm in code, javascript, jQuery, tutorials.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 
  1. AgeValed says: November 25th, 2009 at 9:31 pm

    It’s ugly! I love jQuery but this is not a great script.

  2. admin says: November 26th, 2009 at 10:19 am

    Hi AgeValed,

    don’t you like the design, or you don’t like what the script does?

  3. dlv says: November 30th, 2009 at 7:17 am

    I like it!!

    I think AgeValed said that because he saw a rustic design. You don’t need to watch it, you have to adapt what the script does to your “beautiful” design, just watch functionality.

    thanks for share
    adeux!

  4. admin says: November 30th, 2009 at 9:56 am

    Hi Adeux,

    Thanks for you comment. I agree with you. The important aspect of this tutorial is the jQuery and the concept, not the design on top of it.

  5. jQuery List Page Enhancer | jQuery4u says: January 17th, 2011 at 12:35 pm

    […] See live Demo Source […]





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.