Web International Awards

payday loan

15

APR 2010 0

Improving UIs by hiding unused elements

As strange as it may sound, this is quite a good enhancement. I am not referring to anything similar to Windows's "unused icons on your desktop". I am referring to something that works similarly to Twitter's reply and retweet buttons.

Basically, with this short tutorial I want to achieve the following:

  1. Add CRUD controls to a list of objects (these can be users, comments etc)
  2. Display these controls by default
  3. Hide them if javascript is available
  4. Show them only when the user hovers them afterwards

UI hover event preview

I am going to apply these controls to lists of objects, users in particular. I am not going to use ul or ol tags to encapsulate data. I will be using table instead, because I am dealing with tabular data and this is where tables should be used!

HTML

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
<table cellspacing="0" cellpadding="0" >
	<tr>
 
		<th class="id">ID</th>
		<th class="avatar">Avatar</th>
		<th class="username">Username</th>
		<th class="email">Email</th>
		<th class="social" colspan="2">Social</th>
		<th class="controls">Controls</th>
	</tr>
	<tr>	
		<td>29</td>
		<td><img class="gravatar" alt="" width="45" height="45" src="http://www.gravatar.com/avatar/a9f8c8c99979f5ea2773715668f47109?rating=PG&amp;size=45" /></td>
		<td>Alex Flueras</td>
		<td>hidden-email@hidden-domain.com</td>
		<td>
			<a class="hastwitter" href="http://www.twitter.com/WebRaptor" target="_new">WebRaptor</a>
		</td>
		<td>
		</td>
		<td>
			<span>
				<a href="#/users/show/29" class="show">Show</a>
				<a href="#/users/edit/29" class="edit">Edit</a>
				<a href="#/users/destroy/29" class="destroy">Destroy</a>
			</span>
		</td>
	</tr>
	<tr>
		<td>2</td>
		<td><img class="gravatar" alt="" width="45" height="45" src="http://www.gravatar.com/avatar/b0fcab2a1048d65d9d0e4e65153484ac?rating=PG&amp;size=45" /></td>
		<td>bogdan</td>
		<td>hidden-email@hidden-domain.net</td>
		<td>
			<a class="hastwitter" href="http://www.twitter.com/WebRaptor" target="_new">WebRaptor</a>
		</td>
		<td>
		</td>
		<td>
			<span>
				<a href="#/users/show/29" class="show">Show</a>
				<a href="#/users/edit/29" class="edit">Edit</a>
				<a href="#/users/destroy/29" class="destroy">Destroy</a>
			</span>
		</td>
	</tr>
</table>

CSS

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
/* general resets and global classes */
* { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
body { font-family:Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif; font-size:62.5%; }
 
 
/* user management related styling */
table { border:1px solid #CECECE; border-top:none; border-left:none; margin:0px auto; margin-top:100px; }
table th,
table td { border:1px solid #CECECE; border-bottom:none; border-right:none; padding:3px; }
table th { height:40px; background:url('images/overlay_header.jpg') repeat-x; color:#FEFEFE; }
th { text-align:center; }
th.id { width:24px; }
th.avatar { width:45px; }
th.username { width:263px; }
th.email { width:354px; }
th.social { width:94px; }
th.controls { width:114px; }
tr.global { background-color:#B2FFB2; }
tr.admin { background-color:#FFFFB2; }
tr.banned { background-color:#FFB2B2; }
tr { color:#999; }
tr:hover { color:#333; }
 
 
a.hastwitter, a.hasfacebook,
a.notwitter, a.nofacebook { display:block; width:45px; height:45px; text-indent:-1000em; background:url('images/social_hover_user.png') no-repeat; }
a.hastwitter { background-position:bottom left; }
a.notwitter { background-position:top left; }
a.hasfacebook { background-position:bottom right; }
a.nofacebook { background-position:top right; }
td span a { display:block; float:left; width:37px; height:45px; background:url('images/user_list_controls.png') no-repeat; text-indent:-1000em; }
td span a.show { background-position:top left; }
td span a.edit { background-position:top center; }
td span a.destroy { background-position:top right; }
td span a.show:hover { background-position:bottom left; }
td span a.edit:hover { background-position:bottom center; }
td span a.destroy:hover { background-position:bottom right; }

Here's a demo of what we've done so far. The CSS above is not complicated at all. Just some basic background images, using css sprites — that's why the css ends with all those background-position declarations.

As you can see in the html above, the right end of each row contains three action controls. Now, if I'm going to have 50 or more users per page, that will add visual weight on the page which is not good. That's why I chose to remove the elements and display them only when someone hovers a specific row in the table. I am doing that with javascript, and here's the code:

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
function admin_controls_user_list_hover()
{
	$('td span').css('display','none');
	$('tr').hover(
		function(){ $(this).find('span').css('display','block'); },
		function(){ $(this).find('span').css('display','none'); }
	);
}
 
$(document).ready(function(){
	admin_controls_user_list_hover();
});

As you can see, on page load I am simply hiding the elements, then using jQuery's hover() method together with two functions that are executed when the mouse pointer enters or leaves any row in our table. Here's the full demo and here's the full source code. Enjoy!

You can stay updated to new content via our RSS feed or by email.

Further reading

Published on Thursday, April 15th, 2010 at 8:00 pm in 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.
 

There are no comments. You can be the first to post one.





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.