vb.org Archive - BB Code Enhancements - Spoiler Alert BB Code

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 5.x Products & Extensions (https://vborg.vbsupport.ru/forumdisplay.php?f=258)

- - BB Code Enhancements - Spoiler Alert BB Code - New Look for VB5 (https://vborg.vbsupport.ru/showthread.php?t=295963)

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:

https://vborg.vbsupport.ru/attachmen...1&d=1362933168

Open State:

https://vborg.vbsupport.ru/attachmen...1&d=1362933168

Nested (on VB5):

https://vborg.vbsupport.ru/attachmen...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/attachmen...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:

Code:

<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.

XML would not load in vb5.0.0

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.

is it work in responsive style of vb5?

Hell yeah, nice ! :)

no xml to install and the BB Code works great

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?

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?

Quote:

Originally Posted by online68 (Post 2559279)

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...

Quote:

Originally Posted by IggyP (Post 2563387)

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.

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

thanks for this anyway, installed :)

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

Quote:

Originally Posted by online68 (Post 2564966)

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

Quote:

Originally Posted by shimei (Post 2564967)

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

Awesome!! Thanks.

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

Quote:

Originally Posted by teddyvgt (Post 2565167)

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..

Quote:

Originally Posted by teddyvgt (Post 2565167)

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

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?

Quote:

Originally Posted by IggyP (Post 2565208)

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?

Quote:

Originally Posted by IggyP (Post 2565208)

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.

Code:

<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.

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

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

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

Quote:

Originally Posted by Ashlar217 (Post 2577328)

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:

Code:

<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.

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.

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

Mod works great thx for this <3

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

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01275 seconds Memory Usage 1,812KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (9)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (32)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: