Gossamer Forum
Home : Products : Gossamer Forum : Development, Plugins and Globals :

Spoiler code would be really useful.

Quote Reply
Spoiler code would be really useful.
Having the ability to use a spoiler tag would be really great, has anybody come up with a way of accomplishing a basic spoiler tag for people to use?

For those that don't know, a spoiler tag will usually take everything between the [spoiler]...[/spoiler] tags and either hide it away in (maybe it's hidden in an Iframe tags on some forums), and on other forums they might just make all the text in the spoiler to be the same color as the background of the message post so that while you see blank space in the message, it's not truly hidden until you click a button, but rather hidden in the sence that you have to run your mouse over the text and highlight it to read it.

Personally I'd love to see a way for a user to use the [spoiler]text here[/spoiler] tags and have the contents between the spoiler tags be completely hidden until the reader clicks a link or button that would reveal the text.

I'm thinking javascript and a division block that can be hidden or shown might do the job, I use these in my Glinks installation so I'll try to just copy and paste the necessary code into the tag components and see what happens, I think it quite likely that I'll be defeated by any html code robbing protections that are in place in my forums will prevent me from fully realising my dreams of a spoiler tag.

I'll try since it's copy and paste, but if someone else has already invented this wheel and can share it, please do so when you can.

Thanks,
Weston.

Last edited by:

Westin: May 19, 2009, 12:54 PM
Quote Reply
Re: [Westin] Spoiler code would be really useful. In reply to
Here's something really basic:

tag:
Code:
spoiler

html:
Code:
<div class="spoiler">
<h4 class="spoiler-title">Spoiler <a href="#" onclick="var sp = this.parentNode.parentNode; var spc; for (var i = 0; i < sp.childNodes.length; i++) { if (sp.childNodes[i].className == 'spoiler-content') { spc = sp.childNodes[i]; break; } } if (spc) { spc.style.display = spc.style.display == 'none' ? '' : 'none' }">(Click to view)</a></h4>
<div class="spoiler-content" style="display: none">

closing html:
Code:
</div>
</div>

markup type: Text Block

Clear spaces: Yes

Ideally, you'd move all that javascript into a separate file and even better would be to use jQuery instead (if you were already using it on your site), and do something like switch it from saying Show, to Hide. And of course style it.

Adrian
Quote Reply
Re: [brewt] Spoiler code would be really useful. In reply to
Thanks for that.

Works well in Internet Explorer, but only works (for me anyway) in Firefox when "previewing" the message before posting. After posting the message Firefox doesn't show the contents of the spoiler.
Quote Reply
Re: [Westin] Spoiler code would be really useful. In reply to
Okay, so heres what I've been using and tried and works limited in both browsers:

Code:

<script type="text/javascript">

function toggleIframe(target) {
targetLayer = document.getElementById(target).style;
targetLayer.display = (targetLayer.display == "none") ? "" : "none";

}
</script>
<div class="nicetext">SPOILER:
[<a href="javascript:toggleIframe('iframetextdeck');">show</a>] | [<a href="javascript:toggleIframe('iframetextdeck');">hide</a>]</div>

<div id="iframetextdeck" style="display: none;">
<div>


closing tag code:
Code:

</div></div>


When I say it works limited, it's not a problem with the code, but rather what the advanced Gforum editor does to the content when editing your own post again:

A problem with this is that when a person uses the advanced editor (or the basic for that matter) to edit their post, the system has already translated the [spoiler][/spoiler] tags to what is going to be written on the page. However this then means it's going to translate it even further and just mess up the actual code. So it only works on the initial posting of a message, beyond that if the person edits their post again, they would need to cut out all the extra crap that Glinks puts into the message and re-enter the spoiler tags again to get it functioning again. Far less than an elegant solution and probably one that most people wont want on their own forums for not wanting to hassle the users with this.

Last edited by:

Westin: May 20, 2009, 3:48 AM
Quote Reply
Re: [Westin] Spoiler code would be really useful. In reply to
A note on my code above for anybody that is going to use it: The show | hide links both do the same exact thing, if you clicked on show once it would show the hidden content, if you clicked show again it would hide the content, the same goes for hide, click hide once it shows the content, click again it's hidden again. This is done purely as a visual aid to the user so that they have someplace to close the spoiler content if they wish to do so. The other thing to keep in mind though, is that I believe that if multiple people use a spoiler tag in their messages on the same page, then clicking once is going to try to open all of them instead of the one.

The only way around that which I can see is to force the user to enter something like what's below. Alternatively, one could setup a button to show on the basic editor so that they can just click a "spoiler" button to input [spoiler NOW] for them However, with the way the forums work, that means they don't really see a button marked Spoiler, they see a button marked spoiler NOW which looks too odd and would make people wonder what it does. So many little problems using this forum.

[spoiler NOW]
content here
[/spoiler]

Where NOW would automatically get the date or time inserted so that it would be distinctly different than anybody elses. However this would likely need some extra coding that I just don't have the knowledge to do.

Last edited by:

Westin: May 20, 2009, 3:50 AM