Marquee news headline acting janky on my customized forum

[Matte]

test forum: matte.boards.net/

Hi, I'm trying to get my news headline to stop acting janky. It's been a while since I've gone in and messed with the codes, so I can't exactly remember where I should be looking to address this.



Ideally, I'd like my news headline to marquee scroll across the box like it currently does, but it doesn't seem to scroll in from the right and out to the left like you would expect it to. It scrolls in from the right fine, but before it can scroll out to the left, you can see it just disappears and the animation restarts.

Now, if I have more than one news headline, that's where it gets even jankier. Before the first headline can complete its marquee scroll, it jumps to the left and the second headline starts midway through the first headline, overlapping the words. I'm guessing it's combining the marquee scroll with the default way of displaying the overflow of the headline. I have the following code in my style sheet that tells me to comment it out if I'm using more than one news headline. All that seems to do is stop the marquee scroll, but the two headlines still overlap when it does its default transition.

/* News Feed Marquee - COMMENT OUT IF USING MORE THAN 1 NEWS ITEM! */
.itemSlide {-moz-transform: translateX(100%);
           -webkit-transform: translateX(100%);
           transform: translateX(100%);
           -moz-animation: scroll-left 2s linear infinite;
           -webkit-animation: scroll-left 2s linear infinite;
           animation: scroll-left 20s linear infinite;}
       @-moz-keyframes scroll-left {
           0% {-moz-transform: translateX(100%);}
           100% {-moz-transform: translateX(-90%);}}
       @-webkit-keyframes scroll-left {
           0% {-webkit-transform: translateX(100%);}
           100% {-webkit-transform: translateX(-90%);}}
       @keyframes scroll-left {
           0% {-moz-transform: translateX(100%);
               -webkit-transform: translateX(100%);
               transform: translateX(100%);}
           100% {-moz-transform: translateX(-90%);
               -webkit-transform: translateX(-90%);
               transform: translateX(-90%);}}

Lastly, if I try to keep it as simple as possible and have only one headline and comment out the previous code, the headline sits still in the box but the text gets cut off on the right and it doesn't transition to show the overflow.

I'm also using the Sidebar Redux plugin if that's relevant to the issue.

[Matte]

Didn't realize my "testing theme" wasn't set as the default on my forum. It should now show the news headline like in my first description, marquee scrolling but the animation cutting off.

I'm really just looking for the best way to fix this and just make either one or more news headlines readable without jank, whether that's possible with the marquee effect or needing the text to be stationary. Thanks!

[Kami]

Since you changed it to a single line (from what I can see?) I can't see the behaviour you described in action, so I can't help diagnose. It would be beneficial to put it exactly how it was when you made the thread.

[Matte]

Mar 23, 2023 7:28:56 GMT -8 Kami said:

Since you changed it to a single line (from what I can see?) I can't see the behaviour you described in action, so I can't help diagnose. It would be beneficial to put it exactly how it was when you made the thread.

It's currently displaying the following:

Mar 21, 2023 23:06:21 GMT -8 Matte said:

Ideally, I'd like my news headline to marquee scroll across the box like it currently does, but it doesn't seem to scroll in from the right and out to the left like you would expect it to. It scrolls in from the right fine, but before it can scroll out to the left, you can see it just disappears and the animation restarts.

I figured diagnosing how it behaves with a single news headline first would be best, since I can live without having two if that makes things too challenging. If you're not seeing the animation stop and restart prematurely, maybe it has something to do with resolution/screen size? Should I add the second news headline on so you can see how it behaves with two news headlines?

[Kami]

Mar 23, 2023 10:33:25 GMT -8 Matte said:

Mar 23, 2023 7:28:56 GMT -8 Kami said:

Since you changed it to a single line (from what I can see?) I can't see the behaviour you described in action, so I can't help diagnose. It would be beneficial to put it exactly how it was when you made the thread.

It's currently displaying the following:

Mar 21, 2023 23:06:21 GMT -8 Matte said:

Ideally, I'd like my news headline to marquee scroll across the box like it currently does, but it doesn't seem to scroll in from the right and out to the left like you would expect it to. It scrolls in from the right fine, but before it can scroll out to the left, you can see it just disappears and the animation restarts.

I figured diagnosing how it behaves with a single news headline first would be best, since I can live without having two if that makes things too challenging. If you're not seeing the animation stop and restart prematurely, maybe it has something to do with resolution/screen size? Should I add the second news headline on so you can see how it behaves with two news headlines?

Ah okay, I misunderstood what the issue was, my bad!

So I'm actually not seeing anything wrong, and it doesn't look like the animation loops prematurely; I see the entire text as follows:

This is the first news headline. News headline number one. The second news headline is going to come after this one. This is the first news headline. Just an example to fill the space and that's it.

It scrolls in from the right hand side, and touches the "end" of the available space on the left-hand side like so:



There is a pretty large delay once the message completes before it loops back to the beginning but I assume that's because the timing wasn't adjusted yet due to ongoing issues.

So far, I can't see any indication of the animation ending prematurely before hitting the "end" of the available space; it also doesn't look to be influenced by screen resolution -- I have a 4k monitor so I went full screen, I did partial screen, I zoomed in, etc, and it did not change the appearance of the scroll.

It might be helpful to see a second line, to see if I can get the behaviour to replicate?

[Matte]

Interesting. On my screen, the text scrolls in from the right, but before the last bit of "an example to fill the space and that's it" is able to completely scroll out to the left, it just disappears and restarts the animation. Tested in Edge and Chrome with the same result.

I just enabled the second news headline so you can see how it acts with two separate headlines. This is without the previous code that I mentioned being commented out, so it's kind of expected to act janky in this instance.

[Kami]

Are you on desktop view via mobile by any chance? It got funky when I opened this on mobile.

I'll check desktop tomorrow, I just wanted to ask to either include it in my problem solving or to disregard it as just being Mobile Things since PB isn't inherently responsive.

[Matte]

Mar 23, 2023 19:54:07 GMT -8 Kami said:

Are you on desktop view via mobile by any chance? It got funky when I opened this on mobile.

I'll check desktop tomorrow, I just wanted to ask to either include it in my problem solving or to disregard it as just being Mobile Things since PB isn't inherently responsive.

I was on my PC. I did also test it on desktop mobile and it did the same thing, it just seemed like the text scrolled slower so the animation cut off even sooner (halfway through the headline rather than near the end like it does on PC).

I'm going to try to include some information here: I remember wanting the news headline to marquee scroll and had to search for a way to get it to do that since it isn't a default PB animation. I believe I also had to force the news headline to constrain itself to a single line, as opposed to overflowing to a line 2 so that it would fit into the box that I made for it. I must have found a way to do this, but it doesn't work right when you have two separate news headlines because the default PB animation is (I think) to display the first headline in its entirety, then display the second headline in its entirety. This default transition clashes with the marquee animation (and probably also clashes with the "forced to one line" thing), which is where the "comment this code out when using more than one news headline" comes into play. That eliminates the marquee animation, but the overflow then becomes an issue. The headline being longer than the width of the box just causes the end of the headline to be cut off, and when it does the default PB transition to the second headline, you'll see the end of the first headline overlapping the beginning of the second headline.

I think I'm maybe just trying to combine too many fluid things (headline length, number of headlines, marquee timing, etc.) into one and there might not be an easy "fix all" solution. I do have an alternate idea of just using the sidebar redux to create a new "announcements" box and put my news headlines over there and just forget about the default headline area. I say that because if you take another look and think it's a particularly complicated issue, I wouldn't want you to deep dive into it because this other solution is also something that I can make work.

[Kami]

Mar 23, 2023 20:53:56 GMT -8 Matte said:

Mar 23, 2023 19:54:07 GMT -8 Kami said:

Are you on desktop view via mobile by any chance? It got funky when I opened this on mobile.

I'll check desktop tomorrow, I just wanted to ask to either include it in my problem solving or to disregard it as just being Mobile Things since PB isn't inherently responsive.

I was on my PC. I did also test it on desktop mobile and it did the same thing, it just seemed like the text scrolled slower so the animation cut off even sooner (halfway through the headline rather than near the end like it does on PC).

I'm going to try to include some information here: I remember wanting the news headline to marquee scroll and had to search for a way to get it to do that since it isn't a default PB animation. I believe I also had to force the news headline to constrain itself to a single line, as opposed to overflowing to a line 2 so that it would fit into the box that I made for it. I must have found a way to do this, but it doesn't work right when you have two separate news headlines because the default PB animation is (I think) to display the first headline in its entirety, then display the second headline in its entirety. This default transition clashes with the marquee animation (and probably also clashes with the "forced to one line" thing), which is where the "comment this code out when using more than one news headline" comes into play. That eliminates the marquee animation, but the overflow then becomes an issue. The headline being longer than the width of the box just causes the end of the headline to be cut off, and when it does the default PB transition to the second headline, you'll see the end of the first headline overlapping the beginning of the second headline.

I think I'm maybe just trying to combine too many fluid things (headline length, number of headlines, marquee timing, etc.) into one and there might not be an easy "fix all" solution. I do have an alternate idea of just using the sidebar redux to create a new "announcements" box and put my news headlines over there and just forget about the default headline area. I say that because if you take another look and think it's a particularly complicated issue, I wouldn't want you to deep dive into it because this other solution is also something that I can make work.

OK with two lines I'm seeing some jankiness. Let me know which of these observations are applicable to what you're experiencing:

- Scroll speed with 2 entries faster than is probably good
- As the scroll is nearing the end of line 1 and you can see line 2 start, it zooms back to the beginning of line 1 without finishing
- The zoom back to the beginning of line one isn't complete, and actually picks up about a word in.

[Matte]

Mar 24, 2023 8:47:47 GMT -8 Kami said:

OK with two lines I'm seeing some jankiness. Let me know which of these observations are applicable to what you're experiencing:

- Scroll speed with 2 entries faster than is probably good
- As the scroll is nearing the end of line 1 and you can see line 2 start, it zooms back to the beginning of line 1 without finishing
- The zoom back to the beginning of line one isn't complete, and actually picks up about a word in.

- Scroll speed is easy enough to mess with by changing the animation seconds.
- It does do this for me, but I don't even have a separation between line 1 and line 2. Line 2 starts before line 1 ends, so the text from both lines overlaps and you can't read any of it.
- This also happens, and the longer I let the animation continue to run, the more it jumps all over the place. The marquee speed isn't synced with the default PB transition so they both run repeatedly on their own schedules.

Seems to me like this is something that I would have to alter codes for any time I add/remove a news headline depending on number of headlines and length of headlines. My main reason for wanting a simple way to do the headlines was to make it easier for other admins on my board to add headlines, but having to alter the codes every time defeats that purpose. I did stumble upon this plugin from Lynx that seems like it would be a good replacement option for me if I want to go that route. Can't seem to locate it in the library, but I might try downloading it from one of the links in the thread and try it out.

[Kami]

Out of curiosity, is there a reason the PB default newsfader doesn't suit your needs? No judgement, just curious!

I do see what you mean about the text overlapping. I'll be on my computer again tomorrow (it's 10:30PM for me) and I'll see what I can figure out — please don't replace it with something else yet!

[Matte]

Mar 24, 2023 19:36:40 GMT -8 Kami said:

Out of curiosity, is there a reason the PB default newsfader doesn't suit your needs? No judgement, just curious!

I'm want to say that my original reason was because of the limited space that I gave myself with my forum theme. I already adjusted the left and right page margins to make the width of the forum manageable as a text-based space, then adding the sidebar squeezed me into an even tighter space because I liked the look of the news headline being above only the category lists and not over the entire page (both sidebar and categories). So a news headline of a certain length gets cut off, and the marquee animation both allows the full headline to display and also draws your attention to it so you can't really overlook it. To be honest, it's been so long since I've seen a news headline on a standard non-themed PB forum that I can't remember how it treats a headline that is too long to fit into the space in a single line.

[Kami]

Mar 24, 2023 20:07:10 GMT -8 Matte said:

Mar 24, 2023 19:36:40 GMT -8 Kami said:

Out of curiosity, is there a reason the PB default newsfader doesn't suit your needs? No judgement, just curious!

I'm want to say that my original reason was because of the limited space that I gave myself with my forum theme. I already adjusted the left and right page margins to make the width of the forum manageable as a text-based space, then adding the sidebar squeezed me into an even tighter space because I liked the look of the news headline being above only the category lists and not over the entire page (both sidebar and categories). So a news headline of a certain length gets cut off, and the marquee animation both allows the full headline to display and also draws your attention to it so you can't really overlook it. To be honest, it's been so long since I've seen a news headline on a standard non-themed PB forum that I can't remember how it treats a headline that is too long to fit into the space in a single line.

Honestly, I think you're complicating it, personally. If you use the built-in newsfader set to "flip" it expands vertically to allow overflow if the line is longer. Broadly speaking, I really hate marquees; it's really awful for accessibility and it's recommended to not use marquees since it's difficult to read and pretty distracting. If you're using it with the intent of having people read the content, I don't think marquee is the way to go. Just my (professional) 0.02, should that matter.

That said, based on the CSS that you're using here, you're right -- doing multiple lines really requires you to not use this particular CSS as it's not designed for it. It would be helpful if I could see the whole CSS + HTML you're using for this bit, unfortunately I can't seem to find the CSS in its entirety using the browser console. Could you post it here? I'd like to put it on my test forum so I can play around with it.

[Matte]

Mar 25, 2023 7:50:35 GMT -8 Kami said:

Honestly, I think you're complicating it, personally. If you use the built-in newsfader set to "flip" it expands vertically to allow overflow if the line is longer. Broadly speaking, I really hate marquees; it's really awful for accessibility and it's recommended to not use marquees since it's difficult to read and pretty distracting. If you're using it with the intent of having people read the content, I don't think marquee is the way to go. Just my (professional) 0.02, should that matter.

That said, based on the CSS that you're using here, you're right -- doing multiple lines really requires you to not use this particular CSS as it's not designed for it. It would be helpful if I could see the whole CSS + HTML you're using for this bit, unfortunately I can't seem to find the CSS in its entirety using the browser console. Could you post it here? I'd like to put it on my test forum so I can play around with it.

I'm definitely overcomplicating it. I was very picky back when I was diving into this theme, and I altered the news bar CSS and added the marquee and tweaked things by the pixel to get it how I wanted it. I only now realize that I didn't fully account for every possibility with the news headline. I'll agree that the marquee isn't the way to go, and I actually like how it looks just putting the headlines in an "announcements" panel with the Sidebar Redux plugin.

I just removed the "News Feed Marquee" CSS and set the default headline animation to flip to see what it would look like. I'd have to play with the CSS a little to allow overflow and non-fixed heights to get it back to resembling the standard news bar. I may or may not mess around with that since I'm pretty happy with my current solution.

If you're still interested in checking it out, here's what I was able to pick out for code.

/* News Bar */
#news { color: @nav_tree_color; font: @nav_tree_font; text-decoration: @nav_tree_decoration; z-index: 9; height: 22px; background-color: @nav_tree_background_color; overflow: hidden; white-space:nowrap; margin: 0 auto 10px; .rounded-corners(@nav_tree_border_radius); }
#news .items { height: 22px; position: relative; overflow: hidden; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #000000; .rounded-corners(0px 4px 4px 0px);}
#news .items > div > div { font-size: 120%; font-weight: bold; padding: 1px 10px; line-height: 22px !important; }
.itemSlide a {font-weight: bold;}
#news .items div img { vertical-align: text-bottom; }
#news .nav { background-color: #3f3f3f; float: left; background-position: center; }
#news .nav > span { width: auto !important; border-width: 0px 0px 0px 0px; border-style: solid; border-color: transparent; cursor: default; float: left; display: inline-block; padding: 2px 3px; height: 22px; }
#news .nav > span.title { color: #ffffff; text-align: center; display: inline-block; height: 22px; padding: 1px 10px; line-height: 22px !important; }
#news .nav .arrow.left { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); padding-left:15px; }
#news .nav .arrow.right { padding-right:15px; }
#news .nav .arrow.left span { border-right-color: #ffffff; }
#news .nav .arrow.right span { border-left-color: #ffffff; }
#news .nav .arrow.left:hover { border-right: 0px solid #3f3f3f; background-color: #333333; }
#news .nav .arrow.right:hover { border-right: 0px solid #3f3f3f; border-left: 1px solid #3f3f3f; margin-left: -1px; background-color: #333333; }
/* #news .nav:hover { background-color: @nav_tree_hover_background_color; } */
/* #news .nav:hover > span { border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; border-width: 0px @nav_tree_border_width 0px 0px; } */

/* News Feed Marquee - COMMENT OUT IF USING MORE THAN 1 NEWS ITEM! */
.itemSlide {-moz-transform: translateX(100%);
           -webkit-transform: translateX(100%);
           transform: translateX(100%);
           -moz-animation: scroll-left 2s linear infinite;
           -webkit-animation: scroll-left 2s linear infinite;
           animation: scroll-left 20s linear infinite;}
       @-moz-keyframes scroll-left {
           0% {-moz-transform: translateX(100%);}
           100% {-moz-transform: translateX(-90%);}}
       @-webkit-keyframes scroll-left {
           0% {-webkit-transform: translateX(100%);}
           100% {-webkit-transform: translateX(-90%);}}
       @keyframes scroll-left {
           0% {-moz-transform: translateX(100%);
               -webkit-transform: translateX(100%);
               transform: translateX(100%);}
           100% {-moz-transform: translateX(-90%);
               -webkit-transform: translateX(-90%);
               transform: translateX(-90%);}}
$[news] is the first thing on my Home page layout template. I'm also using the Change Name Of "News" plugin.

[Kami]

thanks! i'm unavailable tomorrow but i'll check this out on monday, if that works for you?