After the launch of Monkey I have had time to (been forced to) do some other projects. Whilst being a nice change it's also rather annoying not getting to polish something once you have got the first release out. However needs must and hopefully I will be back on it soon.
Being back on the front end train I have strived to gets some things perfect and armed with my new love for the DOM and Hijax I have started to seen new potential solutions to problems.
The one I had today was a design issue where by an ordered list on a website had the potential to contain an item that would wrap onto more than one line. Consequently breaking the nice look and feel of a page.
I found my self with potentially three options to solve this problem.
- Do it back end in the CMS
- Use CSS to limit it's width
- Use DOM Scripting to truncate the node content
Doing it in the back was a bad idea. Firstly its more work in the back end which is already overflowing with work and secondly we would loose content for something which is related to a front end style.
Therefore I decided to go front end on it and had to choose between CSS and JavaScript to perform the truncation of my text.
CSS has the advantage of speed over JavaScript, mainly because you need to wait for the DOM to load before you can edit it meaning that you could potentially see the content disappear before your very eyes.
With CSS we can set the list item in the ordered list to have a set width and no visible overflow. This works well but has no evidence that something has been truncated, and may lead to bad results. Also when you supply overflow: hidden; to a list item in an ordered list the item number is hidden... great! However my list items needed to be links, giving me an anchor tag to apply the overflow:hidden to.
The next problem was to add the ... onto the end of the truncated item. This can be done with the CSS pseudo-element :after which can add in content. However there is no way to apply logic to say only apply the content if it has an overflow.
So the next way to do it was with JavaScript and the DOM, the advantage here was you could apply the changed with logic. You can vary the max size on elements through HTML attributes, apply truncation only when needed, move the full version into another element and if it doesn't work you can still use the CSS to back you up.
function maxLen() {
var toTruncate = new Array();
var toTruncate = getElementsByClassName( document, "*", "truncate" );
var length;
var truncated;
var content;
for( var i=0; i < toTruncate.length; i++ ){
length = toTruncate[i].getAttribute('title');
toTruncate[i].setAttribute('title','');
if(toTruncate[i].firstChild.nodeType == 3){
content = toTruncate[i].firstChild.nodeValue;
if( content.length > length ){
truncated = content.substr(0,length);
toTruncate[i].firstChild.nodeValue = truncated+"...";
toTruncate[i].setAttribute('title',content);
}
}
}
}
Here I used a construct function to call my script on page load, and also used a method to get elements by class name, there are lots on the web you can use!
Let me know what you think or if you have any other options!