Skip to Content
0

Tickers in Design Studio

Mar 15, 2017 at 12:41 PM

341

avatar image

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!

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

avatar image
Former Member Mar 16, 2017 at 05:26 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Alex Cruickshank Mar 17, 2017 at 07:51 AM
0

.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...
}

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Mar 17, 2017 at 10:32 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Alex Cruickshank Mar 17, 2017 at 10:39 AM
0

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?

Show 4 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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

0

Hi Christian, Very strange your code worked straight away!

0
Former Member

Hi Alex,

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

At least it works now. ;)

0
Former Member

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

0