Several community managers have contacted me and asked for a simple news ticker to add to their community. So....This is a tip for anyone who would like to add a simple and easy to manage news ticker to their Ning Community. It is easy to manage because all you have to do to change out the messages are alter 4 lines of code in the HTML What we are building looks like this but is 100% customizable:
Add the following HTML inside a HTML module on your site's backend (change the wording on each <li> line with your own):
<div class="news-ticker" data-speed="5000">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1</li>
<li>Sed eget diam sit amet dolor lacinia maximus eget quis quam. 2</li>
<li>Contact jbirds.co for help with your Ning Community</li>
<li>Sed eget diam sit amet dolor lacinia maximus eget quis quam. 4</li>
</ul>
<span class="close-ticker"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50" id="svg2"> <defs id="defs4"/> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(0,-1002.3622)" id="layer1"> <rect width="5" height="35" ry="0.025385702" x="741.69556" y="691.34021" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" id="rect2987" style="fill:#ffffff;fill-opacity:1;stroke:none"/> <rect width="5" height="35" ry="0.025385702" x="706.34021" y="726.69556" transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,0,0)" id="rect2987-1" style="fill:#ffffff;fill-opacity:1;stroke:none"/> </g></svg></span>
</div>
Add the following CSS to your Design Studio (change background color #111 to anything you like):
.news-ticker,
.news-ticker li {
width: 100%;
position: absolute;
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.news-ticker ul {
list-style: none;
padding: 0;
margin: 0;
}
.news-ticker {
height: 50px;
top: 0;
left: 0;
background-color: #111;
color: #fff;
font-family: 'Open Sans', sans-serif;
}
.news-ticker li {
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.close-ticker {
width: 50px;
height: 50px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
Add the following jquery code to your Custom Code (bottom):
<script>jQuery(document).ready(function(x$){
var tickerSpeed = x$('.news-ticker').attr('data-speed');
x$('.news-ticker ul li').hide();
x$('.news-ticker ul li:first').show();
var currentSlide = 0;
var slideCount = (x$('.news-ticker li').length) - 1;
var startTicker = setInterval(function(){
x$('.news-ticker ul li').eq(currentSlide).fadeOut(500)
if (currentSlide < slideCount) {
currentSlide += 1;
} else {
currentSlide = 0;
}
x$('.news-ticker ul li').eq(currentSlide).fadeIn(500)
}, tickerSpeed);
x$('.close-ticker').on('click', function(){
clearInterval(startTicker);
x$('.news-ticker').fadeOut(500, function(){
x$(this).remove();
});
});
});
</script>
Enjoy! Let me know if you need help with any aspect of your Ning Community...
Replies
View the demo full page here