I have a section in the website where I need to show facebook feed.
I have two buttons as you can see in the picture. With the buttons I need to 'scroll' between the news feed.
I should do this with javascript or jquery, but I'm very new to these programming languages.
.content .tab-pane > #facebook_ticker > li{
max-height: 165px;
min-height:165px;
}
.content .second-row .tab-content .ticker-controls,
.single .content .tab-content .ticker-controls{
background:rgba(0,0,0,.7);
height: 35px;
padding: 5px 20px;
margin-top: -10px;
font-family: 'TGLTCER';
font-size: 1.2em;
}<div class="hidden-xs">
<h1 id="tgb_head"><span id="facebook_icon" class="social-content-icon"></span> Facebook</h1>
<div class="tab-content">
<div class="tab-pane active fade in">
<ul class="list-unstyled" id="facebook_ticker">
<?php echo do_shortcode("[custom-facebook-feed]"); ?>
</ul>
</div>
<div id="facebook_ticker_controls" class="ticker-controls">
<a href="#" class="prev pull-left test" id="fprev"><span class="glyphicon glyphicon-chevron-down"></span> Previous</a>
<a href="#" class="next pull-right test" id="fnext">Next <span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
</div><!-- end tab-content -->
</div><!-- end facebook -->
<!-- The ?php echo do_shortcode("[custom-facebook-feed]"); ? generates the following code-->
<div class="cff-wrapper">
<div id="cff" data-char="400" class="cff-width-resp cff-default-styles" style="padding:5%; ">
<div class="cff-item cff-link-item author-princeton-partners-inc-" id="cff_92134012073_10155928811127074" style="border-bottom: 1px solid #ddd; "><div class="cff-author"><a href="https://facebook.com/92134012073" target="_blank" rel="nofollow" title="Princeton Partners, Inc. on Facebook"><div class="cff-author-text"><p class="cff-page-name cff-author-date">Princeton Partners, Inc.</p><p class="cff-date"> 3 days ago </p></div><div class="cff-author-img"><img src="https://graph.facebook.com/92134012073/picture?type=square" title="Princeton Partners, Inc." alt="Princeton Partners, Inc." width="40" height="40"></div></a></div><p class="cff-post-text"><span class="cff-text" data-color="">At PPI, we love all things spooky. Check out our website to find our special Halloween video reel and a kit to throw your own Gargoyle-style X-Files party. Have a ghoulish day! </span><span class="cff-expand">... <a href="#" style="color: #"><span class="cff-more">See More</span><span class="cff-less">See Less</span></a></span></p><div class="cff-shared-link" style="border: 1px solid #; "><div class="cff-text-link cff-no-image"><p class="cff-link-title"><a href="" target="_blank" rel="nofollow" style="color:#;">Check out this link</a></p><p class="cff-link-caption" style="color:#;"><a class="vglnk" href="" rel="nofollow"><span>princetonpartners</span><span>.</span><span>com</span></a></p><p class="cff-post-desc" style="font-size:12px; "><span> </span></p></div></div><div class="cff-post-links"><a class="cff-viewpost-facebook" href="" title="View on Facebook" target="_blank" rel="nofollow">View on Facebook</a><div class="cff-share-container"><span class="cff-dot">·</span><a class="cff-share-link" href="javascript:void(0);" title="Share">Share</a><p class="cff-share-tooltip"><a href="" target="_blank" class="cff-facebook-icon"><i class="fa fa-facebook-square"></i></a><a href="" target="_blank" class="cff-twitter-icon"><i class="fa fa-twitter"></i></a><a href="" target="_blank" class="cff-google-icon"><i class="fa fa-google-plus"></i></a><a href="" target="_blank" class="cff-linkedin-icon"><i class="fa fa-linkedin"></i></a><a href="" target="_blank" class="cff-email-icon"><i class="fa fa-envelope"></i></a><i class="fa fa-play fa-rotate-90"></i></p></div></div></div>
</div>I have tried something like this:
<script>
$('#facebook_ticker_controls a.prev').click(function() {
$.scrollTo($(this).closest('cff-item').prev(),800);
});
$('#facebook_ticker_controls a.next').click(function() {
$.scrollTo($(this).closest('cff-item').next(),800);
});
</script>
but it does nothing.Can you please give me a hint what to try in order to resolve this problem? Thanks
