Spoiler tags

[Kenny]

Excuse me if we already have this feature, or it's impossible to implement, but...

I thought, this being primarily a comic book forum, in which we also talk about movies, TV, etc. it would be a good idea to implement spoiler tags.

For those who don't know, typically you can tag <*spoiler> around something, and it'll put it in a separate block of the post, and then you can click a button to open the spoiler. Not only does this help with spoilers, but it can also help when posting large pictures, or large quotes from other sites, etc.

Another spoiler tag that I've seen just highlights the text in black, so that you have to scroll over to see it. That'd be great as well, although wouldn't help with pictures, etc.

Just a suggestion. Thanks for all the admins and mods do around here.

[nilskidoo]

I really think spoilers are part of the package with forums like this. If someone prefers to wait for the actual read, then they have no business being in such a place where anything and everything seems up for discussion.

[Mark Seifert]

Not part of the stock vbulletin package, it seems...? I'll get something worked out.

[Jude Terror]

I wrote custom code for this in phpbb on the Outhouse. It's javascript. Let me know if you'd like the code to modify for yourself.

[Mark Seifert]

I'd like to check that out Jude, thanks.

[whomod wayne gacy]

Hey jude, dont make it bad.
Take a java code and make it better.

[Jude Terror]

Here's an alternate solution using vbulletin's system and some CSS:

1. Set up a new bbcode tag. Make [spoiler] the tag, and make the code:

<strong>SPOILERS: </strong>Mouseover to view.<br /><div id="spoiler">{param}</div>

2. Add the following lines to this board's template's CSS file:

#spoiler {
border-color:#999999;
border:solid 1px;
padding:5px;
text-align:left;
font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-size:10px;
color:#FFFFFF;
background-color:#FFFFFF;
margin-top:0;
width:90%;
}

#spoiler:hover {
color:#0099CC;
}

This will create a white box with the spoiler text in it also in white (so invisible). When the mouse goes over the spoiler box, the text will turn grey so you can read it. This is nice, clean CSS with no script or processing required.

This is the javascript code I use for an actual spoiler button that hides the div entirely and then shows it when you click, and rehides when you click again. I'm not sure, but I think this might work as is if you added it as a custom bbcode button (I already replaced the tag used in phpBB with {param}, which is used by the vbulletin system in bbcodes. Maybe give this a shot as is and test it out, then if it works, modify the colors to match the board here?

<div class="smallfont" style="margin-bottom:2px"><b>Spoiler:</b> <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"></div><p><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px"><div style="display: none;">{param}</div></p></div></div></span></td></tr></table></span>