Markus Hedlund

Developer / Photographer

Contact / GitHub / Instagram

Design miss #1 - Limiting a list in PHP/Javascript/Ruby/other

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
else
    output_length = MAX_ITEMS - 1

for (i = 0; i < output_length; i++)
    output items[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 →

Css: Fix floated divs that overflow the wrapping

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.

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

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.

jQuery Inline Edit

And then I released my first jQuery plugin. What jQuery is? Oh, it's just the greatest Javascript framework evah, it makes Javascript programming so much more fun!

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!

Convert dates to elapsed time with Javascript

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.

A while ago I made a Javascript library that could convert absolute time to relative. This proved to be useful in many projects. When I implemented it in one of our latest projects I had to make some improvements. These changes made it to a patch, and now the official build is updated to version 1.1. Because of this I thought it would be good to make a small tutorial and show one way of using library.

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.

Above you can see the expected result of this tutorial. The original dates will be converted to time elapsed. I will be using the excellent Javascript framework jQuery, but this is not necessary since the Countdown Library is framework independent.

The markup for the log list is a follows.

<ul id="log">
  <li class="added">
    <div>An item has been added</div>
    <div class="date">2009-01-19 13:58</div>
  </li>

  <li class="removed">
    <div>An item has been removed</div>
    <div class="date">2009-01-19 17:15</div>
  </li>
</ul>

We now want to, using Javascript, step through every div element with class "date" in the ul element "log". We will then replace the date value with a "time passed" value. But for those users that are looking for the absolute date, we are going to add it to the "title" attribute of the div. Code as follows.

$('#log div.date').each(function(){
  var date = $(this).text();
  $(this).
    html(
      remaining.getString(-remaining.getSeconds(date), null, true) + ' ago'
    ).attr('title', date);
});

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.

<script type="text/javascript" src="http://www.labs.mimmin.com/countdown/remaining.js"></script>

If you have any questions, please leave a comment →

Unable to javascript-submit a form using jQuery?

Today we stumbled across the strangest error while making custom submit buttons. We are developing a site that won't depend on javascript for any functionality. This is the way you always should work to make a robust site, though it might sometimes get overlooked. The plan is to first make a functional version which we then extend using javascript.

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.

Solution: Never ever name a form field "submit", it might just break any javascript!

<!-- BAD -->
<input type="submit" name="submit" />

<!-- GOOD -->
<input type="submit" name="continueButton" />