BB Code Enhancements - Spoiler Alert BB Code - New Look for VB5

This is based on an old spoiler code widely available as "Reusable Code" in the VB 3.x days but since removed. It has been updated with new colors, rounded borders, and shadows for new look and fully compatible with VB5.

This is a BB Code to hide content from people who don't want to accidentally see it- usually used for "spoilers" about TV Shows, Movies, or sporting events.

Live Demo: http://www.qapla.com/mods/showthread...-Spoiler-Alert

Closed State:



Open State:



Nested (on VB5):



Tested and working on VB 3.x, 4.x, and 5.x!
Tested and working in Chrome, IE, Opera, and Safari

Note- Because it uses JavaScript you must refresh the page after submitting a post so the JS loads correctly. Other people viewing the post after you will not have any problems.

This BBCode relies on a background image (bop5-alert-bk.png) that must be uploaded to your /images/misc/ folder.



To install download the XML if you have the BBCode XML importer or add a custom BBCode with these settings:

Title: Spoiler Alert
BB Code Tag Name: sa
Replacement:

<div style="margin: 5px 20px 5px 20px;"> 
<div style="margin-bottom:2px; font-size: 80%;">
<strong>Spoiler Alert! </strong><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 style="background: url(images/misc/bop5-alert-bk.png); margin: 0px; padding: 6px; border: 3px groove red; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);">
<div style="display: none;"><div style="background: rgba(255, 255, 255, 0.8); padding: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">{param}</div></div>
</div>
</div>

Example: [sa]Spoiler Example[/sa]
Description: This is a Spoiler BBCode to hide content until someone clicks on it.
Use {Option}: No

Button Image: (Image attached)

Remove Tag if Empty: Yes
All other settings: No


---


Please "Mark as Installed" if you use this.


NOTE: Do not download the .xml fie unless you have the old obscure mod for VB 3.x to allow BBCode Importing via XML. This is NOT a VB Product file and will not import for 99.9% of you. Use the manual instructions instead. I only included the file because there is a rule where every mod thread is technically supposed to have an attached file to download.

[DemOnstar]

Originally Posted by online68

Two quick questions. Does this work with vB5.1.9? Also, can photos/videos also be uploaded to the spoiler section other than just text?

Yes, they can. . .BOP5 always does a good job...

[BirdOPrey5]

Originally Posted by IggyP

you know what would be suuuuper coooool?

usergroup or password protection on these...

that possible at all?? like usergroup id in code or something somehow?

Not possible with BB Code... would need some sort of add-on to do that, if it's even possible in VB5.

[IggyP]

meh, would be pretty tight but not critical or anything..

thanks for this anyway, installed

[online68]

Two quick questions. Does this work with vB5.2? Also, can photos/videos also be uploaded to the spoiler section other than just text?

[shimei]

Originally Posted by online68

Two quick questions. Does this work with vB5.2? Also, can photos/videos also be uploaded to the spoiler section other than just text?

Yes and Yes. Check out an example here: https://www.christforums.org/forum/n...dvanced-editor

[online68]

Originally Posted by shimei

Yes and Yes. Check out an example here: https://www.christforums.org/forum/n...dvanced-editor

Awesome!! Thanks.

[teddyvgt]

goog job!

[teddyvgt]

hi
buddy http://www.qapla.com/mods/showthread...e-Embedded-PDF vbulletin 5.x no work ,pls Repair.

[IggyP]

Originally Posted by teddyvgt

hi
buddy http://www.qapla.com/mods/showthread...e-Embedded-PDF vbulletin 5.x no work ,pls Repair.

that would be pretty nice if possible..

[BirdOPrey5]

Originally Posted by teddyvgt

hi
buddy http://www.qapla.com/mods/showthread...e-Embedded-PDF vbulletin 5.x no work ,pls Repair.

You have to use the manual installation instructions (in the 2nd post) and it should work fine. I installed and tested it here: http://sedona.vbulletin.net/forum/te...?p=434#post434