Fader Weirdness

[Grammy]

I never really found a resolution on THIS THREAD and haven't had much luck finding other search results.

The fader does some weird stretching and yawning on not only my heavily modded production forum, but on all my test forums, including the newest one with only two mods:  SimplePortal and Profile Statuses.  I've just disabled the portal; no change.

Stretching:  Shrinking down or expanding wider, depending on how many lines of text are in the news item.  (I have fixed this by by giving the fader a specific height (80px) on the production site, but haven't yet edited the files on this test site.)

Yawning:  Gaping wide open on page refresh (either clicking refresh or returning to the board index after reading a topic) to reveal all the news items at once, then settling back down after a few seconds and doing the fader thing.

Does anyone know why this happens?  I see various fader topics but can't seem to zero in on why it's a bit glitchy.

2.0.11 default


ETA:  Tested this on Chrome, Firefox, Safari, all the same.  I would imagine any of you would be able to duplicate this on your own test forums, by adding several news items, different numbers of lines, then firing up the fader.

[Arantor]

Because they're all in the page HTML, and then the JS kicks in once the page has loaded.

Not great, but not a bug.

[Grammy]

Because they're all in the page HTML, and then the JS kicks in once the page has loaded.

Not great, but not a bug.

Ah...  so the "fixes" I've seen such as assigning a background color to the fader, or trying to connect its behavior to a particular mod aren't really germane.  Probably the best way of living with it would be to not overtax the news in the first place; just say it all and be done.   

That being the case, I can't see how the behavior will change in 2.1 so I won't ask for a fix.   It is what it is, apparently. 

[Sir Osis of Liver]

I would imagine any of you would be able to duplicate this on your own test forums, by adding several news items, different numbers of lines, then firing up the fader.

Yes, that's how it works.  You can fix the height as you've done, but you have to limit the news item lengths accordingly.  Would be better if the div height adjusted itself to the largest item, and centered all other items vertically in that height.  Don't see any simple way to fix the other problem.

[Grammy]

I wonder, then, if there might be a way to "freeze" the fader?  I do like the news appearing just there in that white, centered field, above the boards, rather than top right(ish).  Is there a way to just condense the news into a few lines and have it sit there without doing anything?  (It doesn't appear there unless the fader is turned on.)  I sure would like to utilize that particular div, though.   

[Illori]

you can try the package attached. once installed go to the modification settings page in admin and you can set a min height in px for the fader. it is not ideal but if the size is as large or larger then the largest news you have it should make the issue less apparent.

[Grammy]

Thanks, Illori!  I'm trying that right now....

[Sir Osis of Liver]

If you condense everything into one news item, it's just a static display.  That's how I've always used it.

[Grammy]

If you condense everything into one news item, it's just a static display.  That's how I've always used it.

My "D'oh" moment...  Of course!   

you can try the package attached. once installed go to the modification settings page in admin and you can set a min height in px for the fader. it is not ideal but if the size is as large or larger then the largest news you have it should make the issue less apparent.

Of course, the page refresh yawn can't be helped, but this definitely makes the whole thing much smoother!  Thanks for this!   

[Antechinus]

Because they're all in the page HTML, and then the JS kicks in once the page has loaded.

Not great, but not a bug.

Actually, this should be fixable with a bit of tweaking. Off the top of my head, the easiest way would probably be to set auto overflow in the CSS, then override that with the js. That way the size shouldn't go bonkers before the js kicked in. I think (more coffee may be required) that would do the trick.

[Grammy]

Actually, this should be fixable with a bit of tweaking. Off the top of my head, the easiest way would probably be to set auto overflow in the CSS, then override that with the js. That way the size shouldn't go bonkers before the js kicked in. I think (more coffee may be required) that would do the trick.

Ima sit here and wait.....   

[Antechinus]

Come to think of it, probably wouldn't even need auto overflow and js override. Just using hidden overflow should do it.

Not going to play with it now though. Have other things to do first.

[Grammy]

Come to think of it, probably wouldn't even need auto overflow and js override. Just using hidden overflow should do it.

Not going to play with it now though. Have other things to do first.

*heads off to tinker* 

*back*

Just "overflow: hidden;" hates me.   

No worries, another day, then.   

[Antechinus]

Yawning:  Gaping wide open on page refresh (either clicking refresh or returning to the board index after reading a topic) to reveal all the news items at once, then settling back down after a few seconds and doing the fader thing.

Can't reproduce this on local. Do you have an online example?

[Grammy]

Can't reproduce this on local. Do you have an online example?

I do; I'll PM the login to you.  I installed Illori's height fix but I just uninstalled it so that you could watch the scroller go through its contortions.  The yawn on refresh happens with or without the height fix, though.  The fix just makes it more stable while the page is resting.   

[Sir Osis of Liver]

Yawning:  Gaping wide open on page refresh (either clicking refresh or returning to the board index after reading a topic) to reveal all the news items at once, then settling back down after a few seconds and doing the fader thing.

Can't reproduce this on local. Do you have an online example?

Happens every time on clean test install.  Maybe it's too quick to see running local?

[Grammy]

Happens every time on clean test install.  Maybe it's too quick to see running local?

That's been my experience.  Every single time.   

[Antechinus]

Aha. I see what you mean. The way you worded it on your OP, I thought you meant it was breaking for width ("Yawning:  Gaping wide open on page refresh") since you had already mentioned the varying height with varying content (Stretching:  Shrinking down or expanding wider, depending on how many lines of text are in the news item).

You could use a CSS  tweak to get around this if you really wanted to. If you're going to set a fixed height anyway, adding hidden overflow as well as the fixed height should sort it.

[Grammy]

I thought it should, but no dice.   

Code Select Expand

#smfFadeScroller
{
height: 100px;
background-color: #ffffff;
text-align: center;
padding: 0 2em;
overflow: hidden;
margin: 1em 0;
color: #575757; /* shouldn't be shorthand style due to a JS bug in IE! */
}

I also tried with min-height.  Thanks for checking it out, though. 

[Antechinus]

Try it with max-height.