Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adding ellipses to long content

    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...

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    String.prototype.abbr=function(len){return this.slice(0,len-3)+"..."}

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hubbni's probably looking for something a bit more advanced than just replace the last 3 characters with dots...:

    PHP Code:
    String.prototype.abbr =
    function ( 
    len )
    {
        if ( 
    this.length len )
        {
            return 
    this.slicelen ) + '...';
        }
    }; 

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by 1212jtraceur View Post
    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"
    Last edited by rnd me; 07-20-2007 at 05:54 AM.

  • #5
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #7
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <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>
    Code:
    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!

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    this example shortens all hyperlink's text to fit within a 15 char slot:

    Code:
    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
    Last edited by rnd me; 07-20-2007 at 07:42 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #9
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So do I just add this above my code?

    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>

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by hubbni View Post
    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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #11
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have another script that uses:

    Code:
    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...
    Last edited by hubbni; 07-20-2007 at 08:04 PM.

  • #12
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    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...yv2QSL0-?p=120

  • #13
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah, I need this to be cross browser compatible, on Mac also.

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •