user
pass
 
 
from thk thk on 2008-05-21 04:19 tags javascript , programming , madpy
If you have visited a blog in kaotonik before, you may have noticed , that few days ago, a read more link was added at the bottom of every blog item , and the the item showed clipped.
This is the "read more" functionality I had been planning to add.
But as I am lazy programmer Ι ended up with very gypsy solution (i like Borat too).
So to resume my friends, as many other problems in web development I had two roads in front me:
The server road and the client road
(and of course there is always another road , to give up with programming).
In the server road I had to filter html and cut it in best possible position outside tags (because I wanted clipped content to be shown as html - not clear text) , but then what about images , one could add images and not write a single word and then ...
This is the time when , if you are lazy programmer you put reverse  and travel  back to take a more easy road.
And the client way is more easy to go.

You place the content you want to clip in a div. If we lived in a perfect world there wouldn't be any internet explorer , but now there is one, so because IE does not understand max-height, you have to write some javascript. (yes - because of IE, I had to code now, you got it , I could have gotten away with just one css line!. and this fact can explain such posts as this , and this).

A function that counts the height of each div and if it's greater than a max height it will set the height of the div to the max height parameter and add a read more link.
This had another nice effect that if content was not taller than max-height ,then no read more link was added on bottom.
So that's it .. The "Read more" of a lazy programmer .
Here is the javascript  code but see also the source of blog , to see where and how is called. The calls are after each blog item.

function setReadMore(clipedId , linkId , maxheight)
{
clipElem = document.getElementById(clipedId);

if (clipElem.offsetHeight > maxheight)
    {
    clipElem.style.height =  maxheight + "px";
    }
else
    {
    document.getElementById(linkId).style.display = "none";
    }

}

Also to override the max-height value of the site, you can edit parameters of your blog ,
and add a list_item_max_height parameter and set it's value to a numeric value (integer).
This way you can control the max height of your blog items.
Geia sas.

Add comment

write your comment here
Nowadays you have to prove that you are a human. Type the letters as they appear on the image. Letter case does not matter