Reply
Thread Tools Display Modes
#1
Old 06-08-2011, 08:26 PM
Charter Member
Join Date: Mar 1999
Posts: 19,294
How do you do your spoiler tags?

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.
#2
Old 06-08-2011, 08:59 PM
Charter Member
Join Date: Nov 2000
Location: Riding my handcycle
Posts: 33,069
[spoiler] text [/spoiler} < This you change to a straight bracket.
#3
Old 06-08-2011, 10:54 PM
Charter Member
Join Date: Mar 1999
Posts: 19,294
Quote:
Originally Posted by runner pat View Post
[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.
#4
Old 06-08-2011, 11:09 PM
Guest
Join Date: Aug 2008
Location: "Hicksville", Ark.
Posts: 33,122
<nevermind>

Last edited by BigT; 06-08-2011 at 11:10 PM.
#5
Old 06-09-2011, 12:52 AM
Charter Member
Charter Member
Join Date: Aug 2000
Location: ♂ San Jose, CA
Posts: 10,239
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).

Code:
<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:

Code:
<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.
#6
Old 06-09-2011, 01:43 AM
BANNED
Join Date: Jan 2003
Location: England, Britain, UK
Posts: 18,480
Quote:
Originally Posted by runner pat View Post
[spoiler] text [/spoiler} < This you change to a straight bracket.
[spoiler]Personally I hate wiggly brackets[/spoiler]
#7
Old 06-09-2011, 02:50 AM
Charter Member
Charter Member
Join Date: Apr 1999
Location: Up The Wrong Twee
Posts: 6,774
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.

Code:
<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>
#8
Old 06-09-2011, 12:48 PM
Guest
Join Date: Nov 2000
Location: Upstate New York
Posts: 9,335
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:

Code:
<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://cyburbia.org/forums/image...or/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
#9
Old 06-09-2011, 10:21 PM
Guest
Join Date: Aug 2008
Location: "Hicksville", Ark.
Posts: 33,122
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.
#10
Old 06-09-2011, 10:50 PM
Charter Member
Join Date: Mar 1999
Posts: 19,294
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)
#11
Old 06-10-2011, 04:46 PM
Charter Member
Join Date: Mar 1999
Posts: 19,294
Quote:
Originally Posted by Giraffe View Post
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).

Code:
<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:

Code:
<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.
Quote:
Originally Posted by SkipMagic View Post
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.

Code:
<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>
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?
#12
Old 06-10-2011, 04:49 PM
Charter Member
Charter Member
Join Date: Aug 2000
Location: ♂ San Jose, CA
Posts: 10,239
Quote:
Originally Posted by OpalCat View Post
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?
#13
Old 06-10-2011, 06:02 PM
Charter Member
Join Date: Mar 1999
Posts: 19,294
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.
#14
Old 06-10-2011, 06:13 PM
Charter Member
Charter Member
Join Date: Aug 2000
Location: ♂ San Jose, CA
Posts: 10,239
Quote:
Originally Posted by OpalCat View Post
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?
#15
Old 06-10-2011, 06:22 PM
Charter Member
Join Date: Mar 1999
Posts: 19,294
Ah yes, I think we have javascript disabled. Let me find where that would be...
#16
Old 06-10-2011, 06:24 PM
Charter Member
Join Date: Mar 1999
Posts: 19,294
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!
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 10:23 PM.

Copyright © 2017
Best Topics: damian lewis mouth 12v rectifier nancy cartoon us message board medieval setting esurance payment lord sir frozen wart alcohol in humidifier six foot bathtub the weeping frenchman extremely dry nose cistern water delivery sloth claws dangerous dick euphemisms colonoscopy one liners flip stereo fraternal grandmother definition maaco quality costco cakes reviews 60s bras yoda's fighting style boys pads hung munchkin twcc.com/security beelzebub satan lucifer coordinator vs manager ear wax taste flat thermos claude rix wingmusic.co.nz wiki la cucaracha marijuana vcr fast forward smoke stacks on trucks standard deviation of averages hon file cabinet lock pick giving yourself oral sex as nervous as a how many nipples do cows have grilling steak on cuisinart griddler orela civil rights test what is the difference between borax and boric acid european car brands in usa what does a second do in a duel does your brain tell your heart to beat king of the hill peggy skydiving socially conservative economically liberal parking wrong way on street vegas live sex shows smoke detector going off origin password reset email why do tv shows have mid season breaks song with i dream of jeannie beat smoke detector alarm going off bite your thumb meaning what color is fresh automatic transmission fluid does my phone number spell anything what does valerian smell like is it illegal to jailbreak a firestick wrong mail delivered to my house can you put mulch over grass rite aid narcotic refill policy dine and dash laws teaching to the middle why do animals fear humans