On the fathom board our spoiler tags look like this:
http://fff.fathom.org/forums/showthread.php?t=52539
we’re running at least as recent a version of vb as you are here… so how’d ya do it? You can email me if you want. I’d really appreciate it as I think the ones here are more convenient.
[spoiler] text [/spoiler} < This you change to a straight bracket.
No, no, you misunderstand my question. I mean the board’s coding. I use spoiler tags on my message board, too, but they don’t have a “hide/show” button, they just make the text the same color as the background. I want to know how they do them here so I can do them the same way on my board.
<nevermind>
I don’t know what code they use to do them here, but I think it’s pretty close to what we use at my board. Here is the code for what we use (just paste it into the relevant section in the Custom BB Codes part of the AdminCP).
<table width="95%" cellspacing="1" cellpadding="3" border="0" align="center"> <tr> <td> <span> <div style="margin:6px; margin-top:5px"> <div class="smallfont" style="margin-bottom:2px"> <input type="button" value="Show Spoiler" 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 Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Spoiler'; }"> </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;"><font color="black"> here are secrets </font> </div> </p> </div> </span> </td> </tr> </table>
Here is what we used to use:
<div id="spoiler"><div><input type="button" value="Show Spoiler" style="width:100px;font-size:12px;margin:10px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" /> <div id="show" style="background-image:none; display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%"> I hate you</div> <div id="hide"></div></div></div>
We ditched these after there was some problem in some case (I don’t remember exactly, it was either a problem with some non-Firefox browsers or they couldn’t be nested), but they do have a different look which some people may prefer.
I’ve posted examples of both in this thread in our garbage forum, feel free to experiment if you want.
[noparse]Personally I hate wiggly brackets[/noparse]
Yeah, I set that up here a couple of years ago. Here’s the code for it. Before you replace the existing HTML in the spoiler BB Code, I’d make a quick copy-and-paste backup in case something goes wonky.
<div style="margin:20px; margin-top:5px">
<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>
<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
{param}
</div>
</div>
</div>
On my site. Not the greatest implementation; I’d prefer to have inline “blacklined” text with hover to reveal the contents, rather than a spoiler box.
Title: Spoiler
BB Code tag name: spoiler
Replacement:
<div style="margin:20px; margin-top:5px;">
<div class="smallfont" style="margin-bottom:2px">Spoiler (highlight to read):</div>
<table cellpadding="7" cellspacing="0" border="0" bgcolor="#000000">
<tr style="width: 100%;"><td style="border:1px inset" bgcolor="#000000"><font class="mf" color="#000000"><SPAN CLASS="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">
{param}</span></font></tr></td></table>
</div>
Description: This SPOILER tag is used to create a text box that will conceal a portion of a post that may include information that may diminish the enjoyment someone else gets from a book, movie, or TV show.
Use {option}: no
Button image: http://www.cyburbia.org/forums/images/editor/spoiler.gif
Remove Tag If Empty: yes
Disable BB Code Within This BB Code: No
Disable Smilies Within This BB Code: No
Disable Word Wrapping Within This BB Code: No
Disable Automatic Link Parsing Within This BB Code: No
It seems odd that, even though you have to add this manually, most places already have it.
Also, I find inline spoilers to also be useful. Setting the font color just isn’t the same.
Thanks guys. I may play around with this when I get some time next week. (This week we have company coming in from out of town)
I had some time to play with this today and I tried it, and while the spoiler box looks fine, when I click on the button nothing happens. The spoiler isn’t shown. What am I doing wrong? Any ideas?
And spoiler tags function correctly for you here and on my site, right? That would rule out a Javascript problem with your browser. Can you provide a link to a thread on your board with the new tags so we can see what they’re doing?
This is with your code, Giraffe:
http://fff.fathom.org/forums/showthread.php?t=52539
And yes, they work in the thread you linked to on your board.
Looking at the source code of that page, something is replacing onClick with *******. Do you have some sort of script-disabling security plug-in installed on your board?
Ah yes, I think we have javascript disabled. Let me find where that would be…
That was the problem! I had totally forgotten about those settings and hadn’t looked at the code, not remembering about all of that. Thanks so much, it’s working now!
