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

FORUM

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!

Email me when people reply –

Replies

This reply was deleted.

Announcements

 

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

⚡JFarrow⌁ updated their profile photo
2 hours ago
Ceddy J replied to Thisisbully's discussion
5 months no new updates
"I'm interested in testing future updates."
4 hours ago
Thisisbully replied to Anastasiia_NING support's discussion How to monetize a website: to-do list to get more profit in NING BUSINESS CLUB
"Yea the want push notifications and a quick add button but I can’t give them what they want lol "
9 hours ago
Anastasiia_NING support posted a discussion in NING BUSINESS CLUB
1. Your content should be unique - people will not pay for something they can get elsewhere for fre…
18 hours ago
⚡JFarrow⌁ replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Would it be helpful if I made some videos for how to make different things happen on Landing Pages…"
yesterday
Anastasia_Ning_Support replied to Hugh's discussion
Yet Another Ning Disaster - All Pictures Shrunk!!
"Hello Hugh!
We continue to work on eliminating the rest of the issues as well, I apologize for keep…"
yesterday
Anastasia_Ning_Support replied to Thisisbully's discussion
5 months no new updates
"Hello!
I remember, those updates were put on our roadmap and announced here on creators. I will be…"
yesterday
Anastasia_Ning_Support is now a member of NING BUSINESS CLUB
yesterday
⚡JFarrow⌁ replied to Anastasiia_NING support's discussion How to monetize website: Sell or rent internal pages in NING BUSINESS CLUB
"I certainly plan to utilize this when i am able to migrate"
Tuesday
Anastasiia_NING support left a comment on NING BUSINESS CLUB
"If you have your website, you should be ready for something special - communication with your clien…"
Tuesday
Thisisbully replied to Thisisbully's discussion
5 months no new updates
"I was referring to push notifications and quick add buttons on the activity feed that was said to b…"
Tuesday
Thisisbully replied to Thisisbully's discussion
5 months no new updates
"I accept the honesty "
Tuesday
More…

Meanwhile, you can check our social media channels