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.

[IggyP]

thanks...i have gotten it to work but i have one issue...my site is https, and only pdf with links also https will display

is there a way to embed both https and http pdfs?

[shimei]

Originally Posted by IggyP

thanks...i have gotten it to work but i have one issue...my site is https, and only pdf with links also https will display

is there a way to embed both https and http pdfs?

You mean like the image proxy built into the advanced editor, but for pdf?

[BirdOPrey5]

Originally Posted by IggyP

thanks...i have gotten it to work but i have one issue...my site is https, and only pdf with links also https will display

is there a way to embed both https and http pdfs?

That's not a problem with this, just most browsers set set to hide insecure content on when browsing secure pages. Whether it was an image or PDF or video, if it isn't from an htps source it won't display.

There's nothing int he code that forces http. If your provide an https link to a PDF no reason it wouldn't work.

<div align="center">
<p align="center">
<embed src="{param}" type="application/pdf" width="700" height="900">
<br />
<a href="{param}">Click here to view or download the file directly.</a>
<br />
</embed>
</p></div>

However not every site supports https so you're limiting the content you can embed, but it's the same limitation you always had.

When you use the code you can leave the http off the URL and instead of:

[pdf]http://www.qapla.com/ju/PDFOpenParameters.pdf[/pdf]

use

[pdf]//www.qapla.com/ju/PDFOpenParameters.pdf[/pdf]

That will automatically fill in the http or https depending on what the page is using at the time it is viewed, the only problem is not all content is accessible via both an http and https link so some things may work one way but not the other.

[IggyP]

hmm..i see...sorry to discuss here nothing to do with spoilers but ya the https embeds work perfectly but its a problem because the majority of sources are not https...and with my vb5, i tried a way like to attach the pdf, then re-edit the post to include that link from my own https but that also failed to embed, although in a different error...and of course it is confusing to members because it lists an option to insert, which also does not work other than as a download link...

so even for a long harder way is it possible to embed a common pdf at all or am i limited only to those listed on other https sources?

thank you for info and sorry for the off topic

[kurniawands]

Works very well. Installed with a little changes on the looks Thank you...

[Ashlar217]

Is is 'Hidden' txt font color determined by the BBcode or the board theme? The spoiler code works fine in 5.2.4. Just can't read the text once revealed lol

[BirdOPrey5]

Originally Posted by Ashlar217

Is is 'Hidden' txt font color determined by the BBcode or the board theme? The spoiler code works fine in 5.2.4. Just can't read the text once revealed lol

Should be set by the board text color but if you want to set a custom color use this as the replacement instead:

<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="color: red; 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>

Change the color: red; code to any color or color code you want.

[noypiscripter]

What if you just want to hide one or two phrases or sentences as a spoiler in a paragraph and still keep the continuity of the sentences? For example.

I just saw this awesome movie called Titanic! Anyone else see it? I can't believe [sa]Leonardo DeCaprio dies!!![/sa]. How did you like them apples!?!?!

In my own Spoiler BB Code, I preserve the layout of the entire text and make the spoiler text clickable to hide/show itself.

[BirdOPrey5]

Not something I ever personally needed but if you like it, glad you made it.

[Fleiding]

Awesome!