Spoiler Tag

[YdieresiS]

I have been on this forum for a while and have used different spoiler tags, but the tags didn't sattisfied me. So i made my own spoiler tag.

This is a BB Code tag. It has to be installed in your BB code manager.

Enter the vbulletin administrator panel.
Navigate to Own BB codes.
Go to add BB code and fill in the following items.

Title: Spoiler
Tag: spoiler
Replacement: <div class="tcat" colspan="3">
Spoiler
</div>
<div style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;">
<span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffff ff'">
{param}
</span>
</div>
Example: blabla
Description: This items show only the text when you move the mouse over it.

The code and style of it might be made better, but it does what it is made for.

I use this on the latest version of vBulletin (3.7.0) but it works on all versions.

I hope this is usefull for you guys. If you used it please click install so i can see if it comes in handy.

For those of you who want an example, here is it: Live Demo (http://www.nationaalcomputerforum.nl/showpost.php?p=372316&postcount=3) (dutch forum)
The first spoiler tag is my own tag, the second is this one: Invision Board Styled Spoiler Tag (https://vborg.vbsupport.ru/showthread.php?t=181059&highlight=spoiler)

And excuse me for my English, didn't used it much the last time.

[YdieresiS]

Reserved

[Boofo]

A text file would be nice to be able to refer back to in case it is needed to be re-installed again. ;)

[YdieresiS]

I added a text file with the text for the BB code in it.

[Boofo]

Thank you, sir. ;)

Is there a way to make the whole box mouse over instead of just the part with the test in it? If you have this one a wide skin the box goes all the way across the screen. Can the box either be short ended or the whole box reacts to the mouse over? Does that make any sense at all? ;)

[Freesteyelz]

Did you try setting the onmouseover in the div tag?

[Boofo]

No, but you know me, I'd screw it up somehow. Can you show me, sir?

[Freesteyelz]

I could if I had installed the mod. :D

Anyway, replace the code with:


<div class="tcat" colspan="3">
Spoiler
</div>
<div style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;cursor:pointer">
<div class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffff ff'">
{param}
</div>
</div>



I added the cursor hand when hovering over the div. :)

[Boofo]

That worked perfect, sir, thank you. ;)

Now, is there any way to make the box only as long (or a little longer) as the text is instead of across the whole page? LOL

[Freesteyelz]

There are two versions.

1st version:

The code below will show the Spoiler title at the top of the spoiler text.


<div style="margin:10px 0">
<div style="margin-bottom:7px"><span style="padding:3px" class="tcat">
Spoiler</span></div>
<div>
<span style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;cursor:pointer">
<span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffff ff'">
{param}
</span>
</span>
</div>
</div>



*Please note this is only an edit of YdieresiS' mod. All credit goes to him.

[Freesteyelz]

In the second version there's a difference. First, there's no Spoiler title. Secondly, text outiside of the Spoiler tag will not be above or below but at the side of the text. Basically, it will appear exactly how you posted it. Of course if you post any text with spaces it will create a line break.

2nd version (of 1st version in post #10}:

Code:


<span style="background-color:#fff;color:#fff;border:1px solid #cccfdd;cursor:pointer" class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundcolor='#ffff ff'">
{param}
</span>



*Please note this is only an edit of YdieresiS' mod. All credit goes to him.

[Boofo]

I like the way we had it except for going across the whole page. So, should I use the first one then? I don't want someone accidentally messing it up with and breaks in the line.

[Freesteyelz]

Yup. The first version (post #10) would be comparable with the original mod + your request. :)

[Boofo]

Will that handle multiple lines ok?

[Boofo]

No, it won't. :(

Any way to fix that or make it so they can't go after so many characters?

[Freesteyelz]

You can by using overflow. Before you do that, try the updated code in post #10 again. I think the padding caused multiple lines to mess up.

[EvErDrEaMs]

great thanks.

[Boofo]

You can by using overflow. Before you do that, try the updated code in post #10 again. I think the padding caused multiple lines to mess up.

That one will work, I think. The overflow would cut stuff off wiouldn't it?

[Freesteyelz]

Depends. In all of my threadbit templates I have overflow set but it only cuts off continuous characters (text or image URL's) but will allow the text to go to the next line fine.

[Boofo]

Text is all I want to do with this anyway. Would it still be a separate line for each break?

[obmob]

Nice going... anyone has a clue on how to make this sopiler look like the one i show in the attachments? :D

[Freesteyelz]

Text is all I want to do with this anyway. Would it still be a separate line for each break?

I think so but I can't say it with confidence as I didn't test it. :D

[avsunforum]

thanks :))

[Boofo]

I think so but I can't say it with confidence as I didn't test it. :D

Let's take this to PM as not to clutter up the thread anymore, sir. And send me the code for the overflow, please. ;)

[YdieresiS]

Nice going... anyone has a clue on how to make this sopiler look like the one i show in the attachments? :D
That was what i was looking for in the first place, but i couldn't get that to work. I had the whole thing with javascript and css, but it only worked with one spoiler tag per page. On my forum they use a lot of this tag on one page and bij clicking the link it dit open al spoiler tags, not quite what i wanted. So i made this one and this one is good for what i use it for on our forum. If someone can fix a thing like that, please let it know.

Let's take this to PM as not to clutter up the thread anymore, sir. And send me the code for the overflow, please. ;)
If you two get a solution to it, let it know please, so i might update the whole spoiler tag.

[Boofo]

If you two get a solution to it, let it know please, so i might update the whole spoiler tag.

Will do. I think we are close. ;)

[obmob]

That was what i was looking for in the first place, but i couldn't get that to work. I had the whole thing with javascript and css, but it only worked with one spoiler tag per page. On my forum they use a lot of this tag on one page and bij clicking the link it dit open al spoiler tags, not quite what i wanted. So i made this one and this one is good for what i use it for on our forum. If someone can fix a thing like that, please let it know.Oh... i see... well, i'll take a look and compare with the one i'm using at the moment, will let you know if it works :D

[binevi]

is it possible to allow users to choose any title instead of Spoiler on the table ?

[YdieresiS]

is it possible to allow users to choose any title instead of Spoiler on the table ?

Yes this is possible.

If you use the things as posted before and change this:
Use {option} -> yes.
Replacement:
<div class="tcat" colspan="3">
{option}
</div>
<div style="background-color:#fff;color:#fff;border:1px solid #CCCFDD;">
<span class="spoiler" onmouseover="this.style.color='#000000';" onmouseout="this.style.color=this.style.backgroundColor='#ffff ff'">
{param}
</span>
</div>
Example Testing

But in this case you always have to fill the option [Spoiler=Title]

It is possible but i wouldnt reccomend it.

[Boofo]

Just change the word spoiler to whatever you want in the code when you enter it in the Admin CP.

[YdieresiS]

It was asked if it was possible for a user to do this, when you change spoiler while entering this in the admin CP, it is not changable for the user.

[Boofo]

Sorry, I was thinking by user they meant user of the hack, Admins. I digress. ;)

[YdieresiS]

Now we have both options posted here :) Maybe just better so.

[DaninMS]

Installed. Thx !

[michael5472]

installed thank you works nicely

[irfreedownload]

hi! nice!
how put a icon for Spoiler Tag
in editor ?

[odeezie]

hi! nice!
how put a icon for Spoiler Tag
in editor ?

I am looking for teh same image.

[KempoMRK]

Installed. Works perfectly. Good job man.

[aramiK89]

dlete.

[pab]

Thanks a lot for this one, it's superior to the one I was using before. But I was wondering if you intend to release the code you are using on the demo page? Cause that is what I really want, cause right now images aren't being hidden.

[YdieresiS]

The one i use on the demo page is this one:
https://vborg.vbsupport.ru/showthread.php?t=181059&highlight=spoiler

I found it and installed it, because i liked it :)

[YdieresiS]

hi! nice!
how put a icon for Spoiler Tag
in editor ?
I didn't included a icon, but if you have one and want to put it there, it is possible.

Go to admin CP
BB codes and go to the spoiler tag, edit it.

Upload a image to your webspace and locate the URL to it. Paste this URL in de box after: Button Image (Optional). If you have done this correct, it wil add a button and show it in your editor box.

Good luck.