Finally, after a lot of your requests I added this tutorial which explains how to implement a News Ticker, with news vertical scrolling, using mootools. It's very simple and quick to implement in your web projects. I took inspiration from Newsvine Live panel for the CSS style and the result is something like this:
I want to say thanks to Capitol Media (a Seattle website design and online marketing company) which provided the original JavaScript function I used with mootols for this News Ticker.
Download source code
Live PreviewStep 1: Introduction to News Ticker
This is the structure I used for this News Ticker:
...each news is contained into a <li> element and <ul> list is contained into the layer #NewsVertical with overflow property set to hidden and position set to relative. Take a look at the Step 3 for CSS code.
Step 2: HTML Code
First of all add a link to mootools framework in the <head> tag of your page:
<script language="javascript" src="mootools/mootools.svn.js" type="text/javascript"></script>
... and add this code into the tag <body>:
<div id="NewsTicker">
<h1>What's news?</h1>
<div id="NewsVertical">
<ul id="TickerVertical">
<!-- Each News into a LI element
Use PHP or another language
to get dinamically your news. -->
<li>
<img src="img/img1.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="link.html">News Title</a>
</span>
Some text here, it's your news summary...
<span class="NewsFooter"><strong>Published July 25</strong> - 324 comments</span>
</li>
<!-- If you can't use a server side
language to get your news add
manually your news into LI element
-->
</ul>
</div>
</div>
<h1>What's news?</h1>
<div id="NewsVertical">
<ul id="TickerVertical">
<!-- Each News into a LI element
Use PHP or another language
to get dinamically your news. -->
<li>
<img src="img/img1.png" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="link.html">News Title</a>
</span>
Some text here, it's your news summary...
<span class="NewsFooter"><strong>Published July 25</strong> - 324 comments</span>
</li>
<!-- If you can't use a server side
language to get your news add
manually your news into LI element
-->
</ul>
</div>
</div>
How you can see, in the code above I just added the main HTML elements. You can add your news manually adding <li> elements to the previous code or, if you use PHP (or another server side language such as ASP, Coldfusion, Js...) you can get your news dinamically from a database table. For example, image to have a table NEWS which contains data you want to add to your news ticker; the first thing to do is get these data using a query like this:
<?php
$getNews_sql = 'SELECT * FROM NEWS';
$getNews = mysql_query($getNews_sql);
?>
$getNews_sql = 'SELECT * FROM NEWS';
$getNews = mysql_query($getNews_sql);
?>
...then using a while statement to add news to the news ticker. PHP code can be something like this:
<?php while ($row = mysql_fetch_array($getNews)) {?>
<li>
<img src="<?php echo $row['img_link']; ?>" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="<?php echo $row['news_link']; ?>">
<?php echo $row['news_title']; ?>
</a>
</span>
<?php echo $row['news_summary']; ?>
<span class="NewsFooter">
<strong>Published <?php echo $row['news_date']; ?></strong> -
<?php echo $row['news_tot_comments']; ?> comments
</span>
</li>
<?php } ?>
<li>
<img src="<?php echo $row['img_link']; ?>" border="0" class="NewsImg"/>
<span class="NewsTitle">
<a href="<?php echo $row['news_link']; ?>">
<?php echo $row['news_title']; ?>
</a>
</span>
<?php echo $row['news_summary']; ?>
<span class="NewsFooter">
<strong>Published <?php echo $row['news_date']; ?></strong> -
<?php echo $row['news_tot_comments']; ?> comments
</span>
</li>
<?php } ?>
...naturally this is only a basic example you have to modify to work on your site (for example limiting the number of news you want to display).
Step 3: CSS Code
Now take a look at the CSS code I used to simulate a Newswine LIVE panel:
#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:344px;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width:300px;
height:300px;
display:block;
overflow:hidden;
position:relative;
}
/* --------------- */
/* Ticker Vertical */
#TickerVertical {
width:300px;
height:300px;
display:block;
list-style:none;
margin:0;
padding:0;
}
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:344px;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width:300px;
height:300px;
display:block;
overflow:hidden;
position:relative;
}
/* --------------- */
/* Ticker Vertical */
#TickerVertical {
width:300px;
height:300px;
display:block;
list-style:none;
margin:0;
padding:0;
}
#TickerVertical li {
display:block;
width:288px;
color:#333333;
text-align:left;
font-size:11px;
margin:0;
padding:6px;
float:left;
}
#TickerVertical li .NewsTitle{
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display:block;
color:#000000;
font-size:10px;
margin:6px 0 14px 0;
}
display:block;
width:288px;
color:#333333;
text-align:left;
font-size:11px;
margin:0;
padding:6px;
float:left;
}
#TickerVertical li .NewsTitle{
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display:block;
color:#000000;
font-size:10px;
margin:6px 0 14px 0;
}
CSS code is very simple and you can modify it without problems to adapt to your site style.
Step 4: Javascript function to enable vertical scroller
Last step is adding this JavaScript function to enable vertical scroller provided from Capitol Media. I didn't add the code in this page but you can find it downloading the source code of this tutorial.
You have just to copy and paste JavaScript code without changing nothing. If you want, you can set the speed and delay (in milliseconds) for news transition.
It's all! Now use the following links to download the source code which you can use in your project customizing CSS style and contents or to see how it works:
Download source code Live Preview
No comments:
Post a Comment