JSFiddle - React, Tailwind, and code Playground
HTML
<div id="feedResult">
<li>Search Results will be inserted here ...</li>
</div>
JavaScript
(function($){
$.fn.extend({
//plugin name - scrollMe
jsfeed: function(options) {
var defaults = {
feedUrl: 'http://pipes.yahoo.com/pipes/pipe.run?_id=f299328bcad0cff9273fa35bb5d975c5&_render=json', // the url to the feed you need to pul in
axis: 'vertical', // the axis horizontal or vertical
scrollWidth: 300, // the scroll width
scrollHeight: 100, // the scroll height
speed: "slow", // scroll speed
items_per_page: 2, // number off items per page
navClass: "MFSN",
scrollId: "feedResult"
};
var options = $.extend(defaults, options);
function getFeed(){
$.getJSON(options.feedUrl+'&callback=?', function(json) {
console.log(json);
console.log("items"+options.items_per_page);
console.log("json"+json.feed.entry.length);
var max_length = json.feed.entry.length;
var max_elem = max_length / options.items_per_page - 1;
var page_count = max_length / options.items_per_page;
console.log('max pages'+max_elem);
var height = options.scrollHeight * options.items_per_page;
console.log('height'+height);
var html = '';
$.each(json.feed.entry, function(i, blogger) {
console.log(blogger);
// strip blogger tags
var content = strip_tags(blogger.content.$t).substr(0,80);
html += '<li...