Stupid bouncy BBC

[Antechinus]

Sure, that could be done. I can think of one other possible refinement too.

The Chrome bug is due to Chrome needing a defined height set on any parent element that has a position: relative; child element. The problem is that the height will vary according to content, and getting the height of  a bouncing element is a bit of a PITA even with the document inspector. If you entered the wrong height, that would screw things up a bit in all browsers (although in practice any height within a few px of the actual height would be near enough to work).

It may be worth adding a touch of javascript to automatically define the height of .parrot_cage, so that the basic bounce animation works properly in Chrome and Firefox without the user having to do anything.

[Antechinus]

The only thing I could wish for is to be able to pad all four sides individually, like [bouncy padding=10,20,20,10]

On second thought: why? Give me a use case that makes sense. Offhand I can't see one.

[Antechinus]

Played around with the javascript. Ain't happening. Got it working ok, but it's inconsistent with how it calculates the heights. Shouldn't be, but is, and I suspect it has something to do with the animations borking up how the js calculates heights of bouncing and spinning elements (ie: results are more consistent for the ones that don't flip or spin).

Anyway, since this is a Chrome bug, in that the positioning works perfectly for width and only screws up on height, I am of the opinion that they can fix their f*****g browser. If it screwed up on both I could cut them some slack and pretend it was a valid interpretation of the W3C standards, but since it is only screwing up on height that means they have screwed up with their browser (and there are various bug reports over a period of years for this one).

Implementing the javascript "fix" makes Chrome better sometimes, but Firefox worse sometimes, and with the daft way things are supposed to be loaded for mods these days figuring out how to load the js conditionally (ie: for Chrome only)  is taking more patience than I have left. So, it ain't happening.

For now, v 2.1.2 is the final version.

[Antechinus]

Ok, I went and made some final tweaks anyway ~  v2.1.3 is now available.

This gets around the Chrome/Edge/etc position: relative; bug by (optionally) nailing the problem at the source. There is now a height attribute available. If it is set to match the static height of the bouncing div in pixels, results should be spot on in all decent browsers. Weird obscure browsers can go get ******. I'm doing this for fun, not for torture.

As an example for a 64px high smiley:

Code Select Expand

[bouncy height=64]:big_smiley:[/bouncy]
Also, you can now pause the animation by hovering your cursor over the parent div (class="parrot_kingdom"). I figured that might be handy for the occasional sanity break.

Apart from that, everything is still the same. The mod is still compatible with SMF 2.0.x or 2.1.x, and is backwards compatible with any existing bouncy tags.

Go nuts. The internet is waiting for you. 

[Steve]

Thanks again Ant.

[Antechinus]

I did have one other thought: it could be fun to only pause the animation when you hover over the bouncing content, so that people have to chase it to stop it. That's a simple CSS tweak.

Since install/uninstall is done by a basic require-file/remove-file, any edits to the CSS file will have no effect on installing or uninstalling the mod. If anyone wants to mess with the CSS a bit it's fine to do that.

So, if you want to make your users chase bouncing things to stop them bouncing...

Code (stupid_bouncy.css: Find) Select Expand

/* For God's sake, stop those bounces! :D */
.parrot_kingdom:hover .parrot_cage,.parrot_kingdom:hover .parrot {
animation-play-state:paused;
}

Code (stupid_bouncy.css: Replace) Select Expand

/* For God's sake, stop those bounces! :D */
.parrot_cage:hover,.parrot_cage:hover .parrot {
animation-play-state:paused;
}

[Antechinus]

Meh. Ok, since it is raining anyway...

...I tweaked this thing a bit more.

The version-in-waiting has the padding coded like this:

Code Select Expand

'padding'=> array('optional' => true, 'value' => ' style="padding:$1px calc($1px / 2)"', 'match' => '(\d+)'),
If PHP fries your brain: all that means is the padding is still set in the editor with an integer, the same way it always was (ie: padding=32). This is to keep things simple, and allow full backwards compatibility with existing tags. However, it will now automatically add left and right padding that is half the value of the top/bottom padding.

After testing with a wide variety of content, this seems to be a good compromise that is easily dialled in to give good results on any post area large enough to hold the content (ie: it can still be partially obscured, or not bouncing much, on a phone). So from the perspective of the end user there is no real difference: you just use it like the previous versions, and add padding if you need it.

But, of course, I did have to plan some more evil.

By default it will still pause the animations if you hover your cursor over the main parent div (class="parrot_kingdom"). However, if you want to mess with people's heads (and who doesn't?) you can enter an optional hover parameter. This will accept two values: chase, and ohffs.

Code Select Expand

[bouncy hover=chase][/bouncy]
[bouncy hover=ohffs][/bouncy]
The chase value will do what I mentioned in that CSS tweak in the previous post: it will make people chase the bouncing content and hover their cursor over it to stop the animations. This is just in case you feel like surprising someone and thoroughly annoying them.

Of course, if someone does that to you with their bouncy tag you might want revenge. This is where the ohffs value comes in. If you enter that into the tag parameters, the animations will never stop no matter what anyone does.    

I think this is about as far as it is reasonably sane (ha) to go with options. If anyone disagrees, speak soon or forever hold your codpiece.

[Antechinus]

Ok, I've gone and done it. Stupid Bouncy BBC 2.1.4 is now available.
Backwards compatible with existing tags, as always, but with extra stupid!

The main changes since my previous post are marquees. It seemed silly to not have a replacement for the old deprecated move tag, and the CSS involved is trivially simple, so we now have stupid (but not bouncy) marquees as well. Even though the marquees do not actually bounce, they are still set by the bounce parameter for the sake of simplicity.

bounce=move_right changes the bouncy tag to a left-to-right marqee.
bounce=move_left changes the bouncy tag to a right-to-left marqee.

bounce=move_both changes the bouncy tag to an alternating marqee.
This option is mainly intended for extra stupidity with animated gifs.
Most of these gifs have animals walking or running from left to right.
move_both will flip the gif 180 degrees when it is moving right to left.
This means critters will always be walking or running the way they should.

For a full explanation of all options, please see the OP of this thread.

[Steve]

I'm not sure we shouldn't call the guys in the white coats for you Ant! 

The changes are cool and thank you again. 

[Antechinus]

I think this is the final version for some time. I can't really think of anything else that is worth doing with it.

And I have a converter to fix anyway.

[FrizzleFried]

HOLY SMOKES!  I go on vacation for 3 short days and return to stupid bouncy insanity!   I can't wait to install and get real stupid!!!

Thank you Antechinus...this is gunna be fun (I use the stupid bouncy mostly for HAPPY BIRTHDAY messages to users).

[FrizzleFried]

Uh oh... what am I doing wrong?   Old mod... bouncy bounced (but with it peeking below).  I install this version and no bounce... at all... using standard tag.

[FrizzleFried]

Oddly... the [bouncy hover=chase] tag just... ads padding between the letters only..


You cannot view this attachment.

PS:  Of course no offense on the SUPER STUPID comment... the topic of the post is "SUPER STUPID BOUNCY"...

[Antechinus]

No idea. Works perfectly on my box. Need more information.

ETA: Hang on. The CSS and markup have been changed. Did you force a hard refresh (Ctrl+F5) ?

ETA2: I should probably put version numbers on the CSS file, so any new files get cached automatically.

[FrizzleFried]

THAT was the key!  Thank you!!  (Why I keep forgetting to at least try a hard-refresh before reporting these issues is beyond me... argh!)

[Steve]

It gets me a lot of the time too. 

[Antechinus]

If I do a 2.1.5 version I'll rename the CSS file to bouncy_215.css or something. Problem solved.

[FrizzleFried]

I have a real stupid last request if at all possible.  If it's difficult... at all... ignore my stupidity...

Right now I have like a half dozen images that would work great with the move both command... EXCEPT they are all facing left ... which means they are all going backwards. 

Any way to make "move both" in to "move both_lr" and "move both_rl" or something... so that it starts left right one way or right left the other?

If not... no worries... I'll just go out and find some animated gifs facing the other way (or use my gif editing software to flip em).

[Steve]

If I do a 2.1.5 version I'll rename the CSS file to bouncy_215.css or something. Problem solved.

IF, he says ...

[FrizzleFried]

I think I might have given him an excuse... by accident.