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!

Join Ning Creators Social Network

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

Ana Massien updated their profile photo
yesterday
Ana Massien updated their profile
yesterday
Alexander Wilon replied to Alexander Wilon's discussion
Ning 2 Site For Sale
"Hi Amber, yes, I am taking offers at the moment.  Please offer what you are prepared to pay as I ha…"
Saturday
Amber replied to Badan Barman's discussion
Ning 2.0 Network is Available for Immediate Sale
"Still for sale?"
Friday
Amber replied to Alexander Wilon's discussion
Ning 2 Site For Sale
"Hello, Alex!
are you still looking to sell your site?"
Friday
Amber posted discussions
Friday
دانلود مقاله پرسش مهر ۹۸ updated their profile
Friday
Rhonda Smith, Derric Waller, Gregory Kolupanovich and 7 more joined Ning Creators Social Network
Friday
⚡JFarrow⌁ updated their profile photo
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Tip 3.0: How to Easily Change the Background of Videos from Social Channels
"Has anyone tried this?"
Thursday
Ade replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"hello, i have tried these intrcutions to try to fix my fb login issue but i am still getting this e…"
Thursday
Harold E Scott Jr, Walmiro Martins Charão Junior , Zoriana Malon and 2 more joined Ning Creators Social Network
Sep 11
More…

Meanwhile, you can check our social media channels