Archive for the ‘Development’ category

How to add dots and shorten a string

March 6th, 2010

While working on the back-end Calcatraz management system, I came a cross a situation where I wanted to display strings, but if they were too long I wanted to truncate them and add three dots to the end to show that this had occurred.

I first got on Google and looked for a solution. The best (as in most brief) solution I found could be distilled down to this:

(strlen($str)>10)?substr_replace($str,'...',10):$str;

It’s a bit clumsy, and contains the variable name three times, so would become quite long if the variable name was itself long. It would probably be best wrapped in a function to keep things clean, even if only used once or twice. I decided to try and do better. My first attempt was:

(strlen($str)>10)?substr($str,0,10).'...':'';
It’s shorter and only contains the variable name two times. However, it’s still not great. If it was inlined in code it is difficult to spot where it starts and finishes, so again wrapping it in a function call would probably be the best way to go.
I then realised I could achieve the same thing  with a single call to preg_replace(), like so:

preg_replace('/(.{10}).*/', '\\1...', $str);

This is shorter still, only uses the variable name once and is a single function call making it easier to spot the start and end. It’s not perfectly descriptive, but the second argument in particular does hint at it’s function. I’d be happy using this inline if it was only to be used a couple of times (and the surrounding code was otherwise quite straightforward).

Another Quick Tip: inline divs in IE

February 7th, 2010

In Firefox, it is easy to create an inline div (i.e. a div which adjusts its width to fit its contents). You just do this:

div#elemid { display: inline-block; }

However, it doesn’t work in IE. It took me a while to figure out how to get it working, so here’s the solution:

div#elemid { display: inline-block; *display: inline; zoom: 1; }

It works for the latest versions of IE, Firefox and Chrome (and possibly others – I haven’t tested yet).

Hopefully that’ll save someone some time.

A Quick Tip: Webpage Simplification

February 7th, 2010

If your web pages have a large number of nested div and table tags you may end up wondering whether they are all really necessary, and whether you might not be able to get by with less. While you could run through your code and assess each one individually and decide if it can be removed, there is a quicker, easier way to approach the problem. Simply add the following right at the end of your CSS definitions:

table { border: 1px solid red; }
div { border: 1px solid green; }

This will draw a border round each div and table on your page and let you visually see which are really necessary. It also works better than looking at each table / div in turn as often each seems necessary; it is only when you look at the big picture that you see that two or more can be combined.

As an illustration, here are the before and after screenshots when I applied this to the Calcatraz homepage. The excess tables / divs can be seen in the before shot (click on the image to see it full size). Notice how I’ve been able to two of them in the after shot, leading to shorter, cleaner html, with more of the presentation being handled in CSS where it should be.

Before:

The Calcatraz Homepage - Before

After:

The Calcatraz Homepage - After