...

View Full Version : Adding ellipses to long content



hubbni
07-19-2007, 11:17 PM
Is there a way to limit the length of content, and if it is too long replace the rest of the content with ellipses (. . .)? Any I am not talking about in a form field...

rnd me
07-20-2007, 04:09 AM
String.prototype.abbr=function(len){return this.slice(0,len-3)+"..."}

1212jtraceur
07-20-2007, 04:29 AM
hubbni's probably looking for something a bit more advanced than just replace the last 3 characters with dots...:



String.prototype.abbr =
function ( len )
{
if ( this.length > len )
{
return this.slice( 0 , len ) + '...';
}
};

rnd me
07-20-2007, 04:40 AM
hubbni's probably looking for something a bit more advanced than just replace the last 3 characters with dots...:
thats not what the version i posted does...

heres a function instead of proto (just in case)

function abbr( str, len ) //enter desired final string length for len.
{
return ((len+3) < str.length?(str.slice( 0 , len-3 ) + '...'):str)
};

//ex:
abbr('now is th time for all good men',6) //"now..."
abbr('now is th time for all good men',16) //"now is th tim..."
abbr('now is th time for all good men',-6) //"now is th time for all..."
abbr('now is th time for all good men',66) //"now is th time for all good men"

hubbni
07-20-2007, 03:48 PM
thats not what the version i posted does...

heres a function instead of proto (just in case)

function abbr( str, len ) //enter desired final string length for len.
{
return ((len+3) < str.length?(str.slice( 0 , len-3 ) + '...'):str)
};

//ex:
abbr('now is th time for all good men',6) //"now..."
abbr('now is th time for all good men',16) //"now is th tim..."
abbr('now is th time for all good men',-6) //"now is th time for all..."
abbr('now is th time for all good men',66) //"now is th time for all good men"

I am new to this, so how would I apply this to my HTML code?

rnd me
07-20-2007, 06:04 PM
if my examples don't help, post what you have, and indicate where you want the abbreviations, and i will try to show you in-context.

hubbni
07-20-2007, 06:07 PM
<ul id="event_container">
<li><a href="http://websrv.puc.edu/news_events/calendar/events/2007-2008/ragazzi_music_camp"><strong>Jul 19</strong>
Ragazzi Music Camp, 12:00am</a><div class="hr_wrap"><hr /></div></li>
<li><a href="http://websrv.puc.edu/news_events/calendar/events/2007-2008/digital_art_photography_class_afs"><strong>Jul 15</strong>
Digital Art Photography Class [AFS], 12:00am</a><div class="hr_wrap"><hr /></div></li>
<li><a href="http://websrv.puc.edu/news_events/calendar/events/2007-2008/redwood_camp_meeting"><strong>Jul 19</strong>
Redwood Camp Meeting, 12:00am</a><div class="hr_wrap"><hr /></div></li>
<li><a href="http://websrv.puc.edu/news_events/calendar/events/2007-2008/sunset4"><strong>Jul 20</strong>
Sunset, 8:31pm</a><div class="hr_wrap"><hr /></div></li></ul>


Digital Art Photography Class [AFS], 12:00am

That is an event that displays in a list for our homepage. But it is too long. I would like to see how I can add the javascript to this event, and then I should be able to do it for the rest.

Thanks!

rnd me
07-20-2007, 06:36 PM
this example shortens all hyperlink's text to fit within a 15 char slot:




function tags(tid) {
return document.getElementsByTagName(tid);
}


function ndVal(nd){
if(nd.nodeValue){return nd.nodeValue};
return (nd.innerText?nd.innerText:nd.textContent)
}

var hits=tags("a")
var mx = hits.length;

for(var z=0; z<mx;z++){
buff=ndVal(hits[z].innerHTML)
hits[z].innerHTML=abbr(buff, 15)
}//next

hubbni
07-20-2007, 06:39 PM
So do I just add this above my code?


<script type="text/javascript">
<!--
function tags(tid) {
return document.getElementsByTagName(tid);
}

var hits=tags("a")
var mx = hits.length;

for(var z=0; z<mx;z++){
buff=hits[z].innerHTML
hits[z].innerHTML=abbr(buff, 15)
}//next
//-->
</script>

rnd me
07-20-2007, 06:50 PM
So do I just add this above my code?

make a script tag at the end of your document, and put the code there.
you may have to wrap all of my code in one function, and add that function's name to the body's onload attrib.

hubbni
07-20-2007, 06:57 PM
I have another script that uses:


function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}

else
{
window.onload = function()
{
if (oldonload)
{
oldonload();
}
func();
}
}
}

How could I incorporate what you gave me? Seems like I am not understanding how to implement this...

trinzia
07-21-2007, 12:42 AM
If you don't care about Firefox, you could just put text-overflow:ellipsis in the CSS. Only works in IE.

If you do care, here's link to working example for Firefox:
http://blog.360.yahoo.com/blog-ktYYK_s5fqJ2Hu1ryv2QSL0-?p=120

hubbni
07-25-2007, 06:46 PM
Yeah, I need this to be cross browser compatible, on Mac also.

I am getting a javascript error with abbr, should this be corrected?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum