Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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...

 

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Ning test2 and Ning test joined Ning Creators Social Network
12 hours ago
Alex - Rosas † Negras replied to Joven's discussion
who with newtork 2.0
""
yesterday
Alex - Rosas † Negras replied to Joven's discussion
who with newtork 2.0
""
yesterday
Margarida Maria Madruga replied to Joven's discussion
who with newtork 2.0
"I asked about something else, but I understood you.So, what can I do on the site to send messages,…"
yesterday
Bizz replied to Joven's discussion
who with newtork 2.0
"Not sure what you mean by a simple CSS code for me to provide. It all depends on what you want the…"
yesterday
EcomMastermindz updated their profile photo
Friday
EcomMastermindz updated their profile photo
Friday
EcomMastermindz updated their profile
Friday
Bharat Rashtriya Praja Sarkar updated their profile
Friday
Ron and Amit Sinh are now friends
Thursday
Jen and Amit Sinh are now friends
Thursday
Amit Sinh updated their profile photo
Thursday
More…

Meanwhile, you can check our social media channels