PDA

View Full Version : BB Code Enhancements - Spoiler Alert BB Code - New Look for VB5


BirdOPrey5
10 Mar 2013, 17:37
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:

http://www.vbulletin.org/forum/attachment.php?attachmentid=144098&stc=1&d=1362933168

Open State:

http://www.vbulletin.org/forum/attachment.php?attachmentid=144099&stc=1&d=1362933168

Nested (on VB5):

http://www.vbulletin.org/forum/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.

http://www.vbulletin.org/forum/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('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: 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
10 Mar 2013, 17:41
Reserved.

WhiskeyOSS
11 Mar 2013, 14:34
XML would not load in vb5.0.0

BirdOPrey5
11 Mar 2013, 17:33
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
12 Mar 2013, 21:43
Nice Thanks!!

fariborz khan
09 Sep 2014, 01:08
is it work in responsive style of vb5?

emendrael
27 Jan 2015, 14:41
Hell yeah, nice ! :)

donnyaz
06 Feb 2015, 21:27
no xml to install and the BB Code works great

online68
24 Nov 2015, 03:47
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
25 Jan 2016, 11:46
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
26 Jan 2016, 16:42
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
26 Jan 2016, 19:17
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
26 Jan 2016, 22:44
meh, would be pretty tight but not critical or anything..

thanks for this anyway, installed :)

online68
15 Feb 2016, 21:01
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
15 Feb 2016, 21:23
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
18 Feb 2016, 03:39
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
18 Feb 2016, 09:31
goog job!

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

IggyP
18 Feb 2016, 10:41
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
19 Feb 2016, 00:21
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
19 Feb 2016, 01:02
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
19 Feb 2016, 08:32
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
19 Feb 2016, 13:53
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
19 Feb 2016, 20:45
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
24 Feb 2016, 06:18
Works very well. Installed with a little changes on the looks :) Thank you...

Ashlar217
27 Oct 2016, 08:03
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
27 Oct 2016, 10:43
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
03 Nov 2016, 22:35
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
07 Nov 2016, 02:00
Not something I ever personally needed but if you like it, glad you made it.

Fleiding
19 May 2018, 16:22
Awesome! :)