thk thk Τετ. 21 Μαϊος. 2008 4:19 tags javascript , madpy , προγραμματισμός 0 views
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";
    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.

θυμήσου με