running text

Third Party Plugins to CMSimple - how to install, use and create plugins

Moderator: Tata

Post Reply
roze
Posts: 270
Joined: Tue Jun 03, 2008 7:13 am
Location: NL
Contact:

running text

Post by roze » Mon Jan 02, 2023 11:43 am

is there a plugin in CMSimple _XH that can ensure that you get a line with a “running text" from, for example, left to right for each page?
Rob Zeijen,

Valkenswaard (NL)

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: running text

Post by frase » Mon Jan 02, 2023 1:25 pm

There used to be a plugin from simplesolutions.dk – but I can't find it anymore.

But, you can also solve this simply with CSS.
Create some new rules in the template stylesheet (stylesheet.css):

Code: Select all

@keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: -100% }
}
div.marquee {
    width: 100%;
    margin: auto;
    padding: 2px;
    overflow: hidden;
    white-space: nowrap;
    animation: marquee 20s reverse linear infinite;
}
div.marquee:hover {
    animation-play-state: paused;
    cursor: not-allowed;
}
If you want to have the scrolling text on all pages, then add it at the appropriate place in template.htm:

Code: Select all

<div class="marquee">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum.</div>
“Lorem ipsum …” That is your text.
If you want to have the ticker only on certain pages, then you can also insert this line in the source code of the editor. This way you can also insert a different ticker on each page.

If you want the text to run from right to left, remove the word “reverse” from the animation.

Code: Select all

animation: marquee 20s linear infinite;
Of course, you can also customize the “div.marquee” (background color, borders, etc.).

roze
Posts: 270
Joined: Tue Jun 03, 2008 7:13 am
Location: NL
Contact:

Re: running text

Post by roze » Mon Jan 02, 2023 2:02 pm

frase,

Thank you very much.

I now have a line on each page. The only thing: its not "running" . See the marked line:
werk bergstraat.jpg



www.podologiedommelen.nl
You do not have the required permissions to view the files attached to this post.
Rob Zeijen,

Valkenswaard (NL)

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: running text

Post by frase » Mon Jan 02, 2023 2:11 pm

roze wrote:
Mon Jan 02, 2023 2:02 pm
I now have a line on each page. The only thing: its not "running"
This is because the new rules are commented out in stylesheet.css.
Above the new rules, remove the two lines:

Code: Select all

/* 


/*

roze
Posts: 270
Joined: Tue Jun 03, 2008 7:13 am
Location: NL
Contact:

Re: running text

Post by roze » Tue Jan 03, 2023 5:48 pm

Thanks.

In Chrome, Edge, Firefoxit is running now. In Safari it doesn't run.



www.podologiedommelen.nl
Rob Zeijen,

Valkenswaard (NL)

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: running text

Post by frase » Tue Jan 03, 2023 7:34 pm

roze wrote:
Tue Jan 03, 2023 5:48 pm
In Safari it doesn't run.
Unfortunately, I can't test this with Safari.
But you can try with vendor specific CSS.
Just add the following to the new rule:

Code: Select all

@-webkit-keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: -100% }
}
div.marquee {
    max-width: 100vw;
    -webkit-animation: marquee 20s linear infinite;
}
div.marquee:hover {
    -webkit-animation-play-state: paused;
}
Unfortunately, I can't promise you that this will work. But it is worth a try.

If you have tried it, please give the result.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: running text

Post by Tata » Wed Jan 04, 2023 9:39 am

The animation works in Safari but the text starts split in two lines (in another browsers as well). I have not think about where to add the necessary value.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: running text

Post by frase » Wed Jan 04, 2023 9:57 am

Tata wrote:
Wed Jan 04, 2023 9:39 am
The animation works in Safari but the text starts split in two lines (in another browsers as well).
This should not actually happen.
“white-space: nowrap;” should ensure that no line breaks occur.
For me, there are no line breaks in any browser.
Tata wrote:
Wed Jan 04, 2023 9:39 am
I have not think about where to add the necessary value.
The three new rules (for Safari) are to be added in addition to the other new rules.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: running text

Post by lck » Wed Jan 04, 2023 12:05 pm

roze wrote:
Mon Jan 02, 2023 11:43 am
is there a plugin in CMSimple _XH that can ensure that you get a line with a “running text" from, for example, left to right for each page?
The NewsPlugin by knollsen includes NewsTicker, NewsSlider and NewsScroller. Probably a bit overkill for your purposes, but check it out.
Download page here. Password can be found here.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: running text

Post by Tata » Thu Jan 05, 2023 4:38 am

frase wrote:
Wed Jan 04, 2023 9:57 am
This should not actually happen.
“white-space: nowrap;” should ensure that no line breaks occur.
Anyway:
screenshot.png
But the "white-space: nowrap;” has solved it.
THX
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply