Text Ticker

[Marco Westerhof]

I use this Text Ticker - code in a textbox on the front page to inform our members on important updates on the network:

<p>&nbsp;</p>
<p><marquee class="html-wpsites" direction="left" behavior="scroll" scrollamount="4" width="100%">YOUR TEXT HERE</marquee></p>

It works great, as it draws direct attention !

In some cases I would like to make the text clickable with a link. Any suggestions how to do that ?

 

 

 

 

[Kyryl_Ning_Support]

Hi Marco!

You can just instead of "YOUR TEXT HERE" put something like "<a href="your_link" target="_blank">YOUR TEXT HERE</a>", or if you wish it could be just one word or the part of teh whole phrase, so it will look like "YOUR <a href="your_link" target="_blank">TEXT</a> HERE". Also instead of "_blank" you can use "_self" if you wish the link to be opened in the same window.

Hope it helps.

Best regards,

Ning Team.

[Marco Westerhof]

Kyryl, you are FAST !! As always... Thanks ! 

[Kyryl_Ning_Support]

You are always welcome :-)

[⚡JFarrow⌁]

nice tip!

[Marco Westerhof]

Not sure, we use it in textboxes with our standard Design Studio settings: www.reefz.nl.

[Marco Westerhof]

Not sure, we use it in textboxes with our standard Design Studio settings: www.reefz.nl.

[Kyryl_Ning_Support]

Hi there!

You wish to add the background to the line of text, or to the whole module used to display this text ticker?

Looking forward to hearing from you.

Best regards,

Ning Team.

[Kyryl_Ning_Support]

Hi Matthew,

it's necessary to add just style="background-color: red;" into the <marquee> tag, so it would look like this <marquee class="html-wpsites" direction="left" behavior="scroll" scrollamount="4" width="100%" style="background-color: red;">YOUR TEXT HERE</marquee>.

Instead of red, you can use any color code you wish, for example, you can use this site https://htmlcolorcodes.com/color-picker/ to find the code of the color you are looking for.

The one with a hashtag is the necessary one, then you can just copy and paste instead of "red" but don't forget to copy hashtag as well.

Hope this helps.

Best wishes,

Ning Team.

 

[Kyryl_Ning_Support]

Hi Matthew,

it's necessary to add just style="background-color: red;" into the <marquee> tag, so it would look like this <marquee class="html-wpsites" direction="left" behavior="scroll" scrollamount="4" width="100%" style="background-color: red;">YOUR TEXT HERE</marquee>.

Instead of red, you can use any color code you wish, for example, you can use this site https://htmlcolorcodes.com/color-picker/ to find the code of the color you are looking for.

The one with a hashtag is the necessary one, then you can just copy and paste instead of "red" but don't forget to copy hashtag as well.

Hope this helps.

Best wishes,

Ning Team.

 

[Marco Westerhof]

Actually, adding background to a whole module sounds interesting to me as well ! :-)

[Kyryl_Ning_Support]

Hi there!

This one is a bit more complicated than a solution for one line. Also, it depends if you have more then one text ticker on the page.

Ok, let's imagine the worst situation when you have more than one text ticker on the page. In such case, it's better to add the id to the code of the ticker. 

<marquee id="first_ticker" class="html-wpsites" direction="left" behavior="scroll" scrollamount="4" width="100%">YOUR TEXT HERE</marquee>

Any word could be an id so it depends on you which one to choose, just keep in mind that each id should be unique for the page, other words there shouldn't be 2 elements on the page with the same id.

Also please note that the code works only if ticker is placed in html box.

So just put this code into the html box where you ticker is located in HTML mode of course:

<script>
var elem, cls, per;
var htmlbox = function ()
{
elem = elem.parentElement;
cls = elem.getAttribute("class");
if (cls != null)
{
cls=cls.split(" ");
}else
{
cls = "test test";
cls = cls.split(" ");
}
return cls;
}

per=false;
elem = document.getElementById("first_ticker");
while (per===false)
{
htmlbox();
per=cls.some(function(){for (var i=0; i<=cls.length;i++){if(cls[i]==="section-html"){return true;}}});
}

elem.setAttribute("style", "background-color:red;");
</script>

I have highlighted the id that you can change if you have more then one ticker on the page, and if you wish to change the background for it as well just replace red with the color code. I have described this in the previous comment.

Also if you wish to use a picture as a background you can use another style properties, not only background-color.

Please let me know if there are any issues with the implementation of this code.

Hope this helps.

Best regards,

Ning Team.

 

[Marco Westerhof]

Thanks Kyryl, I got them both working ! :-)