vb.org Archive - Spoiler Tag : Show/Hide

Page 1 of 3

Show 40 post(s) from this thread on one page

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

- vBulletin 3.5 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=155)

- - Spoiler Tag : Show/Hide (https://vborg.vbsupport.ru/showthread.php?t=110598)

ElForro

03-16-2006 10:00 PM

Spoiler Tag : Show/Hide

A CSS/Javascript based spoiler tag for vB 3.5.x (but I think it must work with earlier versions)
Just follow the instructions below or in the .zip file.

I hope you like my first modification!

Instructions
Step 1.
Copy the following into the additional CSS definitions (Admin CP > Styles & Templates > Style Manager > All Style Options>Additional CSS definitions) and paste it into the lower box.

Code:

.pre-spoiler {

    border: 1px solid #B5C0A8;

    margin: 0 15px 5px 15px;

    background: #E3E9DB;

    padding: 3px 5px 3px 5px;

    font-weight: bold;

    text-align: right;

    color: #6A775B;

}

.spoiler {

    background: #E3E9DB;

    margin: 0 15px 15px 15px;

    padding: 5px;

    border: 1px solid #B5C0A8;

}

Step 2.
Now click save and go to the page to add a new BB Code (Admin CP> Custom BB Codes > Add New BB Code) and enter the following:

Title: Spoiler
Tag: spoiler
Replacement:

Code:

<div>

    <div class="pre-spoiler">

    <span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Show" style="width:80px;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.value = 'Show';}">

    </div>

    <div>

        <div class="spoiler" style="display: none;">{param}</div>

    </div>

</div>

Example: [spoiler]test[/spoiler]
Description: Hides text
Use {option}: No
Button Image: Leave empty

Click save and you are done!

Known bugs: You can read the spoiler in the "Thread Preview".

FAQ
Q: I want to change the color that the spoiler tag uses! How?
A: If you know CSS it is all controlled in the CSS definitions.

Stangsta

03-16-2006 10:16 PM

No problems here.

/me clicks install

Stangsta

03-16-2006 10:57 PM

ok, I take that back. Whan you do a thread preview, it shows the contents of the spoiler.

ElForro

03-16-2006 11:02 PM

Do you mean the "Hover Preview" from the Treads list? I didn't think of that... If somebody know how to do it... Please say =)

Stangsta

03-16-2006 11:05 PM

Quote:

Originally Posted by ElForro

Do you mean the "Hover Preview" from the Treads list? I didn't think of that... If somebody know how to do it... Please say =)

Yes, thats exactly it.

Reeve of shinra

03-17-2006 01:02 AM

Very nice spoiler hack!

ElForro

03-17-2006 02:18 AM

Please change the BB Code with this! Now it works great! (except the Preview, Sorry Stangsta, I will try to fix that)

Code:

<div>

    <div class="pre-spoiler">

    <span style="float:left; padding-top: 2px;">Spoiler</span> <input type="button" value="Show" style="width:80px;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.value = 'Show';}">

    </div>

    <div>

        <div class="spoiler" style="display: none;">{param}</div>

    </div>

</div>

The CSS is the same... And with this new code you can post 2, 3, or even more Spoilers on the same post! :D

Hack Updated with the new code!

dirtycrow

03-17-2006 02:27 AM

excellent! thank you soo much!

dirtycrow

03-17-2006 02:30 AM

Quote:

Originally Posted by ElForro

Please change the BB Code with this! Now it works great! (except the Preview, Sorry Stangsta, I will try to fix that)
[/B]

can we please have the english verision?

ElForro

03-17-2006 02:35 AM

What do you mean dirtycrow? It's all in english (well, except my posts that are in BAD english).. But the only "English" words that are in the hack are:
- Spoiler
- Show
- Hide

Edit: Sorry dirtycrow... I've just edited my post... It's all in english now... But again, there're only 2 words to change... Sorry!!

dirtycrow

03-17-2006 02:37 AM

i copied the code in post number 7 and now i don't have show and hide but "mostar" and "Ocultar"

ElForro

03-17-2006 02:39 AM

Sorry again... Now it's all in English... (i forgot to change that words because my forum it's in spanish :P)

dirtycrow

03-17-2006 02:42 AM

ElForro, thank you so much! awesome!

Maryanninva

03-17-2006 07:16 AM

Nice! I just installed!

To keep the spoiler out of the hover, I'm advising my users to have at least three lines of text before putting in the spoiler (may it be words, dashes or whatever).

Snake

03-17-2006 05:09 PM

Thanks, I've installed this! :)

TPOCJames

03-22-2006 11:48 PM

Installed, love it :)

GSX-Racing

03-27-2006 12:18 AM

Installed, thanks.

Was there ever a way to make it not show in thread preview?

ElForro

03-27-2006 12:23 AM

GSX-Racing... I really don't know... But if someone does please help here so we can make this a better spoiler tag =)

GSX-Racing

03-27-2006 12:27 AM

Yeah, that would be sweet.

I tried just putting a period on the first three lines but that didn't work. I guess you have to put the 150 characters (or whatever thread preview is set to) in order to hid the spoiler info.

o0Hubba0o

03-27-2006 12:53 AM

The problem with previous versions of this is it didn't work if Firefox, does this work with all browsers?

ElForro

03-27-2006 01:16 AM

This is my first mod, no previous versions...

This works with (tested)...

MAC:
- Safari
- Firefox
- Opera
- Camino

Windows:
- Firefox
- Internet Explorer
- Opera

G_Man

04-09-2006 06:35 PM

looking good. thanks.

Station

04-15-2006 09:16 PM

As I run a board that centers around anime and games, this was essential to not spoil major details.

Great mod. *clicks install*

DaPro

04-18-2006 03:18 PM

For those of us too lazy to make a button, here is one. It's nothing pretty, just something for you to use, maybe I will make a better one later :-)

thisgeek

04-22-2006 02:17 PM

I've spent quite a bit of time mucking around, and I've come up with the following changes.

I've embedded the CSS within the replacement, so you don't need to go muck around with your styles.

I've also modified the CSS to be a bit more generic - and I've fixed it so that the spoiler doesn't stretch across the entire post. It is as big as the text between the tags.

Code:

<table><tr><td>

<div>

    <div style="margin-bottom: 5px;">

       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">

    </div>

    <div>

        <div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>

    </div>

</div>

</td></tr></table>

I've modified this one so that you can use it inline in a paragraph:

Code:

<span>

    <span style="margin-bottom: 5px;">

       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">

    </span>

    <span>

        <span style="border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>

    </span>

</span>

See this post if you want to see a sample of how it looks.

EDIT: I've cleaned up the code a bit - the toggle should now work in Safari.

GSX-Racing

04-24-2006 03:38 AM

Quote:

Originally Posted by thisgeek

Code:

<table><tr><td>

<div>

    <div style="margin-bottom: 5px;  font-weight: bold; color: #000000;">

       <input type="button" value="Show Spoiler" style="width:80px;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 Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Spoiler';}">

    </div>

    <div>

        <div style="border: 1px dashed #0B198C; padding: 3px; display: none;">{param}</div>

    </div>

</div>

</td></tr></table>

I've modified this one so that you can use it inline in a paragraph:

Code:

<span>

    <span style="margin-bottom: 5px;  font-weight: bold; color: #000000;">

       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">

    </span>

    <span>

        <span style="border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>

    </span>

</span>

See this post if you want to see a sample of how it looks.

Where do these codes get put? In the BBCode?

thisgeek

04-24-2006 03:53 PM

Yeah, it goes in the 'replacement' field.

Tralala

04-24-2006 05:55 PM

Quote:

Originally Posted by thisgeek

I've spent quite a bit of time mucking around, and I've come up with the following changes.
...

See this post if you want to see a sample of how it looks.

Wow, this is really nice! I appreciate you sharing. I especially like the one that can be used "inline." However, the dashed lines make it a bit hard to read.

Previously I was using this:

HTML Code:

<div style="margin:5px 20px 20px 20px">



<div class="smallfont" style="margin-bottom:2px"><b>Spoiler:</b> 



<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 class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">



<div style="display: none;">



{param}



</div>



</div>



</div>

Is there any way to combine the look of both? That is, use your inline version one, but with the recessed/line look (instead of the dashed-border?)

That would be great.

sandra_nz

04-24-2006 07:33 PM

Thanks for this, it looks great!

thisgeek

04-25-2006 04:41 AM

Quote:

Originally Posted by Tralala

Wow, this is really nice! I appreciate you sharing. I especially like the one that can be used "inline." However, the dashed lines make it a bit hard to read.

Previously I was using this:

<snip>

Is there any way to combine the look of both? That is, use your inline version one, but with the recessed/line look (instead of the dashed-border?)

That would be great.

Yes, easily. Just change the style="border: 1px dashed info in the tags to style="border: 1px inset.

Tralala

04-25-2006 04:51 AM

Quote:

Originally Posted by thisgeek

Yes, easily. Just change the style="border: 1px dashed info in the tags to style="border: 1px inset.

Thanks! That gives me a solid line, looking better already.

What I was looking to do however was gain this more subtle "recessed" look... this is what my current spoiler code (pasted above) gives me, but the text can't go inline:

http://homepage.mac.com/joshr/trl/spoiler.jpg

Is something like that possible? The looks of that, but the inline capabilities of yours?

thisgeek

04-25-2006 06:00 AM

I created the following at Tralala's request (I'm not sure if it's quite what he's looking for), but if anyone else is interested, here it is:

Code:

<span>

    <span style="margin-bottom: 5px; background-color: #FFFFFF;">

       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value == 'Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.color = '#FF0000'; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.color = '#FFFFFF'; this.value = 'Show Spoiler';}">

    </span>

    <span>

        <span style="padding: 0 3px 0 3px; color: #FFFFFF;">{param}</span>

    </span>

</span>

The idea is that the text area is still there - ie, hitting the 'show' button won't push the text out the way. If you highlight the spoiler, or push the button, you'll see the text - this is sort of a 'best of both worlds' type spoiler tag. You probably will need to fiddle with the #COLOR values to get it to fit into your theme.

Zelda-King

04-27-2006 10:59 AM

It would be better if this was made to use the stylevar commands so people wouldn't need to customise the colours. Some of us have multiple styles.

Tralala

04-27-2006 12:45 PM

Quote:

Originally Posted by Zelda-King

It would be better if this was made to use the stylevar commands so people wouldn't need to customise the colours. Some of us have multiple styles.

Yah, I noticed that on one of my themes you could still see the spoilerized text a bit... the background is a different shade of white.

hambil

04-27-2006 01:46 PM

Quote:

Originally Posted by ElForro

GSX-Racing... I really don't know... But if someone does please help here so we can make this a better spoiler tag =)

Check the code for the spoiler in my sig. It works for thread preview. Feel free to learn from it and add to your spoiler, I'm not selfish :)

Tralala

04-27-2006 02:51 PM

Quote:

Originally Posted by thisgeek

I've modified this one so that you can use it inline in a paragraph:

Code:

<span>

    <span style="margin-bottom: 5px;">

       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">

    </span>

    <span>

        <span style="border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>

    </span>

</span>

This is my favorite one. How can we make it so that the spoilerized text is a different color? Like blue, or gray? That'd be wonderful.

thisgeek

05-05-2006 04:10 AM

Quote:

Originally Posted by Tralala

This is my favorite one. How can we make it so that the spoilerized text is a different color? Like blue, or gray? That'd be wonderful.

Just adding a "Color" statement to the bottom span tag should do it, as demonstrated below:

Code:

<span>

    <span style="margin-bottom: 5px;">

       <input type="button" value="Show Spoiler" style="width:80px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.value=='Show Spoiler') { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = '';this.innerText = ''; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none'; this.value = 'Show Spoiler';}">

    </span>

    <span>

        <span style="color: Blue; border: 1px dashed #0B198C; padding: 0 3px 0 3px; display: none;">{param}</span>

    </span>

</span>

Tralala

05-05-2006 04:23 AM

Excellent, just what the doctor ordered. So simple, yet so elusive (to me.) Thanks again, thisgeek.

ElForro

05-05-2006 04:29 AM

Thank you all! And sorry about the little problems like the CSS and "Preview"... I'm just an amateur... =)

thisgeek

05-05-2006 04:35 AM

Thanks to you for it initially :D

You can't really do anything about the preview (IMO) since it's controlled by the board. The way around it is to change the amount of characters displayed in the vb option: "Length of Thread Preview Text" located under the "Forum Display Options" group.

Or: The person posting could put their spoiler a bit further in to the post so that it's not snagged into the preview text.

All times are GMT. The time now is 04:54 PM.

Page 1 of 3

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01413 seconds Memory Usage 1,852KB 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 (10)bbcode_code_printable (1)bbcode_html_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: