vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)
-   -   BB Code Enhancements - BBCode - Custom Spoiler (https://vborg.vbsupport.ru/showthread.php?t=255821)

orange gold 12-23-2010 10:00 PM
BBCode - Custom Spoiler
 
1 Attachment(s)
*Update released! In the new code the button will automatically adjust it's width to tightly fit all the text in the title.. You don't have to worry about keeping your title small anymore! enjoy!

If you like this you may also like the image preview spoiler for large images

I have seen spoiler code before but I am not sure if there is any spoiler code 4.0 for a custom spoiler where you can enter the text that appear on the button (ex. Click to view hidden message) and also show what is on the inside...

Here is my code I made:
** There is a known glitch where in the button title if you put the following symbol in the name ' then it will not work... If anyone can fix this please let me know because I have tried.. Other than that, the code works fine!

Enjoy! (Screenshots below)

Title:
Code:
Spoiler
BBCode Tag Name:
Code:
spoiler
Replacement:
Code:
<div>
    <div class="pre-spoiler">
    <input type="button" value="  {option}  " style="font-size:14px;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 = '{option}';}">
    </div>
    <div>
        <div class="spoiler" style="display: none;"><div style="border: 1px solid ;">{param}</div></div>
    </div>
</div>
Example:
Code:
[spoiler=enter your title here]enter your text here[/spoiler]
Description:
Code:
Shows and hides text with the click of a button.
(Glitch: In the button title... do not use this symbol ' )
Use Option:
Code:
Yes.
Leave everything else default... Let me know what you think.. :)

Blooded 12-24-2010 06:59 PM
I was looking for this thanks

orange gold 12-24-2010 09:33 PM
Glad you like it!!

Antidepresiv 12-25-2010 09:43 PM
Thanks dude! Is it possible to display a custom button for this spoiler, for example, a button with width 150 height 15px ?

orange gold 12-25-2010 10:57 PM
Yes! (: in the replacement code you will see something like 450px etc. Replace that with 150px. Sory I'm on my phone now. I can also make it auto re-size when I get home... Good luck until then (:

Antidepresiv 12-25-2010 11:07 PM
Y i get that, but i meant a custom blank button, so when you click on it, the spoiler text shows.. thanks for you'r reply.. :)

orange gold 12-25-2010 11:37 PM
I do not understand.. Do you mean just a plain button with no text that is that size?

Antidepresiv 12-26-2010 12:31 AM
Y, and when you enter the spoiler title, it shows on that button.. Don't get me wrong, this is rly cute, but i want to add a custom blank button for the spoiler, cuz i have a custom design.. And thank you again :)

orange gold 12-26-2010 12:42 AM
Where it says:

value="{option}"

Change the text {option} to the custom title you want shown, instead of the one the user enters..

Then later on there is a value that says..

Use {option}? Check no...

Save..

Does this work?

Antidepresiv 12-26-2010 01:07 AM
Dude, sty, but you have miss understod me, i would just like to make a custom button for the spoiler, users can write their own title, but i would make the button, it would be an image, so when they click on that image, the spoiler shows.. Hope i explained it.. And thank you again for you'r help..

Best Regards,
Anti

orange gold 12-26-2010 01:21 AM
OH!!! Okay!

Here is the new replacement code (150px also...) All you need to do is edit the code where it says "***URL HERE***" and change it to the full URL of the image.

Replacement:
Code:
<div>
    <div class="pre-spoiler">
    <button style="background-image:url(***URL HERE***);width:150px;font-size:14px;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 = '{option}';}">{option}</button>
    </div>
    <div>
        <div class="spoiler" style="display: none;"><div style="border: 1px solid ;">{param}</div></div>
    </div>
</div>

Antidepresiv 12-26-2010 01:34 AM
Hmm, it displays an image, but when i click on expand colapse, it gives me this message

Vbulletin message
"Invalid Action Specified"

And the spoiler image goes over the spoiler text... :/

orange gold 12-26-2010 01:39 AM
Hmm.. Give me some time, I fear I will have to use the Z-Index to make the text be ontop.. :( I hate the Z-index haha..
Also.. I do not know what the error is... I will take a look at it later.. I have to go now.. Please hold :)

Antidepresiv 12-26-2010 01:44 AM
OKy dude, and i have to sleep now, its 5am here.. :/ i will respond tomorrow, and once again, thank you so much for you'r help, you are the best.. :)

Anti Out! xD

orange gold 12-26-2010 02:03 AM
Fixed it!

Same thing.. replace the ***URL HERE*** (You will have to scroll over in the code box below to find it)
This will work!

new Replacement code:

Code:
<div>
    <div class="pre-spoiler">
    <input type="button" value="{option}" style="width:150px;font-size:14px;margin:0px;padding:0px;background-image:url(***URL HERE***)" 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 = '{option}';}">
    </div>
    <div>
        <div class="spoiler" style="display: none;"><div style="border: 1px solid ;">{param}</div></div>
    </div>
</div>

Antidepresiv 12-26-2010 10:19 AM
Yeap, this works, but the image isn't aligned in the field, it's way off.. And the image is the same size 150px.. How can i center the image in the field.. i tried with some positioning, but it doesnt work.. :/ Once again THANK YOU!

OldSchoolDSL 12-26-2010 10:44 AM
Installed using original code (image not needed for me).

Would like to see the symbol ' glitch fixed though

4.1 PL2

Antidepresiv 12-26-2010 10:53 AM
I figured it out, anyway, dunno what it is, but if you have an image lets say 150x30, the spoiler width and height must me smaller than the image size, for example 145x26, and then everthing is centered.. But if you put it in the same size, it wont be..

Thanks again for you'r help dude.. ;)

Best Regards,
Antidepresiv

orange gold 12-27-2010 12:57 PM
I think that's because the image was probably a rectangle and the button is a curved rectangle so the curves extend past the px size... Anyways, glad you go it working!
Wish you the best!

The Rocketeer 01-07-2011 06:30 AM
do you also have strike through ? thanks

orange gold 01-15-2011 10:19 PM
uhm?

replacement:
Code:
<strike>{param}</strike>
???

haha
Goodluck!
You might also want to use the CSS line-through, instead of just <strike>, old HTML like that might go obselete.

orange gold 07-14-2011 08:52 AM
Update released! In the new code the button will automatically adjust it's width to tightly fit all the text in the title.. You don't have to worry about keeping your title small anymore! enjoy!

MonkYZ 08-23-2011 10:32 PM
Thanks for the help! But can you please tell me how to show the original title instead of "Hide" ?

Breixo 11-04-2011 11:31 AM
Working on 4.1.7, everything ok!

BasicGreatGuy 07-20-2014 09:33 PM
Anyone come up with a fix for the apostrophe glitch?


All times are GMT. The time now is 05:50 PM.

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.01238 seconds
  • Memory Usage 1,765KB
  • 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
  • (9)bbcode_code_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (25)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