on 03-15-2017 12:41 PM
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!
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?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
.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...
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
83 | |
24 | |
12 | |
9 | |
7 | |
6 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.