In this series I will whine about other's design mistakes and bad interface choices, while boasting about my own and mimmin's superior solutions! And vice versa :-)
This first example is from the interface guru's at 37signals, and their product Basecamp. But it's quite the common problem actually; having a list that is capped, with a "show all"-button that only adds one more item.
In the above example, the list shows 5 elements of overdue milestones. Then there's a button telling you there are 6 elements, and you think to yourself: "with that button there are 6 elements on the screen, so why not skip the button and show me that last item?".
Below is the pseudocode for accomplishing this.
MAX_ITEMS = 5
if (number of items < MAX_ITEMS)
output_length = number of items
else if (number of items == MAX_ITEMS)
output_length = MAX_ITEMS
output_length = MAX_ITEMS - 1
for (i = 0; i < output_length; i++)
if (number of items > MAX_ITEMS)
output show all message
Thanks for your time, hope this can help someone! Share your thoughts and experience →
It's a common problem. The floated sidebar (or whatever you've floated this time ;-) get's to much content, and suddenly it overflows the wrapping div. The code might look like something below.
Now if the sidebar is floated, and has longer content than
#content, it will expand outside
#wrapper. This problem is often solved by appending an extra element inside
#wrapper, and apply CSS
clear:both to it.
But this extra HTML doesn't look so nice. A friend of mine pointed me to a blog entry which had some different takes on the problem. One of these solutions was so elegant, I just had to write this notice about it!
The solution is to add the CSS attribute
overflow and set it to
auto. If you experience problems with scrollbars, try
hidden instead. Note that this is yet to be tested by me, but the example seemed to work in the major browsers.
The plugin, called Inline Edit, makes it a lot quicker to implement edit and remove functions. It can turn any dynamic data list into a click-and-edit list.
Try and download it at Github!
If you have comments, missing features or bug reports: please add a comment!
At Mimmin we know that every tiny detail can matter, and we always strive to simplify things and remove the unnecessary. This might be things like graying out certain parts of text to make others more evident.
Enhancing the readability of a log
One of the most useful things with this library is to convert absolute times (like 2009-01-10) into relative ones (like 6 weeks ago). I will in an example show how to convert a log with dates into one with relative dates.
The markup for the log list is a follows.
<div>An item has been added</div>
<div class="date">2009-01-19 13:58</div>
<div>An item has been removed</div>
<div class="date">2009-01-19 17:15</div>
var date = $(this).text();
remaining.getString(-remaining.getSeconds(date), null, true) + ' ago'
First we save the date value. Then we replace it with the return value from
remaining.getString. The return value from
remaining.getSeconds(date) is inverted because the function calculates time remaining, and we want the time that has passed.
The second parameter to
remaining.getString is an internationalization (i18n) object, which I didn't alter since the output should be in english.
The third parameter is a flag that controls if the output should be exact, or if it is enough with only the largest unit. Example output is "2 hours, 1 minute, 5 seconds" versus "2 hours".
At last we add the saved date to the attribute "title" of the div element. This is all that is needed folks! But don't forget to include the Countdown Library using the snippet below.
If you have any questions, please leave a comment →
Our custom buttons are added by a script looping through all button and input elements with the class "button" applied. After these elements an image link is created. An event is hooked on this link, which in case of click, pushes the original button, or if it is a submit button, submits the form.
This all worked very well for all forms but one. After too long time spent Googling and debugging, I discovered the solution! Because the original submit button was named "submit" it wouldn't submit the form. So after renaming it, all was good again! I think it behaves this way because the submit element replaces the submit() function of the form.
<input type="submit" name="submit" />
<input type="submit" name="continueButton" />