Vertical News Scroller [Tutorial]

Apr 11, 2012 by Team Dzyngiri    11 Comments    Posted under: Freebies, HTML/CSS, jQuery, Plugins, Tutorials

Hello all our Designer folks!

This tutorial is all about my favourite combination of HTML+CSS+JavaScript. Using this combo we gonna create a really beautiful and elegant Vertical News Scroller. So, I will come to the point directly. First of all we will write CSS (yeah, lets give a nice look to our demo!)

I will not write a complete css here. Will just highlight the important lines of codes which gives a elegant touch to our news carousel. First lets write some general css code

style.css

/*-----------------------------------------------------------------------------------*/
/*	2.	GENERAL
/*-----------------------------------------------------------------------------------*/
body {
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;
	background: transparent url(https://www.dzyngiri.com/files/style/images/light-bg.gif) repeat;
	color: #565656;
	font-size: 11px;
	overflow-y: scroll;
	overflow-x: hidden;
}
html, body {
	height: 100%;
}
p {
	line-height: 20px;
	margin-bottom: 20px;
}
a {
	text-decoration: none;
	color: #1f1f1f;
}
a:hover {
	text-decoration: none;
	color: #5d8ba6;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Puritan20Normal';
	font-weight: normal;
	color: #1f1f1f;
	margin-bottom: 10px;
}
h4 {
	font-size: 17px;
	margin-bottom: 20px;
}
img.left {
	top: 0px;
	float:left;
	display: block;
	margin:0;
	padding:0;
	margin-right:20px;
}
#wrapper {
	width: 960px;
	margin: 100px auto 0;
	padding-top: 0;
	line-height: 20px;
}

Now lets concentrate on carousel. These lines will create container for our news ticker and styling. (Let me tell you, I just love box shadow effect, so i will add it)

/*-----------------------------------------------------------------------------------*/
/*	3. CAROUSEL
/*-----------------------------------------------------------------------------------*/
.jcarousel-container {
	float:left;
	display: block;
	position: relative;
	margin:0;
	padding:0;
}
.jcarousel-container-vertical {
	width:  962px;
	height: 535px;
}
.jcarousel-clip-vertical {
	height: 535px;
}
.jcarousel-item {
	height: 60px;
	overflow: hidden;
	position: relative;
	display: block;
	z-index: 1;
}
#newslist ul li {
	width:  928px;
	background: none;
	margin: 2px 0 18px 2px;
	background-color: #FFF;
	-webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;
	-moz-box-shadow: 0px 1px 2px 0px #b7b7b7;
	box-shadow: 0px 1px 2px 0px #b7b7b7;
	padding: 15px;
	display: block;
	overflow: hidden;
}
#newslist p {
	margin: 0;
}
#newslist h4 {
	margin-bottom: 8px;
	line-height: 1;
}
#newslist h4 span {
	font-style: italic;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #565656;
	padding-left: 5px;
}
#news h2 {
	float: left;
	margin-top: 10px;
}
#scroll {
	overflow: hidden;
	width: 92px;
	height: 25px;
	margin: 20px auto;
	padding: 2px;
}
#newslist-next {
	cursor: pointer;
	top:0px;
}
#newslist-prev {
	cursor: pointer;
	outline: 0;
}
a.jbutton, a.jbutton:link, a.jbutton:visited {
	display: block;
	padding: 0;
	height: 25px;
	width: 40px;
	background: transparent url(https://www.dzyngiri.com/files/style/images/light-arrow.jpg) no-repeat;
	-webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;
	-moz-box-shadow: 0px 1px 2px 0px #b7b7b7;
	box-shadow: 0px 1px 2px 0px #b7b7b7;
	text-indent: -99999px;
}
a#newslist-prev.jbutton, a#prev.jbutton {
	background-position: top left;
	float: left;
	height: 25px;
	width: 40px;
	margin-right: 12px;
}
a#newslist-next.jbutton, a#next.jbutton {
	background-position: top right;
	float: right;
	height: 25px;
	width: 40px;
}
a#newslist-prev.jbutton:hover {
	background-position: left -25px;
	text-decoration: none;
}
a#newslist-next.jbutton:hover {
	background-position: right -25px;
	text-decoration: none;
}

So we are done with the css, now lets move to JavaScript. For some good effects we are using two JavaScript library which are included in demo download. We use the initCallback callback to assign functionality to the controls.

newscarousel.js

function mycarousel_initCallback(carousel) {
jQuery('#newslist-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#newslist-prev').bind('click', function() {
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function() {
jQuery("#newslist").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null,
vertical: true,
itemLastOutCallback: {
onAfterAnimation: disableCustomButtons
},
itemLastInCallback: {
onAfterAnimation: disableCustomButtons
}
});
});
function disableCustomButtons(carousel){
var prev_class = 'jcarousel-prev-disabled jcarousel-prev-disabled-vertical';
if (carousel.first == 1) {
$('#newslist-prev').attr('disabled', 'true').addClass(prev_class);
} else {
$('#newslist-prev').removeAttr('disabled').removeClass(prev_class);
}
var next_class = 'jcarousel-next-disabled jcarousel-next-disabled-vertical';
if (carousel.last == carousel.size()) {
$('#newslist-next').attr('disabled', 'true').addClass(next_class);
} else {
$('#newslist-next').removeAttr('disabled').removeClass(next_class);
}
};

Now its time for html… First lets link our JavaScript and CSS files to our html code intag

index.html

Vertical News Carousel
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="style/css/ie7.css" media="all" />
<![endif]-->
<script type="text/javascript" src="style/js/jquery-1.5.min.js"></script><script type="text/javascript" src="style/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="style/js/newscarousel.js"></script>

And now our main body code which will create an html structure in which our N no of news heading will be included in list style

<!-- Begin Wrapper --></pre>
<div id="wrapper">
<div id="news">
 <!-- Begin News Navigation -->
<div id="newslist">
<ul>
<ul>
	<li><a href="#"><img class="left" src="style/images/img.jpg" alt="" /></a>
<h4 class="title"><a href="#">1 - I love Lorem Ipsum</a></h4>
Lorem Ipsum is a dummy text used by designers from all over the world. While writing Lorem ipsum you dont need worry grammar about and splleing mistkae. You get complete freedome of writing anything you want. I love Lorem Ipsum so much. <a class="more" href="#">Continue Reading »</a></li>
</ul>
</ul>
<ul>
<ul>
	<li><a href="#"><img class="left" src="style/images/img.jpg" alt="" /></a>
<h4 class="title"><a href="#">2 - I love Lorem Ipsum</a></h4>
Lorem Ipsum is a dummy text used by designers from all over the world. While writing Lorem ipsum you dont need worry grammar about and splleing mistkae. You get complete freedome of writing anything you want. I love Lorem Ipsum so much. <a class="more" href="#">Continue Reading »</a></li>
</ul>
</ul>
</div>
<div class="clearfix"></div>
<div id="scroll"></div>
<div class="clearfix"></div>
I know you like this demo. Now c'mon, you can go back to <a href="#">Dzyngiri</a> to <a href="#">Download it !</a> and Comment  </div>
 <!-- End News Navigation --></div>
<div class="clearfix"></div>
<pre>
<!-- End Wrapper -->

Woo hooo… We are done !

You can have a look at what exactly we have created in demo. Download it from below. I hope you like this tutorial, but still if you have a query or feedback then comment below (you can say “Good job” too )

Team Dzyngiri

A professional and beautiful website design is the result of creative talent and technical expertise, and Dzyngiri is the source for the same!

More Posts – Website

Follow Me:

Got anything to say? Go ahead and leave a comment!