Marquee news headline acting janky on my customized forum

[Matte]

Kami

Ok, so I've got my news bar back to a manageable state. The only weird thing I'm running into now is that the height of the news bar changes depending on whether I have the "slide" animation or the "flip" animation selected. The slide animation yields a shorter bar, the flip animation yields a taller bar. This occurs whether there is a single line of text or enough text that it wraps to a second line. Almost like there's a difference in padding. Is this normal? Is there a fix for this?

EDIT: I found out that the slide transition is a different class than the flip transition (flip seems to be the default). I added 3px padding to the top and bottom as follows and it works for when there is only one line of text.

#news .items .itemSlide { padding: 3px 10px; }

A new problem now, only when choosing the slide transition. In a situation where I have two separate news items to display, one of them being a single line of text and the other being long enough to wrap to a second line, the padding is thrown off again. It looks like it has about 3px of extra padding on the bottom now, moving the single line of text up. And on the news item that wraps to a second line, the first line gets cut off prior to wrapping.

Example:
News feed text:
The Discord is now on the home page of our forum, drop in and leave a comment! No need to have a Discord account, you can chat as a guest!
What displays in the news feed with the slide animation chosen:
The Discord is now on the home page of our forum, drop in and leave a comment! No need to have a Discord account, you
as a guest!

The words "can chat" extend past the end of the news feed box so they're cut off. This only happens when choosing the slide transition. Any tips? Is my CSS just butchered?

/* 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; margin: 0 auto 10px; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; .rounded-corners(@nav_tree_border_radius); }
#news .items { height: 22px; position: relative; overflow: hidden;}
#news .items > div > div {font-size: 100%; padding: 0px 10px; text-align:justify; line-height: 22px; }
#news .items a {font-weight: bold;}
#news .items div img { vertical-align: text-bottom; }
#news .items .itemSlide { padding: 3px 10px; }
#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: 0px 3px; height: 22px; }
#news .nav > span.title { font-size: 130%; color: #ffffff; text-align: center; display: inline-block; height: 22px; padding: 0px 10px; line-height: 22px;}
#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; } */

You can see the current problem at the test forum: matte.boards.net/

[Lynx]

Mar 24, 2023 19:32:13 GMT -8 Matte said:

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.

If you're still interested in the marquee route, I've put a download link for the plugin in the OP of the thread you linked. Whether you want to use it or not is completely up to you - I've just made it easier to find the most recent working version I had.

[Kami]

Mar 28, 2023 23:50:57 GMT -8 Matte said:

Kami

Ok, so I've got my news bar back to a manageable state. The only weird thing I'm running into now is that the height of the news bar changes depending on whether I have the "slide" animation or the "flip" animation selected. The slide animation yields a shorter bar, the flip animation yields a taller bar. This occurs whether there is a single line of text or enough text that it wraps to a second line. Almost like there's a difference in padding. Is this normal? Is there a fix for this?

EDIT: I found out that the slide transition is a different class than the flip transition (flip seems to be the default). I added 3px padding to the top and bottom as follows and it works for when there is only one line of text.

#news .items .itemSlide { padding: 3px 10px; }

A new problem now, only when choosing the slide transition. In a situation where I have two separate news items to display, one of them being a single line of text and the other being long enough to wrap to a second line, the padding is thrown off again. It looks like it has about 3px of extra padding on the bottom now, moving the single line of text up. And on the news item that wraps to a second line, the first line gets cut off prior to wrapping.

Example:
News feed text:
The Discord is now on the home page of our forum, drop in and leave a comment! No need to have a Discord account, you can chat as a guest!
What displays in the news feed with the slide animation chosen:
The Discord is now on the home page of our forum, drop in and leave a comment! No need to have a Discord account, you
as a guest!

The words "can chat" extend past the end of the news feed box so they're cut off. This only happens when choosing the slide transition. Any tips? Is my CSS just butchered?

/* 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; margin: 0 auto 10px; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; .rounded-corners(@nav_tree_border_radius); }
#news .items { height: 22px; position: relative; overflow: hidden;}
#news .items > div > div {font-size: 100%; padding: 0px 10px; text-align:justify; line-height: 22px; }
#news .items a {font-weight: bold;}
#news .items div img { vertical-align: text-bottom; }
#news .items .itemSlide { padding: 3px 10px; }
#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: 0px 3px; height: 22px; }
#news .nav > span.title { font-size: 130%; color: #ffffff; text-align: center; display: inline-block; height: 22px; padding: 0px 10px; line-height: 22px;}
#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; } */

You can see the current problem at the test forum: matte.boards.net/

This is expected behaviour, but only because of an assumption that PB makes here (not the organisation, but the software as it was written). If you have a news item that spans multiple lines, the textbox will adjust to accommodate the height of the longest line for all news items. The reason for this is that the way the software is written, it assumes you would not want that box shrinking and expanding every few seconds, as it would visually shift the board up and down, repeatedly, with no way for a user to stop it.

As for why the text is weird / cut off / not appropriately padded, I'm so sorry but your CSS is just really funky. On my default test forum (no CSS changes), I do not have this experience. What it looks like is you keep editing the default news bar over and over again and are losing track of the changes you made; I know this isn't an ideal response, but there have been so many changes to this section that I just recommend looking at the default PB theme (for what it's worth, I recommend having a default PB theme as backup for situations like these) and copy the News Bar section of the CSS and replace what you have on your custom theme. You could try to reverse engineer it, but for me that's just a lot of work that I wouldn't want to do if I were in your shoes.

PS: If it were me and I was making experimental changes, I would avoid touching ANY of the default PB CSS and instead append my changes (with commentary for easy identification purposes) at the bottom. Since CSS is cascading, anything on the bottom will overwrite the styles higher up, so you'll still see the effects.