Spoiler Alert BB Code - New Look for VB5

[BirdOPrey5]

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.php/950-Spoiler-Alert

Closed State:

https://vborg.vbsupport.ru/attachment.php?attachmentid=144098&stc=1&d=1362933168

Open State:

https://vborg.vbsupport.ru/attachment.php?attachmentid=144099&stc=1&d=1362933168

Nested (on VB5):

https://vborg.vbsupport.ru/attachment.php?attachmentid=144100&stc=1&d=1362933168

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.

https://vborg.vbsupport.ru/attachment.php?attachmentid=144101&stc=1&d=1362933559

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('d iv')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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: Spoiler Example
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.

[BirdOPrey5]

Reserved.

[WhiskeyOSS]

XML would not load in vb5.0.0

[BirdOPrey5]

You need to have the BBCode XML Importer mod to use the XML fie. It was an old mod released for 3.x. You probably don't have it so just manually enter the code via the instructions in the post.

[Tyran1]

Nice Thanks!!

[fariborz khan]

is it work in responsive style of vb5?

[emendrael]

Hell yeah, nice ! :)

[donnyaz]

no xml to install and the BB Code works great

[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?

[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?

[DemOnstar]

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]

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]

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/news-and-announcements/10153-spoiler-alert-added-to-advanced-editor

[online68]

Yes and Yes. Check out an example here: https://www.christforums.org/forum/news-and-announcements/10153-spoiler-alert-added-to-advanced-editor

Awesome!! Thanks.

[teddyvgt]

goog job!

[teddyvgt]

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

[IggyP]

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

that would be pretty nice if possible..

[BirdOPrey5]

hi
buddy http://www.qapla.com/mods/showthread.php/31-PDF-BBCode-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/testing-and-other-stuff/353-my-tartufo-test?p=434#post434

[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]

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]

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:

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

use

//www.qapla.com/ju/PDFOpenParameters.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]

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('d iv')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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 Leonardo DeCaprio dies!!!. 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! :)

[Tempritscher]

Mod works great thx for this <3

[mito22]

idea...... and....... make it visible or.... ONLY registred and logged users can see the SPOILER's content?