count chars in list [Archive]

C.O.D.E.N.A.M.E

05-03-2009, 12:39 PM

I have a list where I want to cut off some characters and replace the linktext from the last li (can be any number of LIs) with ... and inject the linktext into the title. I need a condition that only performs this function when the total of the characters plus spaces of all <li>s exceeds a number of characters. I use mootools to code.
I know you can get the value by using
var chars = myEl.get("value").length;
And I should get all chars by using a forEach loop but then I am stuck.

<ul id="myEl">
<li><a href="#">SomelinkTextLargerSomelinktext</a> -</li>
<li><a href="#">SomelinkTextSomeLink</a>
-</li>
<li><a href="#">SomelinkText</a> -</li>
<li><a href="#">SomelinkText</a></li>
</ul>

I get this:

<ul>
<li><a href="#">SomelinkTextLargerSomelinktext</a> -</li>
<li><a href="#">SomelinkTextSomeLink</a>
-</li>
<li><a href="#">SomelinkText</a> -</li>
<li><a href="#" title="SomelinkText">Somelink ...</a></li>
</ul>

abduraooft

05-03-2009, 12:57 PM

Here it is..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload=function(){
if(!document.getElementById('mylist'))
return;
var max=8;
var lis=document.getElementById('mylist').getElementsByTagName('li');
var lastLink=lis[lis.length-1].getElementsByTagName('a')[0];
var linkText=lastLink.innerHTML;
//alert(linkText);
if(linkText.length>max)
lastLink.setAttribute('title',linkText);
lastLink.innerHTML=linkText.substr(0,max) + ' ...';
}
</script>
</head>
<body>
<ul id="mylist">
<li><a href="#">SomelinkTextLargerSomelinktext</a> -</li>
<li><a href="#">SomelinkTextSomeLink</a>
-</li>
<li><a href="#">SomelinkText</a> -</li>
<li><a href="#">SomelinkText</a></li>
</ul>
</body>
</html> :)

C.O.D.E.N.A.M.E

05-03-2009, 08:43 PM

Thanks very much for your help. It sure is the right way to go but not exactly what I need.

I need to cutoff the characters of the last li which exceed the max allowed characters. Can I therefore calculate the total of characters of all Lis together? Something like count++

So I have let's say 77 chars max , and the total of all Lis is 83 chars - I need to cut off 6 chars of the last LI. For the max I also should take in account the 4 characters ' ....'

maxcharsofLastLi = total of last Li -(total of all Lis - max)

lastLink.innerHTML=linkText.substr(0,maxcharsofLastLi) + ' ...';

Anyone ideas?

adios

05-04-2009, 01:17 AM

This is pretty unpolished ... but see if it does what you want.

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function truncateLast(listType, maxChars)
{
var thisItem, lastItem, linkText, newText, OKlength;
var totalChars = n = 0;
var truncLink;
var lists = document.getElementsByTagName(listType); //all lists
var list = lists[lists.length - 1]; //the last one
var listItems = list.getElementsByTagName('li');
for (; thisItem = listItems[n]; n++) //loop
{
linkText = thisItem.firstChild.firstChild; //text node
totalChars += linkText.nodeValue.length; //length, accumulate
}
lastItem = listItems[listItems.length - 1]; //last li
if (totalChars > maxChars) //oops
{
OKlength = linkText.nodeValue.length - (totalChars - maxChars); //room left
truncLink = linkText.nodeValue.substring(0, OKlength); //truncate it
lastItem.setAttribute('title', linkText.nodeValue); //set title
newText = document.createTextNode(truncLink); //new text node
lastItem.firstChild.replaceChild(newText, linkText); //swap it
}
}

</script>
</head>
<body>
<ul>
<li><a href="#">SomelinkTextLargerSomelinktext</a> -</li>
<li><a href="#">SomelinkTextSomeLink</a>-</li>
<li><a href="#">SomelinkText</a> -</li>
<li><a href="#">SomelinkText</a></li>
</ul>
<script type="text/javascript">
truncateLast('ul',70)
</script>
<ol>
<li><a href="#">foobarff</a> -</li>
<li><a href="#">foobarrrr</a>-</li>
<li><a href="#">foobarfoobar</a> -</li>
<li><a href="#">foobarbeque</a></li>
</ol>
<script type="text/javascript">
truncateLast('ol',32)
</script>
</body>
</html>

You can call the routine immediately after any list. This should be done at the server, naturally, but ... you knew that. Cheers.

adios

05-04-2009, 01:55 AM

Hi! Nice weather we're having!

adios

05-04-2009, 02:43 AM

Just read the part about counting the dots ...

<html>
<head>
<title>untitled</title>
<style type="text/css">
ol, ul {border: 1px gray dashed;}
li {padding: 4px;}
ul li a:link {font: 12px monospace; color: darkgreen;}
ol li a:link {font: 12px monospace; color: darkred;}
</style>
<script type="text/javascript">

function truncateLast(listType, maxChars)
{
var thisItem, lastItem, linkText, newText, OKlength, truncLink;
var totalChars = n = 0;
var ellipsis = ' ...'; //hover cue
var lists = document.getElementsByTagName(listType); //all lists
var list = lists[lists.length - 1]; //last one
var listItems = list.getElementsByTagName('li');
for (; thisItem = listItems[n]; n++) //loop
{
linkText = thisItem.firstChild.firstChild; //text node
totalChars += linkText.nodeValue.length; //length, accumulate
}
if (totalChars > maxChars) //oops
{
lastItem = listItems[listItems.length - 1]; //last li
totalChars += ellipsis.length;
OKlength = linkText.nodeValue.length - (totalChars - maxChars); //room left
truncLink = linkText.nodeValue.substring(0, OKlength); //truncate it
lastItem.setAttribute('title', linkText.nodeValue); //set title
newText = document.createTextNode(truncLink + ellipsis); //new text node
lastItem.firstChild.replaceChild(newText, linkText); //swap it
}
}

</script>
</head>
<body>
<ul>
<li><a href="#">SomelinkTextLargerSomelinktext</a> -</li>
<li><a href="#">SomelinkTextSomeLink</a>-</li>
<li><a href="#">SomelinkText</a> -</li>
<li><a href="#">SomelinkText</a></li>
</ul>
<script type="text/javascript">
truncateLast('ul',70)
</script>
<ol>
<li><a href="#">foobarff</a> -</li>
<li><a href="#">foobarrrr</a>-</li>
<li><a href="#">foobarfoobar</a> -</li>
<li><a href="#">foobarbeque</a></li>
</ol>
<script type="text/javascript">
truncateLast('ol',36)
</script>
<ul>
<li><a href="#">tenletters</a> -</li>
<li><a href="#">tenletters</a>-</li>
<li><a href="#">tenletters</a> -</li>
<li><a href="#">tenletters</a></li>
</ul>
<script type="text/javascript">
truncateLast('ul',37)
</script>
</body>
</html>