i want display custom rss feed horizontal list. using responsive template , embedding feeds template. believe javascript not separating each rss post separate list item thought would.
(function($) { "use strict"; var rss = function(target, url, options, callback) { this.target = target this.url = url this.html = [] this.effectqueue = [] this.options = $.extend({ ssl: false, limit: null, key: null, layouttemplate: '<ul style="display:inline-block;">{entries}</ul>', entrytemplate: '<li><a href="{url}"><div class="title">{title}</div></a><br /><author>{author}</author><img src="{teaserimageurl}"></img><date>{date}</date><br />{shortbodyplain}</li>', tokens: { }, outputmode: 'json', dateformat: 'mmm do, yyyy', effect: 'show', offsetstart: false, offsetend: false, error: function() { console.log("jquery rss: url doesn't link rss-feed"); }, ondata: function(){}, success: function(){} }, options || {}) this.callback = callback || this.options.success } rss.htmltags = ["doctype", "html", "head", "title", "base", "link", "meta", "style", "script", "noscript", "body", "article", "nav", "aside", "section", "header", "footer", "h1-h6", "hgroup", "address", "p", "hr", "pre", "blockquote", "ol", "ul", "li", "dl", "dt", "dd", "figure", "figcaption", "div", "table", "caption", "thead", "tbody", "tfoot", "tr", "th", "td", "col", "colgroup", "form", "fieldset", "legend", "label", "input", "button", "select", "datalist", "optgroup", "option", "textarea", "keygen", "output", "progress", "meter", "details", "summary", "command", "menu", "del", "ins", "img", "iframe", "embed", "object", "param", "video", "audio", "source", "canvas", "track", "map", "area", "a", "em", "strong", "i", "b", "u", "s", "small", "abbr", "q", "cite", "dfn", "sub", "sup", "time", "code", "kbd", "samp", "var", "mark", "bdi", "bdo", "ruby", "rt", "rp", "span", "br", "wbr"] rss.prototype.load = function(callback) { var apiprotocol = "http" + (this.options.ssl ? "s" : "") , apihost = apiprotocol + "://ajax.googleapis.com/ajax/services/feed/load" , apiurl = apihost + "?v=1.0&output=" + this.options.outputmode + "&callback=?&q=" + encodeuricomponent(this.url) // set limit offsetend if offset has been set if(this.options.offsetstart && this.options.offsetend) this.options.limit = this.options.offsetend; if (this.options.limit != null) apiurl += "&num=" + this.options.limit; if (this.options.key != null) apiurl += "&key=" + this.options.key; $.getjson(apiurl, callback) } rss.prototype.render = function() { var self = this.load(function(data) { try { self.feed = data.responsedata.feed self.entries = data.responsedata.feed.entries } catch(e) { self.entries = [] self.feed = null return self.options.error.call(self) } var html = self.generatehtmlforentries() self.target.append(html.layout) if (html.entries.length !== 0) { $.isfunction(self.options.ondata) && self.options.ondata.call(self); self.appendentriesandapplyeffects($("entries", html.layout), html.entries); } if (self.effectqueue.length > 0) { self.executeeffectqueue(self.callback) } else { $.isfunction(self.callback) && self.callback.call(self); } }) } rss.prototype.appendentriesandapplyeffects = function(target, entries) { var self = $.each(entries, function(idx, entry) { var $html = self.wrapcontent(entry) if(self.options.effect === 'show') { target.before($html) } else { $html.css({ display: 'none' }) target.before($html) self.applyeffect($html, self.options.effect) } }) target.remove() } rss.prototype.generatehtmlforentries = function() { var self = , result = { entries: [], layout: null } $(this.entries).each(function() { var entry = this, offsetstart = self.options.offsetstart, offsetend = self.options.offsetend; // offset required if(offsetstart && offsetend) { if(index >= offsetstart && index <= offsetend) { if(self.isrelevant(entry, result.entries)) { var evaluatedstring = self.evaluatestringforentry(self.options.entrytemplate, entry) result.entries.push(evaluatedstring) } } }else{ // no offset if(self.isrelevant(entry, result.entries)) { var evaluatedstring = self.evaluatestringforentry(self.options.entrytemplate, entry) result.entries.push(evaluatedstring) } } }) if(!!this.options.entrytemplate) { // have entrytemplate result.layout = this.wrapcontent(this.options.layouttemplate.replace("{entries}", "<entries></entries>")) } else { // no entrytemplate available result.layout = this.wrapcontent("<div><entries></entries></div>") } return result } rss.prototype.wrapcontent = function(content) { if($.trim(content).indexof('<') !== 0) { // content has no html => create surrounding div return $("<div>" + content + "</div>") } else { // content has html => don't touch return $(content) } } rss.prototype.applyeffect = function($element, effect, callback) { var self = switch(effect) { case 'slide': $element.slidedown('slow', callback) break case 'slidefast': $element.slidedown(callback) break case 'slidesynced': self.effectqueue.push({ element: $element, effect: 'slide' }) break case 'slidefastsynced': self.effectqueue.push({ element: $element, effect: 'slidefast' }) break } } rss.prototype.executeeffectqueue = function(callback) { var self = this.effectqueue.reverse() var executeeffectqueueitem = function() { var item = self.effectqueue.pop() if(item) { self.applyeffect(item.element, item.effect, executeeffectqueueitem) } else { callback && callback() } } executeeffectqueueitem() } rss.prototype.evaluatestringforentry = function(string, entry) { var result = string , self = $(string.match(/(\{.*?\})/g)).each(function() { var token = this.tostring() result = result.replace(token, self.getvaluefortoken(token, entry)) }) return result } rss.prototype.isrelevant = function(entry, entries) { var tokenmap = this.gettokenmap(entry) if(this.options.filter) { if(this.options.filterlimit && (this.options.filterlimit == entries.length)) { return false } else { return this.options.filter(entry, tokenmap) } } else { return true } } rss.prototype.gettokenmap = function(entry) { if (!this.feedtokens) { var feed = json.parse(json.stringify(this.feed)) delete feed.entries this.feedtokens = feed } return $.extend({ feed: this.feedtokens, url: entry.link, author: entry.author, date: moment(entry.publisheddate).format(this.options.dateformat), title: entry.title, body: entry.content, shortbody: entry.contentsnippet, bodyplain: (function(entry) { var result = entry.content .replace(/<script[\\r\\\s\s]*<\/script>/mgi, '') .replace(/<\/?[^>]+>/gi, '') for(var = 0; < rss.htmltags.length; i++) { result = result.replace(new regexp('<' + rss.htmltags[i], 'gi'), '') } return result })(entry), shortbodyplain: entry.contentsnippet.replace(/<\/?[^>]+>/gi, ''), //shortbodyplain: entry.contentsnippet.replace("-- delivered feed43 service", ""), shortbodyplain: entry.contentsnippet.replace("369gopee", "<author>").replace("321gopee", "</author><br />"), index: $.inarray(entry, this.entries), totalentries: this.entries.length, teaserimage: (function(entry){ try { return entry.content.match(/(<img.*?>)/gi)[0] } catch(e) { return "" } })(entry), teaserimageurl: (function(entry) { try { return entry.content.match(/(<img.*?>)/gi)[0].match(/src="(.*?)"/)[1] } catch(e) { return "" } })(entry) }, this.options.tokens) } rss.prototype.getvaluefortoken = function(_token, entry) { var tokenmap = this.gettokenmap(entry) , token = _token.replace(/[\{\}]/g, '') , result = tokenmap[token] if(typeof result != 'undefined') return ((typeof result == 'function') ? result(entry, tokenmap) : result) else throw new error('unknown token: ' + _token) } $.fn.rss = function(url, options, callback) { new rss(this, url, options, callback).render() return this; //implement chaining } })(jquery) when view page source, there not dynamically created html. how display these list items inline?
the feeds appear in html follows:
<script> jquery(function($) { $("#rss-feeds").rss("http://www.feed43.com/channelfireball.xml", { limit: 15 }) </script> <div style="border:none;width:100%;height:auto;overflow-y:scroll; overflow-x:scroll;"> <div class="span2 item"> <div class="item-wrap"> <div class="post_results" id="rss-feeds"></div> </div> </div> </div>
