Inline Hover Spoiler BB Code

[Fangs404]

Link to mod.

This is a spoiler mod loosely based off of Gazmanafc's Simple Spoiler Tag mod. This mod creates a similar inline all-black box, but instead of having to highlight the text or click a button, you can merely hover the mouse over the black section of text, and it'll display the text. If you like the spoiler tags on reddit and Something Awful, you'll like this. This mod is theme-independent, and it'll keep your site W3C compliant.

Without hovering, you see nothing but black:


However, when you hover the mouse over the black section of text, it magically appears:


Changelog
1.5 - 11/15/09
- fixed install error on 2.0 RC2 due to new Subs-Editor.php formatting for BB codes

1.4.1 - 11/13/09
- changed $themedir/images in package-info.xml to $imagesdir

1.4 - 2/23/09
- changed the "install for" info to "1.1 - 1.99.99" and "2.0 - 2.99.99" to make this mod compatible with all future SMF versions

1.3 - 12/7/08
- added support for SMF 1.1.7

1.2 - 10/15/08
- added support for SMF 2.0 Beta 4

1.1 - 10/15/08
- removed modification of style.css in favor of a style element inside the span tag (this effectively means that this mod is now theme-independent! )
- simplified style and onmouseout

1.0 - 10/2/08
- initial release

[qtime]

if I check the black box, it is visible after downloading a page, when I moved my mouse over the box and further, the text is invisible.
I assume it should be invisible from starting displaying the page.

[Fangs404]

if I check the black box, it is visible after downloading a page, when I moved my mouse over the box and further, the text is invisible.
I assume it should be invisible from starting displaying the page.

Yes, it is invisible from the start.  Are you using the default theme?  Try the default theme to see how it works, and you should see what it's supposed to look like.  You'll have to manually change non-default themes' CSS code to make it work (it's a very simple change for non-default themes).

[Fangs404]

I just updated this mod.  I removed the modification to style.css.  This means that the mod is now theme-independent! 

[Fangs404]

I just added support for SMF 2.0 Beta 4.

[Fangs404]

I just added a link to a demo post so that you can see it in action (it's not SMF, but it's the exact same mod using the exact same HTML).

[highwayfrunkis]

sweet, just what I was looking for.

One question, we have a "spoiler" code/button already - is there an easy way to change the code to :hover: ??

thanks again!

[Fangs404]

sweet, just what I was looking for.

One question, we have a "spoiler" code/button already - is there an easy way to change the code to :hover: ??

thanks again!

Sure thing.  The easiest way to do this would be to just do a find/replace on the word "spoiler."  Take a look at http://custom.simplemachines.org/mods/index.php?action=parse;mod=1438;attach=72283;smf_version=1.1.6 for manual install instructions, and everywhere you see spoiler there, you'll want to replace that with hover.  It should work just fine if you do that. 

[uncajesse]

The zip file on the site doesn't work properly with the "Download a package by url" method.  I had to unpack locally and repack with 7-zip for it to accept via upload.

[Fangs404]

The zip file on the site doesn't work properly with the "Download a package by url" method.  I had to unpack locally and repack with 7-zip for it to accept via upload.

You should just be able to download this and upload the zip file straight to your forum.  You shouldn't need to repack anything.

[BounceDK]

I get this error when trying to install it in 1.1.7

The package you are trying to download or install is either corrupt or not compatible with this version of SMF.

So I'm guessing this doesn't work with 1.1.7?

[Fangs404]

I get this error when trying to install it in 1.1.7

The package you are trying to download or install is either corrupt or not compatible with this version of SMF.

So I'm guessing this doesn't work with 1.1.7?

It should work just fine with 1.1.7.  Let me test it, and I'll update the plugin.

[edit]
OK, updated the package to work with 1.1.7.

[BounceDK]

Thanks

[KahneFan]

It doesn't appear to work with 2.0RC1

[Fangs404]

It doesn't appear to work with 2.0RC1

I didn't know the RC was out.  I'll update it soon (either tonight or tomorrow).  I also need to add 1.1.8 support.

[Fangs404]

OK, I updated this mod.  It should work with all future SMF updates, too.  If you ever notice that something's broken, just let me know, but I don't foresee them changing the mod installer system anytime soon. 

[KahneFan]

Is there a way to possibly just make the un-hovered a black cover? Possibly using a 3x30 black image strip that repeats, and then goes away when hovered? I ask because if you list smileys, or any inline images, the images display. If you were to use an image, the forum owner could make the image as tall as they need if they want members to be able to hide images or embeded movies or... The forum owner could also replace the hover image with their forum name or (an ad) or... when content is hidden.

[Fangs404]

Is there a way to possibly just make the un-hovered a black cover? Possibly using a 3x30 black image strip that repeats, and then goes away when hovered? I ask because if you list smileys, or any inline images, the images display. If you were to use an image, the forum owner could make the image as tall as they need if they want members to be able to hide images or embeded movies or... The forum owner could also replace the hover image with their forum name or (an ad) or... when content is hidden.

This is a good question.  Someone on another forum suggested this bit of CSS:

filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;

I haven't tried it, though.  Changing the opacity from 1 to 0 would make images transparent.  You could try that.

[KahneFan]

Hmmmm, I'll keep playing, but I haven't figure out a good way to do this that's cross browser compatible... unless you use javascript, which is beyond me, but I'm pretty sure it can be accomplished with javascript.

[Fangs404]

Hmmmm, I'll keep playing, but I haven't figure out a good way to do this that's cross browser compatible... unless you use javascript, which is beyond me, but I'm pretty sure it can be accomplished with javascript.

Yeah, I'm not entirely sure how this would be done.  Most of those CSS tags I mentioned above aren't W3C-compliant.  I guess for images, the ugly spoiler solution that requires a button is necessary.