Test

a band of headlines

by dirkk0

HTML

<div class="pc_panel" id="pc_panel">
    <div class="pc_label expand"></div>
    <div class="pc_label close"></div>
    <div class="pc_title">More on this topic</div>
    <div id="pc_wrapper">
        <div id="pc_content">
            <div class="pc_item">
                <h2>Annotation Overlay Effect with jQuery</h2>
                <img src="http://dirkk0.kodingen.com/rssreader/random_flickr_image.php" alt=""/ width="100" height="68">
                <p>
                    A slick overlay effect that let's
                    you show notes on a portfolio item
                </p>
                <div class="pc_more">http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/</div>
            </div>
            <div class="pc_item">
                <h2>Annotation Overlay Effect with jQuery</h2>
                <img src="http://dirkk0.kodingen.com/rssreader/random_flickr_image.php" alt=""/ width="100" height="68">
                <p>
                    A slick overlay effect that let's
                    you show notes on a portfolio item
                </p>
                <div class="pc_more">http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/</div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div id="pc_slider" class="pc_slider"></div>
</div>

CSS

.pc_panel{
    position:fixed;
    background:#aaa;
    // background:transparent url(../images/bgSlide.png) repeat top left;
    color:#fff;
    font-size:11px;
    line-height:14px;
    width:100%;
    right:0px;
    // display:none;
    font-family:Arial, Helvetica, sans-serif;
}
.pc_label{
    width:20px;
    height:20px;
    position:absolute;
    top:0px;
    text-align:center;
    letter-spacing:2px;
    text-shadow:0px 0px 1px #fff;
    cursor:pointer;
}

.pc_title{
    width:100%;
    height:20px;
    background:#000;
    font-size:9px;
    text-transform:uppercase;
    line-height:20px;
    text-indent:10px;
    letter-spacing:1px;
}
.pc_panel .selected{
    background:#222;
}
.pc_panel .selected img{
    border:4px solid #010101;
}
.pc_item{
    width:200px;
    height:120px;
    cursor:pointer;
    // overflow:hidden;
    background:#11f;
    float:left;
    margin:5px 10px 10px 10px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -moz-box-shadow:0px 0px 5px #000;
    -webkit-box-shadow:0px 0px 5px #000;
    box-shadow:0px 0px 5px #000;
}
.pc_item h2{
    padding:10px 0px 10px 10px;
    font-size:14px;
    height:32px;
    color:#009ac6;
    line-height:11px;
    clear:both;
}
.pc_item p{
    text-align:justify;
    font-size:10px;
    text-shadow:1px 1px 1px #000;
    padding:0px 10px 5px 10px;
}
.pc_item img{
    width:50px;
    float:left;
    margin:0px 10px 0px 10px;
    border:4px solid #191919;
    -moz-box-shadow:0px 0px 5px #000;
    -webkit-box-shadow:0px 0px 5px #000;
    box-shadow:0px 0px 5px #000;
}
.pc_more{
    display:none;
}
.pc_wrapper{
    overflow:hidden;
    position:relative;
    margin-top:10px;
}
.pc_slider{
    position:absolute;
}
.ui-widget-content {
    background:#000;
}
.ui-state-default, .ui-widget-content .ui-state-default{
    border:none;
    background-color:#aaa;
    outline:none;
    cursor:pointer;
    height:17px;
    width:10px;
    left:0px;
    margin-bottom:-10px;
}
.clear{
    clear:both;
}

JavaScript

$('#pc_wrapper').find('.pc_item').hover(
function(){
    // alert('test');
    $(this).addClass('selected');
},
function(){
    $(this).removeClass('selected');
}
).bind('click',function(){
    window.open($(this).find('.pc_more').html());
});


$("#pc_wrapper").append("<div id='pc_content'><div class='pc_item'><h2>AAA</h2><img src='' width='100' height='68'><p>BBB</p><div class='pc_more'>http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/</div></div>");


function updateTest() {
$("#pc_wrapper").append("<div id='pc_content'><div class='pc_item'><h2>AAA</h2><img src='' width='100' height='68'><p>BBB</p><div class='pc_more'>http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/</div></div>");
}
// window.setInterval(updateTest, 1000);