CivicIdeas: Animated, AJAX feed

Fork of User profile page. Animating the Happenings sidebar widget for added interaction.

by Pete Fecteau

HTML

<script src="http://buttonpresser.com/CivicIdeas_BS/js/jcarousellite.js"></script>
<div class="standard-nav alone navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse" id="main-menu">
                <ul class="nav" id="main-menu-left">
                    <li class="nav-home active"><a href="#">Home</a></li>
                    <li class="nav-ideas"><a href="#">Ideas</a></li>
                    <li class="nav-projects"><a href="#">Projects</a></li>
                    <li class="nav-discussions"><a href="#">Discussions</a></li>
                    <li class="nav-forums"><a href="#">Forums</a></li>
                    <li class="nav-meetings"><a href="#">Meetings</a></li>
                    <li class="nav-surveys"><a href="#">Surveys</a></li>
                </ul>
                <ul class="nav pull-right" id="main-menu-right">
                    <li class="language">
                        <div id="google_translate_element"></div>
                    </li>
                    <li>
                        <form class="navbar-search pull-left">
                            <input type="text" class="search-query" placeholder="Search" />
                        </form>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Ron Swanson <span class="caret"></span></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a href="../default">Log Out</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="open-my-profile">Edit Profile</a></li>
                        <li><a href="#">My Ideas</a></li>
                        <li><a href="#">My Connections</a></li>
                        <li><a href="#">My Apps</a></li>
                      </ul>
                    </li>
                </ul>
...

CSS

@import url('https://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap-custom.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-nav.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-sidebar.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-footer.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-profile.css');
body {background:#DEDFE0;}
.sidebar-item div.pull-right a {
    line-height: 16px;
    font-size:12px;
    color: #76777a;
    font-weight: 300;
}
.smart-feed {
    height:185px;
    overflow-x:hidden;
    overflow-y:scroll;
}
.smart-feed ul {list-style:none;margin:0;padding:0;position:relative;top:0;}
.smart-feed ul li {line-height:120%;margin:10px 0;}
.smart-feed ul li:first-child {margin-top:0;}
.smart-feed-controls {
    width:190px;
    height:20px;
}
.smart-feed-stop {
    height:8px;
    width:8px;
    margin-top:10px;
    background-color:#a9aaad;
    float:right;
    cursor:pointer;
}
.smart-feed-play {
    position:relative;
    top:8px;
    left:6px;
    content:"";
    height:0;
    width:0;
    border:6px solid transparent;
    border-left-color:#a9aaad;
    float:right;
    cursor:pointer;
}
.smart-feed-stop:hover {background-color:#76777a}
.smart-feed-play:hover {border-left-color:#76777a}
.smart-feed ul li.shrink

JavaScript

// Fake Activity Feed
var feed = $('.smart-feed');
var feedStop = $('.smart-feed-controls .smart-feed-stop');
var feedRefresh = setInterval(runFeed, 6000);
function runFeed() {
  var feedList = $('.smart-feed ul');
  var feedListItem = $('.smart-feed ul li');
  var feedListLastItem = feedListItem[feedListItem.length-1];
  var lastItemHeight = (-Math.abs($(feedListLastItem).height())-10);
  $(feedListLastItem).addClass("shrink");
  $(feedList).prepend(feedListLastItem);
  $('.shrink').css('marginTop', lastItemHeight);
  $('.shrink').animate({
    marginTop: 0,
    marginBottom: 10
  }, 1000, function() {
      $('.shrink').removeClass('shrink');
  });
}
// EXTERNAL STOP BUTTON swap for PLAY
$('.smart-feed-stop').on('click', function() {
    clearInterval(feedRefresh);
    $(this).hide();
    $('.smart-feed-play').show();
});
// EXTERNAL PLAY BUTTON swap for STOP
$('.smart-feed-play').on('click', function() {
    setInterval(runFeed, 6000);
    $(this).hide();
    $('.smart-feed-stop').show();
});