cancel
Showing results for 
Search instead for 
Did you mean: 

Tickers in Design Studio

alexdc12
Participant
0 Kudos

Hi All

I have searched the web for this and only found one example

https://archive.sap.com/discussions/thread/3496833

Does anybody know of a way to create a ticker in Design Studio? I tried the CSS Class as above suggestion but the text did not move when viewing the application.

I may have used it wrong but I'm pretty sure its selecting the marquee class as I set a font size in the class and that repeated through to the text box.

Any ideas would be very helpful!

Accepted Solutions (0)

Answers (4)

Answers (4)

alexdc12
Participant
0 Kudos

HI Christian

I now have this

.marquee {
font-size: 20px !important;
color: white;
width: 450px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 10s linear infinite !important;
}

.marquee:hover {
animation-play-state: paused
}
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -50% }
}

Still not working though? Are you just using a text box and assigned the marquee class?

Former Member
0 Kudos

Hi Alex,

.textticker {

color: black;

font-size: 14px;

width: 450px;

margin: 0auto;

overflow: hidden;

white-space: nowrap;

box-sizing: border-box;

animation: textticker 15s linear infinite;

}

.textticker:hover {

animation-play-state: paused

}

@keyframes textticker {

0% {text-indent: 100%}

100% { text-indent: -50%}

}

this is my code. I changed the Name from marquee to textticker. Simple text field with CSS class textticker. Clear all CSS Style. Your code looks fine (however, i'm quite careful with !important). I assume your Background, in which the ticker is embedded is not white 😉

Best regards

Christian

alexdc12
Participant
0 Kudos

Hi Christian, Very strange your code worked straight away!

Former Member
0 Kudos

Hi Alex,

maybee marquee class was/is already used elsewhere and thus your code might get overwritten.

At least it works now. 😉

Former Member
0 Kudos

Hi Guys,

Even i have got a requirement to build a ticker based message. Since you have done this , So could you please guide me if these are the right steps to implement:

1. Drag a text component and write a text message in it

2. Then In CSS of text component, paste the ABOVE mentioned code of ticker.

3. Run the application.

Kindly suggest me if this is the right way to build. Sooner reply would be appreciable and helpful to my project work

Br,

Sumit Maloo

Former Member
0 Kudos

Hi Alex,

please remove

// depending on text length...

from your code. Then the ticker should work just fine.

The // is comment in JavaScript/Bial but not CSS, thus this will mess up your code.

Best regards

Christian

alexdc12
Participant
0 Kudos

.marquee {
font-size: 16px !important;
width: 450px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 10s linear infinite !important;
} .marquee:hover {
animation-play-state: paused
}
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -50% } // depending on text length...
}

Former Member
0 Kudos

Hi Alex,

the code is working fine for me on DS1.6.

Can you post the exact css code you have copied to your sheet?

Best regards

Christian