Gfeedfetcher - How can i limit the number of characters in items' titles?

1) Script Title:gfeedfetcher

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...sdisplayer.htm

3) Describe problem: How can i increase the number of characters in feed description?

I need some help to increase the number of characters in the feed discription. I have read to you have to adjust some in the item discription. I tired but didnt work.
Here is my gfeed code, can somebody please tell me what to do. Iam getting crazy ;(

Code:

---

gfeedfetcher.prototype._displayresult=function(feeds){
        var rssoutput=(this.containertag[0]=="li")? "<ul>\n" : ""
        gfeedfetcher._sortarray(feeds, this.sortstring)
        var itemurl=[], itemtitle=[], itemlabel=[], itemdate=[], itemdescription=[]
        for (var i=0; i<feeds.length; i++){
                itemurl.push(feeds[i].link)
                itemtitle.push('<span class="titlefield"><a href="' + feeds[i].link + '" target="' + this.linktarget + '">' + feeds[i].title + '</a></span>\n')
                itemlabel.push(/label/i.test(this.showoptions)? '<span class="labelfield">'+this.feeds[i].ddlabel+'</span>\n' : "")
                itemdate.push(gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions))
                var itemdescriptionsingle=/description/i.test(this.showoptions)? feeds[i].content : /snippet/i.test(this.showoptions)? feeds[i].contentSnippet  : ""
                itemdescriptionsingle=(itemdescriptionsingle!="")? '<span class="descriptionfield">' + itemdescriptionsingle + '</span>\n' : ""
                itemdescription.push(itemdescriptionsingle)
        }

---

Thanks.

Dan

Moderator's Note: I've changed the title of this thread to reflect the real issue which was initially unclear. The actual answer to the real question is in post 8:

http://www.dynamicdrive.com/forums/s...969#post318969

of this thread.

Are you using snippet in the displayoptions field? If so, change that to description in the on page call (from Step 3 on the demo page):

Code:

---

<script type="text/javascript">

var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.init() //Always call this last

</script>

---

Make that:

Code:

---

<script type="text/javascript">

var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime description") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.init() //Always call this last

</script>

---

Or if you haven't included either (again, from Step 3):

Code:

---

<script type="text/javascript">

var cssfeed=new gfeedfetcher("example1", "example1class", "")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("li") //Display each entry as a list (li element)
cssfeed.filterfeed(10, "title") //Show 10 entries, sort by date
cssfeed.init() //Always call this last

</script>

---

Add description:

Code:

---

<script type="text/javascript">

var cssfeed=new gfeedfetcher("example1", "example1class", "")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date description") //show the specified additional fields
cssfeed.setentrycontainer("li") //Display each entry as a list (li element)
cssfeed.filterfeed(10, "title") //Show 10 entries, sort by date
cssfeed.init() //Always call this last

</script>

---

Hello John,

First thanks for your quick reply. I cant get it working. Can you please look at it. But i quess i need to change somthing in the Gfeedhetcher script too.
I only want to show the headlines, no dates or anything else.
This is what i use now.

Code:

---

<script type="text/javascript">
var cssfeed=new gfeedfetcher("feed", "", "") //Specify "Id", "Class", ""
cssfeed.addFeed("Nu.nl", "http://www.nu.nl/rss/Algemeen") //Specify "label"
cssfeed.displayoptions("") //show the specified additional fields options: label/date
cssfeed.setentrycontainer("li") //Display each entry as a list (li element) options: div / li
cssfeed.filterfeed(5, "date") //Show 10 entries, sort by date options: title/date
cssfeed.init() //Always call this last
</script>

Gfeedfetcher:

// -------------------------------------------------------------------
// gAjax RSS Feeds Displayer- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Created: July 17th, 2007
// Updated June 14th, 10': Fixed issue in IE where labels would sometimes be associated with the incorrect feed items
// Updated May 24th, 12': Added onfeedload event handler to run code when a RSS displayer has fully loaded 2) Script now skips the loading of a RSS feed if it's invalid (instead of alert a message)
// Updated Sept 20th, 12': Version 2. Adds support for templating of entries' output, search and replace via regular expressions inside any RSS field
// -------------------------------------------------------------------




var gfeedfetcher_loading_image="img/loader.gif" //Full URL to "loading" image. No need to config after this line!!

google.load("feeds", "1") //Load Google Ajax Feed API (version 1)//



function gfeedfetcher(divid, divClass, linktarget){
        this.linktarget=linktarget || "" //link target of RSS entries
        this.feedlabels=[] //array holding lables for each RSS feed
        this.feedurls=[]
        this.feeds=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
        this.feedsfetched=0 //number of feeds fetched
        this.feedlimit=5
        this.showoptions="" //Optional components of RSS entry to show (none by default)
        this.outputtemplate="{title} {label} {date}<br />{description}" // output template for each RSS entry
        this.regexprules=[] // array to hold regexp rules [regex, replacestr, field_to_apply_to]
        this.sortstring="date" //sort by "date" by default
        document.write('<div id="'+divid+'" class="'+divClass+'"></div>') //output div to contain RSS entries
        this.feedcontainer=document.getElementById(divid)
        this.containertag=["li", "<li>"] // [tag to wrap around each rss entry, final tag]
        this.onfeedload=function(){}
}


gfeedfetcher.prototype.addFeed=function(label, url){
        this.feedlabels[this.feedlabels.length]=label
        this.feedurls[this.feedurls.length]=url
}

gfeedfetcher.prototype.filterfeed=function(feedlimit, sortstr){
        this.feedlimit=feedlimit
        if (typeof sortstr!="undefined")
        this.sortstring=sortstr
}

gfeedfetcher.prototype.displayoptions=function(parts){
        this.showoptions=parts //set RSS entry options to show ("date, datetime, time, snippet, label, description")
}

gfeedfetcher.prototype.definetemplate=function(str){
        this.outputtemplate=str
}

gfeedfetcher.prototype.addregexp=function(regliteral, replacewith, field){
        this.regexprules.push([
                regliteral,
                replacewith,
                field
        ])
}

gfeedfetcher.prototype.setentrycontainer=function(containertag, cssclass){  //set element that should wrap around each RSS entry item
        this.containertag=[containertag.toLowerCase(), '<' + containertag.toLowerCase ()+ (cssclass? ' class="'+cssclass+'"' : '') + ' >']
}

gfeedfetcher.prototype.init=function(){
        this.feedsfetched=0 //reset number of feeds fetched to 0 (in case init() is called more than once)
        this.feeds=[] //reset feeds[] array to empty (in case init() is called more than once)
        this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)'
        var displayer=this
        for (var i=0; i<this.feedurls.length; i++){ //loop through the specified RSS feeds' URLs
                var feedpointer=new google.feeds.Feed(this.feedurls[i]) //create new instance of Google Ajax Feed API
                var items_to_show=(this.feedlimit<=this.feedurls.length)? 1 : Math.floor(this.feedlimit/this.feedurls.length) //Calculate # of entries to show for each RSS feed
                if (this.feedlimit%this.feedurls.length>0 && this.feedlimit>this.feedurls.length && i==this.feedurls.length-1) //If this is the last RSS feed, and feedlimit/feedurls.length yields a remainder
                        items_to_show+=(this.feedlimit%this.feedurls.length) //Add that remainder to the number of entries to show for last RSS feed
                feedpointer.setNumEntries(items_to_show) //set number of items to display
                feedpointer.load(function(label){
                        return function(r){
                                displayer._fetch_data_as_array(r, label)
                        }
                }(this.feedlabels[i])) //call Feed.load() to retrieve and output RSS feed.
        }
}


gfeedfetcher._formatdate=function(datestr, showoptions){
        var itemdate=new Date(datestr)
        var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : (showoptions.indexOf("time")!=-1)? itemdate.toLocaleTimeString() : ""
        return "<span class='datefield'>"+parseddate+"</span>\n"
}

gfeedfetcher._sortarray=function(arr, sortstr){
        var sortstr=(sortstr=="label")? "ddlabel" : sortstr //change "label" string (if entered) to "ddlabel" instead, for internal use
        if (sortstr=="title" || sortstr=="ddlabel"){ //sort array by "title" or "ddlabel" property of RSS feed entries[]
                arr.sort(function(a,b){
                var fielda=a[sortstr].toLowerCase()
                var fieldb=b[sortstr].toLowerCase()
                return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
                })
        }
        else{ //else, sort by "publishedDate" property (using error handling, as "publishedDate" may not be a valid date str if an error has occured while getting feed
                try{
                        arr.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})
                }
                catch(err){}
        }
}

gfeedfetcher.prototype._fetch_data_as_array=function(result, ddlabel){       
        var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
        if (thisfeed==""){ //if error has occured fetching feed
                this._signaldownloadcomplete()
                return
        }
        for (var i=0; i<thisfeed.length; i++){ //For each entry within feed
                result.feed.entries[i].ddlabel=ddlabel //extend it with a "ddlabel" property
        }
        this.feeds=this.feeds.concat(thisfeed) //add entry to array holding all feed entries
        this._signaldownloadcomplete() //signal the retrieval of this feed as complete (and move on to next one if defined)
}

gfeedfetcher.prototype._signaldownloadcomplete=function(){
        this.feedsfetched+=1
        if (this.feedsfetched==this.feedurls.length){ //if all feeds fetched
                this._displayresult(this.feeds) //display results
                this.onfeedload()
        }
}


gfeedfetcher.prototype._displayresult=function(feeds){
        var rssoutput=(this.containertag[0]=="li")? "<ul>\n" : ""
        gfeedfetcher._sortarray(feeds, this.sortstring)
        var itemurl=[], itemtitle=[], itemlabel=[], itemdate=[], itemdescription=[]
        for (var i=0; i<feeds.length; i++){
                itemurl.push(feeds[i].link)
                itemtitle.push('<span class="titlefield"><a href="' + feeds[i].link + '" target="' + this.linktarget + '">' + feeds[i].title + '</a></span>\n')
                itemlabel.push(/label/i.test(this.showoptions)? '<span class="labelfield">'+this.feeds[i].ddlabel+'</span>\n' : "")
                itemdate.push(gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions))
                var itemdescriptionsingle=/description/i.test(this.showoptions)? feeds[i].content : /snippet/i.test(this.showoptions)? feeds[i].contentSnippet  : ""
                itemdescriptionsingle=(itemdescriptionsingle!="")? '<span class="descriptionfield">' + itemdescriptionsingle + '</span>\n' : ""
                itemdescription.push(itemdescriptionsingle)
        }
        // create temp object to store references to rss components, for access dynamically:
        var holder={urlfield: itemurl, titlefield: itemtitle, labelfield: itemlabel, datefield: itemdate, descriptionfield: itemdescription}
        var regexprules=this.regexprules
        for (var i=(this.regexprules && this.regexprules.length>0? this.regexprules.length-1 : -1); i>=0; i--){ // loop thru regexprules array
                if (regexprules[i][2]=="titlefield" || regexprules[i][2]=="labelfield" || regexprules[i][2]=="datefield" || regexprules[i][2]=="descriptionfield"){
                        var targetarray=holder[regexprules[i][2]] // reference array containing said field type (ie: itemdescription if regexprules[i][2]=="descriptionfield")
                        targetarray=targetarray.join('***delimiter***') // combine array elements before doing search and replace
                                .replace(regexprules[i][0], regexprules[i][1])
                                .split('***delimiter***') // revert back to array
                        holder[regexprules[i][2]]=targetarray
                        regexprules.splice(i,1) // remove this rule from regexprules
                }
        }
        for (var i=0; i<feeds.length; i++){ // loop thru feeds, molding each feed entry based on template
                rssoutput+= this.containertag[1] + this.outputtemplate.replace(/({title})|({url})|({label})|({date})|({description})/ig, function(m){
                        if (m == "{title}")
                                return holder.titlefield[i]
                        else if (m == "{url}")
                                return holder.urlfield[i]
                        else if (m == "{label}")
                                return holder.labelfield[i]
                        else if (m == "{date}")
                                return holder.datefield[i]
                        else if (m == "{description}")
                                return holder.descriptionfield[i]
                }) + "</" + this.containertag[0] + ">" + "\n\n"
        }
        rssoutput+=(this.containertag[0]=="li")? "</ul>" : ""
        for (var i=0; i<this.regexprules.length; i++){ // loop thru remaining regexprules array that target the entire feed in general (versus specific field)
                rssoutput=rssoutput.replace(this.regexprules[i][0], this.regexprules[i][1])
        }
        this.feedcontainer.innerHTML=rssoutput
}

---

Really hope you can help me out. This is really a brainbreaker for me.

Thanks, Dan

I'm going to have to have a closer look at this later. But you really don't need to change the script. If all you want is the headline and the full description it would be (addition to your code highlighted):

Code:

---

<script type="text/javascript">
var cssfeed=new gfeedfetcher("feed", "", "") //Specify "Id", "Class", ""
cssfeed.addFeed("Nu.nl", "http://www.nu.nl/rss/Algemeen") //Specify "label"
cssfeed.displayoptions("discription") //show the specified additional fields options: label/date
cssfeed.setentrycontainer("li") //Display each entry as a list (li element) options: div / li
cssfeed.filterfeed(5, "date") //Show 10 entries, sort by date options: title/date
cssfeed.init() //Always call this last
</script>

---

If you're still having problems, a link to your page would probably help clear things up.

Oh, and as I recall, the cssfeed offers little in the way of descriptions, so if that's your test feed, no matter what you do, you will not get all that much description text. You are never going to get more information on any item than what the feed supplies, and although I've never seen it happen, it's possible there might be a limit imposed by the Google API itself. Though I've always seen it give the complete description when asked for it by this script using the syntax I'm suggesting.

Hello John,

Still having problem to get a word wrap in the headlines of the feed.
I have uploaded a feed test, here you can see that i want to cut the characters (word wrap) of the headline so it fits in one line in the feedbox. http://me..........synology.me/feed/feed.html
I only use the headline of the feed, i dont use descriptions or date.
You can download the used files here : http://me..........synology.me/download/feed.zip

I hope i cleared my problem well.

Thanks again.

edit: As you can see i used a css trick (white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ) to get it wrapped, but this is an very ugly way.

Dan

I'm actually a little confused. Your first post asked:

Quote:

---

How can i increase the number of characters in feed description?

---

Now you seem to want no description, and want the title to wrap. The ellipsis text-overflow is IE 7 and less only. So the text looks just cut off in all other browsers. I'm really not sure what you are after. If you just want wrapping, get rid of all of this:

Code:

---

.feed-box{
width: 100%;
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
/* is a option i dont want to use cause it cuts the words ugly at the border of the box without any padding*/
}

---

Then I'd suggest adding display block here:

Code:

---

#feed li span{
color:#AA1802;
font-size:81.3%;
padding-left:1.5%;
font-weight:lighter;       
display: block;
}

---

That should even out the left margin, but then there will be too much space between items. You can fix that by making br display none:

Code:

---

#feed br {
    display: none;
}

---

If that makes things too tight, you can add a little margin-bottom to the #feed li span - say 3px.

Hello John, sorry for the misleading must be in my bad knowledge of the English lanquage.
But is it possible to make the title end like 3 dots, so you can choose how many characters will be displayed? example: "this is the title line and..."

Best regards,

Dan

No problem Dan. I was already thinking there might be a language barrier. But I think I have it now.

OK (working from your zip file), get rid of this (remove from) the feeds.css file:

Code:

---

.feed-box{
width: 100%;
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
/* is a option i dont want to use cause it cuts the words ugly at the border of the box without any padding*/
}

---

On feed.html, add the highlighted as shown:

Code:

---

            <script type="text/javascript">
var cssfeed=new gfeedfetcher("feed", "", "") //Specify "Id", "Class", ""
cssfeed.addFeed("Nu.nl", "http://www.nu.nl/rss/Algemeen") //Specify "label"
cssfeed.displayoptions("title") //show the specified additional fields options: label/date
cssfeed.setentrycontainer("li") //Display each entry as a list (li element) options: div / li
cssfeed.filterfeed(5, "date") //Show 10 entries, sort by date options: title/date
cssfeed.delaydisplay = cssfeed._displayresult;
cssfeed._displayresult = function(){};
cssfeed.onfeedload = function(){
        var feeds = this.feeds, i = feeds.length, allowed = 26, limit = 29, t;
        while(--i > -1){
                t = feeds[i].title;
                if(t.length > limit){
                        feeds[i].title = t.substring(0, allowed) + ' \u2026';
                }
        }
        this.delaydisplay(feeds);
};
cssfeed.init() //Always call this last
</script>

---

See the red 26? That's how many characters will be allowed. The red 29 is the limit for how long a title can be before it gets reduced. If the limit is passed, however many characters you allow will be followed by a space and an ellipsis.

Any questions or problems, just let me know.

NOTE: You're supposed to hotlink to the Google API. I imagine it might be more responsive having a local copy, but if it changes in any important way, you will have to download it again. This has nothing to do with your issue though, and I'm surprised it works (using a local copy of the API), but it does.

Wow John, Great!!! Thanks for your time and afford!!

Best regards,

Dan