jQuery: sliding news viewer

by gabrieleromanato

HTML

<div id="news">
    <div id="news-wrapper">
      <div id="news-wrapper-inner">
        <div class="news">
            <h2>News title 1</h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="more"><a href="#">Read More</a></div>
        </div>
        <div class="news">
            <h2>News title 2</h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="more"><a href="#">Read More</a></div>
        </div>
        <div class="news">
            <h2>News title 3</h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="more"><a href="#">Read More</a></div>
        </div>
        <div class="news">
            <h2>News title 4</h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac...

CSS

#news {
    width: 28em;
    margin: 2em auto;
    background: #000;
    color: #fff;
    border: 1px solid #555;
    border-radius: 6px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    font: 80%/1.5 Arial, sans-serif;
}

#news-wrapper {
    overflow: hidden;
    
}

#news-wrapper-inner {
    position: relative;
}

div.news {
    padding: 1em;
    position: relative;
}

div.news h2 {
    font: normal 1.7em Impact, sans-serif;
    text-transform: uppercase;
    border-bottom: 1px solid #444;
    margin: 0;
    letter-spacing: 2px;
    color: #f34545;
    text-shadow: 1px 1px 1px #333;
}

div.news p {
    margin: 0 0 0.5em 0;
}

div.more a {
    display: inline-block;
    background: #f63;
    color: #fff;
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid #a93;
    border-radius: 5px;
    text-shadow: 1px 1px 1px rgba(252, 252, 252, 0.3);
    margin: 0.5em 0;
}

#news-list {
    padding: 1em;
    margin: 0;
    list-style: none;
}

#news-list li {
    display: block;
    margin-bottom: 0.8em;
}

#news-list a {
    display: block;
    background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 0%, #222222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000000 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000000 0%,#222222 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #000000 0%,#222222 100%); /* IE10+ */
background: linear-gradient(to bottom, #000000 0%,#222222 100%); /* W3C */
color: #fff;
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
    border: 1px solid #222;
    border-radius: 5px;
}

JavaScript

var NewsViewer = {
    fn: {
        prepare: function() {

            var $height = $('div.news', '#news-wrapper').eq(0).outerHeight();
            $('#news-wrapper').css('height', $height);
            $('#news-wrapper-inner').css('height', $height * $('div.news', '#news-wrapper').length);
            $('<ul id="news-list"/>').appendTo('#news-nav');
            var $html = '';
            $('div.news', '#news-wrapper').each(function() {
                var $div = $(this),
                    title = $('h2', $div).text();
                $html += '<li><a href="#" data-news="' + $div.index() + '">' + title + '</a></li>';




            });
            $('#news-list').html($html);
        },
        slide: function() {
            $('a', '#news-list').live('click', function(event) {
                event.preventDefault();
                var $a = $(this),
                    $news = $('div.news').eq($a.data('news'));
                $('#news-wrapper-inner').animate({
                    top: -$news.position().top
                }, 800);
            });


        }
    },

    init: function() {
        this.fn.prepare();
        this.fn.slide();
    }
};

$(function() {
    NewsViewer.init();
});