1 (edited by hypnotoad 2005-05-11 21:01)

Topic: Spoiler tag BBCode built in?

I tried to add the spoiler tag mod posted in the mod forum on my site (running 1.2.5) but to no avail.  I was wondering if it would be possible in a future release to include this bbcode, as I don't think it would be too intensive.  Basically, I'm envisioning a black background and black text for the spoilered text.  When you rollover the text with the mouse, it would turn white and reveal the spoiler.  Most of this would probably be accomplished with the style sheets, but there needs to be some php to parse the [spoiler] tags.

If you do not want to include this, could you give me guidance on how to incorporate this into my site?  I imagine it will most likely just reside in the includes\parser.php file.

2

Re: Spoiler tag BBCode built in?

If you want such a thing to work with Internet Explorer just using css (no javascript) then the spoiler tag will have to be an empty <a> tag as nothing else recognises :hover e.g <a class="spoiler" href="#">Some spoiler text</a>. Maybe somebody can work out how to put that in parser.php.

The stylesheet should then be something like this
a.spoiler:link, a.spoiler:visited {background-color: #000; color: #000}
a.spoiler:hover {color: #fff}

If you wanted the spoiler text to display as a block rather than inline just add
a.spoiler {display:block}

Re: Spoiler tag BBCode built in?

Ah...much better on the style sheet side. 

Here's hoping someone can hack that code into the parser.php file.  I don't think this would bog down punbb, and I think it would be a fairly commonly used feature on several forums.  Its nice to be able to spoiler secrets about games, movies, and books out so you don't ruin anything for anyone.

4

Re: Spoiler tag BBCode built in?

Is this something like you had in mind
http://www.post21.co.uk/pun12/viewtopic.php?pid=7#p7

5

Re: Spoiler tag BBCode built in?

wow thats cool paul how did you do it

6

Re: Spoiler tag BBCode built in?

Its just a cheap trick using an empty link but it does have a side affect, if you click on the text you end up back at the top of the page smile

This is another one of those things that is really easy in other browsers because you can use :hover on any tag.

Re: Spoiler tag BBCode built in?

The a tag has *nothing* to do here. IE doesn't handle hover on non anchor element, so be it. The best way to do this, is with 3 levels :

- first, the text with the same color and background. TO read it, you have to select it.
- second, if the reader use any modern browser, the hover css rule
- third, if it has javascript activated, you can use js to display it/hide it better.

But only in that order.

8 (edited by hypnotoad 2005-05-12 15:34)

Re: Spoiler tag BBCode built in?

Paul wrote:

Is this something like you had in mind
http://www.post21.co.uk/pun12/viewtopic.php?pid=7#p7

This is EXACTLY what I was thinking of.  How did you implement this?  This is done via BBcode, correct?  Can I get some instruction on how to get this going on my site?  Thanks in advance.

Edit:  I posted on the test forum over there.  I was thinking of using bbcode tags to make it all happen.  Also, do these work inline?  If so, that'd be great.  Thanks for all your efforts here.

9

Re: Spoiler tag BBCode built in?

Jérémie wrote:

The a tag has *nothing* to do here. IE doesn't handle hover on non anchor element, so be it. The best way to do this, is with 3 levels :

- first, the text with the same color and background. TO read it, you have to select it.
- second, if the reader use any modern browser, the hover css rule
- third, if it has javascript activated, you can use js to display it/hide it better.

But only in that order.

True, but I was trying to make it work in IE without scripting. Possibly the best way it to use your first and second steps e.g. make a span with :hover and then using a script to make IE emulate hover.

Re: Spoiler tag BBCode built in?

why not make is like in some vbulletin boards, to see the spoiler one have to select the text...instead of hoovering over it (hoover may also be done accidently, selecting is harder to do accidently)

(also, making a link is IMHO just a hack, just using something to do something it's not supposed to do .... i.e. such things are IMHO most likely to be things that will freak out at a later date, when new softwares/revisions come)

Re: Spoiler tag BBCode built in?

vBulletin uses rollovers as far as I'm aware.  I'm on a large forum using vBulletin and this is how it functions there.  Perhaps they modified it to work that way.  *shrug*

Re: Spoiler tag BBCode built in?

http://forum.rscnet.org/ use select on their [spoiler][/spoiler] tag

Re: Spoiler tag BBCode built in?

Frank H wrote:

http://forum.rscnet.org/ use select on their [spoiler][/spoiler] tag

Ah...SA must have custom coded their spoiler tags, cause they use vBulletin and have rollover tags.

Re: Spoiler tag BBCode built in?

I'm using it on my forum : http://ckkoshi.free.fr/punbb/viewtopic.php?id=56
Just using basic css :hover, for msie, select the text display it.

Sorry for my french english.
GT4 Club driver France & Forum - Lingerie.

Re: Spoiler tag BBCode built in?

Ok...with a little bit of digging and trial and error, I got a rollover spoiler mod put together.  Its actually quite easy.

Open Parser.php
---------------------------------------------------------
Find around line 66:

'#\[img\]\s*(.*?)\s*\[/img\]#is',

After, add:

'#\[spoiler\]\s*#i',
'#\s*\[/spoiler\]#i',

---------------------------------------------------------
Find around line 77:

'[img]$1[/img]',

After, add:

'[spoiler]',
'[/spoiler]',


---------------------------------------------------------

Find around line 324:

'#\[email=(.*?)\](.*?)\[/email\]#',

After, add:  

'#\[spoiler\](.*?)\[/spoiler\]#',


---------------------------------------------------------

Find around line 335:

'<a href="mailto:$1">$2</a>',

After, add:

'<span class="spoiler" onmouseover="this.style.color=\'#FFFFFF\';" onmouseout="this.style.color=this.style.backgroundColor=\'#000000\'">$1</span>',

Save, upload.

Then in each of your style sheets, add the following: 

.spoiler {COLOR: black; TEXT-DECORATION: none; background-color: black; font-weight: normal;}

Save/upload and you're done.  Works as follows [spoiler]spoiler text here[/spoiler].

To see it in action, you can visit http://forums.pokerpeeps.net.  You'll have to register, though. sad

Re: Spoiler tag BBCode built in?

In testing, it seems to break if I put a carriage return or two in.  Odd that.  Does punbb handle carriage returns as < p > tags or something similar that would break the span?

17

Re: Spoiler tag BBCode built in?

Line breaks are <br />.

18

Re: Spoiler tag BBCode built in?

Just a thought about the empty <a> - If you set the cursor to default, people will be less likely to actually click the text, no?

Re: Spoiler tag BBCode built in?

Paul wrote:

Line breaks are <br />.

Forgive my ignorance, but does that break a span tag?  I wouldn't think it would.

20 (edited by Sander D. 2005-07-15 14:15)

Re: Spoiler tag BBCode built in?

Could this spoiler tag be implemented in a new version of PunBB, instead of a mod? I think it's useful for many forums, and it doesn't really decrease the performance of PunBB, I think.

I'm using this code at my forums now:

// After $b[] = '[ code]$1[/ code]'."\n"; (line 78)

$a[] = '#\[spoiler\]\s*#i'; $a[] = '#\s*\[/spoiler\]#i'; $b[] = '[spoiler]'; $b[] = '[/spoiler]';

// After '<span style="color: $1">$2</span>'); (line 332)

$text = str_replace('[spoiler]', '</p><div class="codebox incqbox spoiler"><h4>Spoiler <span style="font-weight:normal">(click the black bar to read the text)</span></h4><p style="background:black;color:black" onclick="this.style.color=(this.style.color==\'black\'?\'white\':\'black\')">', $text);
$text = preg_replace('#\[\/spoiler\]\s*#', '</p></div><p>', $text);

It still isn't ideal, but it works when using multiple paragraphs. It doesn't work well when you use a link or an image.

Re: Spoiler tag BBCode built in?

Well, it would serve no purpose at all in, for example, these forums, so I'm not so sure.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

22 (edited by Sander D. 2005-07-16 09:56)

Re: Spoiler tag BBCode built in?

Okay, but the [ code]-tags don't serve any purpose at both of my non-technical forums. I think there are many forums where people talk about books, movies, tv series and computer games. Those discussions often contain spoilers.

23

Re: Spoiler tag BBCode built in?

Sander D. wrote:

Okay, but the [ code]-tags don't serve any purpose at both of my non-technical forums. I think there are many forums where people talk about books, movies, tv series and computer games. Those discussions often contain spoilers.

you have a point there

Re: Spoiler tag BBCode built in?

there's one difference, the code tag can be used for more than just code ... I'm using it to format some tables with data in columns (for F1, practise sessions and times and such) ... as it's fixed with it's easier to read data out of it, othervise one would probably need to attach images or something to show data in table format ...

25

Re: Spoiler tag BBCode built in?

I have spoilers on my forums, and I use the following code:

<span style="background-color: #000000; color: #000000; margin: 0px; padding: 0px" onmouseover="style.background='#ffffff'" onmouseout="style.background='#000000'">Hidden text</span>

You can see it here in my anime site forums:
http://forums.tenkai.net/viewtopic.php?pid=7031#p7031 (Login as test/test)

However, text and links are still visible unless they are black. (I suppose you could change the color of the spoiler area to the same as the links/text to cover the appropriate color.)