Slider/Rotating Tweets

by ashleycam3ron

HTML

<div id="twitter">    
<div id="tweets" style="left: 0px;">
				
				<div class="tweet">
					RT <a href="https://twitter.com/carldanley" title="Carl Danley" target="_blank" class="CMY_Link CMY_Valid">@carldanley</a>: Just got sponsored by Google to goto <a href="https://twitter.com/search?q=jsconf" target="_blank" class="CMY_Link CMY_Valid">#jsconf</a> !!!! So excited!!!
	  				<span class="timestamp">tweeted <a href="http://www.twitter.com/10up/statuses/325636173051592705" title="Tweeted on 20 April 2013 | 11:44 am EST" class="CMY_Link CMY_Valid">12 hours ago</a></span>
			  	</div>
		  	
				<div class="tweet">
					Check out <a href="https://twitter.com/WordSesh" title="WordSesh" target="_blank" class="CMY_Link CMY_Valid">@WordSesh</a> talks by <a href="https://twitter.com/tweetsfromchris" title="Christopher Cochran" target="_blank" class="CMY_Link CMY_Valid">@tweetsfromchris</a> <a href="https://twitter.com/EricMann" title="Eric Mann" target="_blank" class="CMY_Link CMY_Valid">@EricMann</a> <a href="https://twitter.com/carldanley" title="Carl Danley" target="_blank" class="CMY_Link CMY_Valid">@carldanley</a> &amp; <a href="https://twitter.com/jakemgold" title="Jake Goldman" target="_blank" class="CMY_Link CMY_Valid">@jakemgold</a> - it's like a mini WordCamp! <a href="http://10up.com/blog/2013/04/wordsesh-10up-videos/" target="_blank" class="CMY_Link CMY_Valid">10up.com/blog/2013/04/w…</a>
	  				<span class="timestamp">tweeted <a href="http://www.twitter.com/10up/statuses/325393635438911488" title="Tweeted on 19 April 2013 | 7:41 pm EST" class="CMY_Link CMY_Valid">1 day ago</a></span>
			  	</div>
		  	
				<div class="tweet">
					Inspiring takeaways from <a href="https://twitter.com/search?q=team10up" target="_blank" class="CMY_Link CMY_Valid">#team10up</a> summit by <a href="https://twitter.com/jakemgold" title="Jake Goldman" target="_blank" class="CMY_Link CMY_Valid">@jakemgold</a> <a href="https://twitter.com/HouseofGrays" title="Megan Gray"...

CSS

#twitter {
    padding:10px 0;
    color:#888;
    margin-top:10px;
    width: 190px;
    /*width:100%;*/
    overflow:hidden;
    position:relative;
}
#twitter .handle {
    margin:0 20px 0 10px;
    font-size:20px;
    display:block;
    position:relative;
    text-indent:40px;
    height:29px;
    background:transparent url(images/twitter-at.png) 2px 2px no-repeat;
    color:#888;
    text-decoration:none;
    line-height:29px;
}
#twitter small, #twitter .handle em {
    font-size:.6em;
    letter-spacing:normal;
}
#twitter .small-handle {
    clear: both;
    display: block;
    margin: 7px 20px 7px 15px;
    font-size: 13px;
    color: #888;
    text-decoration: none;
}
#twitter .small-handle small {
    font-size: .8em;
    color: #666;
}
#twitter .handle:hover, #twitter .small-handle:hover, #twitter .small-handle:hover small {
    color:#fff;
}
#tweets {
    font-size:11px;
    line-height:1.5em;
    color:#666;
    width:1100px;
    position:relative;
}
#tweets a {
    color:#8c8989;
    text-decoration:none;
}
#tweets a:hover {
    text-decoration:underline;
}
#tweets div {
    padding: 8px 15px 6px 15px;
    width: 160px;
    float: left;
    word-wrap: break-word;
}
#tweets span {
    display:block;
    font-size:11px;
    margin-top:.3em;
}
#tweet-slider, #slidebuttons {
    float:right;
    margin-right:20px;
    height:19px;
    opacity:.4;
    transition:opacity .3s;
    -moz-transition:opacity .3s;
    -webkit-transition:opacity .3s;
    -o-transition:opacity .3s;
    -ms-transition:opacity .3s;
}
#tweet-slider {
    height: 22px;
}
#twitter:hover #tweet-slider, #homeslides:hover #slidebuttons {
    opacity:1;
}
#tweet-slider span, #slidebuttons span {
    font-family:sans-serif;
    font-size:35px;
    float:left;
    margin-left:3px;
    overflow:hidden;
    cursor:pointer;
    line-height:18px;
    color:#707070;
    transition:color .4s;
    -moz-transition:color .4s;
    -webkit-transition:color .4s;
    -o-transition:color .4s;
   ...

JavaScript

var tweets, tweet_slider, scrollTimer;

function click_a_tweet(eventObject) {
    var $button = eventObject.target;
    if ($button.nodeName === 'SPAN') {
        clearInterval(scrollTimer);
        if ($button.className.indexOf('current') < 0) scrollTweet($button);
    }
}

function nextTweet() {
    var nextCurrent = tweet_slider.querySelector('.current').nextSibling;
    if (nextCurrent === null) nextCurrent = tweet_slider.firstChild;
    scrollTweet(nextCurrent);
}

function scrollTweet(thetweet) {
    var buttons = jQuery(tweet_slider).children();
    var num = buttons.index(thetweet);
    var pos = num * -190;
    buttons.removeClass();
    buttons[num].className = 'current';
    jQuery(tweets).stop().animate({
        left: pos
    }, 1000);
}
jQuery(document).ready(function () {
    tweets = document.getElementById('tweets');
    if (tweets.querySelectorAll('.tweet').length > 1) {
        jQuery(tweets).after('<div id="tweet-slider"><span class="current">&bull;</span><span>&bull;</span><span>&bull;</span><span>&bull;</span><span>&bull;</span></div>');
        tweet_slider = document.getElementById('tweet-slider');
        scrollTimer = setInterval('nextTweet()', 5000);
        jQuery(tweet_slider).on('click', click_a_tweet);
    }
});