Go Back   vb.org Archive > vBulletin Modifications > Archive > vB.org Archives > vBulletin 3.5 > vBulletin 3.5 Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Spoiler Tag : Show/Hide Details »»
Spoiler Tag : Show/Hide
Version: 1.00, by ElForro ElForro is offline
Developer Last Online: Sep 2013 Show Printable Version Email this Page

Version: 3.5.4 Rating:
Released: 03-16-2006 Last Update: 03-16-2006 Installs: 206
Template Edits
 
No support by the author.

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.

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #72  
Old 10-15-2007, 02:39 PM
GrendelKhan{TSU's Avatar
GrendelKhan{TSU GrendelKhan{TSU is offline
 
Join Date: Jun 2005
Location: Boston | Seoul, S. Korea
Posts: 1,311
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

installed thanks!!


Quote:
Originally Posted by thisgeek View Post
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>
even better! thank you as well.
Reply With Quote
  #73  
Old 10-17-2007, 06:38 PM
koxito koxito is offline
 
Join Date: Jan 2006
Location: Merida Yucatan
Posts: 46
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Mannn.. this is awasome!! XD
Reply With Quote
  #74  
Old 10-26-2007, 01:06 AM
Mr.Danko Jones Mr.Danko Jones is offline
 
Join Date: Jun 2007
Posts: 74
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Is there a spoiler mod for v3.6.x?

I have the latest v3.6.8. Thanks!
Reply With Quote
  #75  
Old 11-03-2007, 02:14 PM
John3971 John3971 is offline
 
Join Date: Sep 2007
Location: Sweden
Posts: 258
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

how can i changes the show / hide to a text link instead of a button??
Reply With Quote
  #76  
Old 12-04-2007, 10:56 AM
GreysAnatomy's Avatar
GreysAnatomy GreysAnatomy is offline
 
Join Date: May 2005
Location: Chocoland
Posts: 52
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by thisgeek View Post
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.
You are a genius! I've just installed it on my 3.6.8 Patch Level 2 and it seems to work perfectly fine! Thank you!
Reply With Quote
  #77  
Old 12-13-2007, 02:24 PM
chudz chudz is offline
 
Join Date: May 2004
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I am using this code:

Code:
<div>
    <div class="pre-spoiler">
    <span style="float:left; padding-top: 2px;">{option}</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>
and I am using the {option} for entering a title to the spoiler I have enter the CSS given on first post into the addittional CSS in my template. BUT when I post something with two spoiler in it example

[sp="Video 1"]link[/sp]

[sp="Video 2"]link[/sp]

I get this troublesome bug:



Reply With Quote
  #78  
Old 01-28-2008, 02:23 AM
DieselMinded's Avatar
DieselMinded DieselMinded is offline
 
Join Date: Mar 2007
Posts: 1,655
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Links dont hyper link
Reply With Quote
  #79  
Old 02-11-2008, 08:01 AM
dutchbb dutchbb is offline
 
Join Date: Nov 2003
Posts: 899
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

How can I prevent the content of the spoiler from showing in thread preview when hovering over thread titles in forumdisplay?
Reply With Quote
  #80  
Old 02-20-2008, 03:58 AM
Arrogant-One's Avatar
Arrogant-One Arrogant-One is offline
 
Join Date: Jul 2007
Location: Brisbane
Posts: 196
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
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.
With my customized skins there is already text in both 'Additional CSS definitions' windows. The windows are not blank and I am hesitant to replace that text with this new text. What should I do?

AO
Reply With Quote
  #81  
Old 03-05-2008, 10:44 PM
azn_romeo_4u azn_romeo_4u is offline
 
Join Date: Feb 2006
Posts: 227
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

just press enter. and add a new line and paste it in. don't worry it's css, won't ruin your board.

I tested this out on 3.68 pl2 works amazing.
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:26 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05318 seconds
  • Memory Usage 2,316KB
  • Queries Executed 25 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (6)bbcode_code
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (6)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete