Vertical News Scroller

Description

testing the exercpt

This code will create a vertacle news scroller that is generated with post. in order for this scroller to work a plugin must be included in the header called jCarouselLite. Also in order to generate your own post using this code you must identify which category you would like displayed. In this case the category is 3 so just replace the number 3 with the category of your choice

HTML Source Code

                        
                          <!--News Scroller Starts-->
<div id="newsticker-demo"> 
	
    <div class="newsticker-jcarousellite">
		<ul>


<!-- Post Starts -->    
<?php
query_posts('cat=3&posts_per_page=6&orderby=date&order=dsc'); // query to show all posts independent from what is in the center;
if (have_posts()) :
   while (have_posts()) :the_post(); ?>
<!--Post Details Start-->   
            <li>
				<div class="newsticker-left">
					left
				</div>
				
				<div class="newsticker-right">
					right
				</div>
				<div class="clear"></div>
			</li>
<!--Post Details End-->       
   

<?php  endwhile;
endif;
wp_reset_query();
?>

<!-- Post Ends -->		

        </ul>
    </div>
    
</div>
<!--News Scroller Ends-->

CSS Source Code

                        
                          /****News Ticker Start****/	

* { margin:0; padding:0; }

#newsticker-demo {
    border: 1px solid;
    float: left;
    font-family: calibri;
    font-size: 12px;
    margin-right: 20px;
}


#newsticker-demo a {
    color: #8BDB86;
    font-size: 16px;
    text-decoration: none;
}

#newsticker-demo img {
    height: auto;
    max-height: 70px;
    max-width: 70px;
    width: auto;
}

#newsticker-demo .title {
    border-bottom: 1px dashed #6A6A6A;
    color: #B24529;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 5px 5px 0;
    text-align: left;
    text-transform: uppercase;
}

#newsticker-demo, .newsticker-jcarousellite { 
width:470px;
}

.newsticker-jcarousellite li{}

.newsticker-jcarousellite ul li {
    border-bottom: 2px dotted #594F4F;
    color: #FFFFFF;
    display: table;
    font-size: 14px;
    list-style: none outside none;
    padding-bottom: 10px;
    padding-top: 10px;
}

.newsticker-jcarousellite ul li:hover {
background: #494141;
}

.newsticker-left {
    background: none repeat scroll 0 0 #000000;
    border-radius: 1px 1px 1px 1px;
    float: left;
    height: 70px;
    width: 70px;
}

.newsticker-right {
    background: none repeat scroll 0 0 yellow;
    float: left;
    margin-left: 20px;
    margin-top: 7px;
    width: 377px;
}

.newsticker-right span.cat {
    color: #808080;
    display: block;
    font-size: 12px;
}

.clear { clear: both; }

       
	/****News Ticker End****/

JavaScript Code

                        
                          <script type="text/javascript">
$(function() {
	$(".newsticker-jcarousellite").jCarouselLite({
		vertical: true,
		hoverPause:true,
		visible: 3,
		auto:5000,
		speed:1200
	});
});
</script>


Post Categories

Tags