Spoiler Show & Hide

Started by ciberwing, February 05, 2008, 12:25:19 AM

Previous topic - Next topic

ciberwing

Link to Mod

Simple and customisable (through language files and stylesheets)

This modification will create a new BBCODE tag called 'spoiler'; the Whole content that is in it will be hidden by a button that, on having been pressed, will show or hide the content.

Also adds a Spoiler button in edit-post area

Has Spanish, Spanish-utf8, English, English-utf8, English_british, English_british-ut8 languages.

A few screenshots:
Before click:

After Click:


[nofollow]Links:
SMF-Spoiler-Tag

dico

how do i make the button look different


perro88

Quote from: dico on February 05, 2008, 09:57:45 PM
how do i make the button look different


:P odviously you're not using the default theme. try to copy the gif file of the mod(will be probably on the themes/default/images/bbc) and copy it to themes/thethemeyou'reusing/images/bbc. this will work for every bbc tag you add.

ciberwing

Quote from: dico on February 05, 2008, 09:57:45 PM
how do i make the button look different



Only copy the spoiler.gif from the package file to your folder themes/MYTHEME/images/bbc


[nofollow]Links:
SMF-Spoiler-Tag

ameo

I tried installing despite error [test failed] but it doesn't work.

when I write [spoiler]text[/spoiler] it stays that way. nothing happens.

p.s. By the way, does it look like on the picture, or it can look like normal buttons here

- ROUND white and cute I mean.

antechinus:
QuoteIf you are dying for a solution it may be wise to seek medical attention.
Get some Awesome Smileys for your forum

|±(ಠ_ಠ
)±|

ciberwing

#5
Ok, i think you have installed a mod that have modified ur subs.php and then, this one canno't find the exactly line to paste...

Do u can paste here your subs.php? or attach it.

Quotep.s. By the way, does it look like on the picture, or it can look like normal buttons here

Of course it looks like normal buttons, but the image of th ebutton is copied only in the default theme (fixed in 2.x series), then you MUST copy the gif from the default theme folder to the theme you want to use...

It look like this:


[nofollow]Links:
SMF-Spoiler-Tag

n3tw0rk

#6
edit.---- its works"---

wooptoo

I think i found a bug:

If you quote a spoiler, anything you write under the quote will also get quoted.

try something like this:

[ quote ]
    [ spoiler ] ... [ /spoiler ]
[ /quote ]
some text

"some text" will also get quoted, although it shouldn't.

n3tw0rk

hey guy... i fix them..

can use this.. mod.. using the manual method!!.. works ok!!

http://www.smfhelper.info/forum/package.php5 [nofollow] <-- this is the links! se ya

DarioBros

Quote from: wooptoo on February 11, 2008, 04:19:59 PM
I think i found a bug:

If you quote a spoiler, anything you write under the quote will also get quoted.

try something like this:

[ quote ]
    [ spoiler ] ... [ /spoiler ]
[ /quote ]
some text

"some text" will also get quoted, although it shouldn't.

I should have fixed it.

Here is my changelog:

-Changed modification.xml adding a </div>:

'after' => '</div></div></div>',

-Added the Italian language.

In attachment there is the new package I made, so you can try it.
Pay attention, i'm not one of the developers, so try it at your own risk! :)

ameo

I wonder about this - can you enhance it so this could be done:

[spoiler]in sixth sense[spoiler]there is a twist in the end[/spoiler].[/spoiler]

So, basically, NESTED spoilers - spoiler inside of a spoiler.

antechinus:
QuoteIf you are dying for a solution it may be wise to seek medical attention.
Get some Awesome Smileys for your forum

|±(ಠ_ಠ
)±|

DarioBros

Quote from: ameo on February 16, 2008, 03:43:49 PM
I wonder about this - can you enhance it so this could be done:

[spoiler]in sixth sense[spoiler]there is a twist in the end[/spoiler].[/spoiler]

So, basically, NESTED spoilers - spoiler inside of a spoiler.



Did you try my package?
I can do it.

wooptoo

Thanks very much DarioBros, it works now. Nested spoilers work too.

MinasC

that's a great one , gonna try it out as soon as i get my home internet connection back ! thnx !

ciberwing

Thanks for all, Guys  :-*

Now I've been released an OFFICIAL update (1.0.3):
-Fixed validation problem (and nested spoilers)
-Added full text in button
-Added French and Italian Languages

Again, Thanks for all.


[nofollow]Links:
SMF-Spoiler-Tag

Basie

Thanks for updating this. Great mod. :)

Lotis

Thanks for this mod, it installed very easily and a spoiler button does appear among the other edit buttons above the text window.

However, when used it does not create a button in the post. Instead it reads "Spoiler (highlight to read)" above a blue quote box-like area. When the text in the box is  highlighted, it still cannot be read (I'm using the SMF default template) and loaded v1.0.3. Am I misunderstanding how it's suppose to work? I thought it would create a button in the post that, when pressed, would reveal the text "underneath".

:o  ???

ciberwing

#17
Hehe, i think you have an error with the package that you have installed, because my package doesn't have the text "Spoiler (highlight to read)"...

Be sure to uninstall  all the spoiler related packages and delete the installer packages (not only unistall, delete also....) from the server, then re download the package from here:
http://custom.simplemachines.org/mods/index.php?mod=1082

Good Luck!

I have tested it and works perfect =)



TIPS


Add these lines to the stylesheet (css) of your theme for improve the appearance of the spoiler.


/*

BOTON SPOILER

*/
div.spoiler-wrapper {
border:solid 1px #ccc;
padding:4px;
margin:3px;
}
div.spoiler-wrapper input[type=button],div.spoiler-wrapper input[type=submit] {
padding:3px;
margin:3px;
background:#E7F2F8;
border-top:solid 1px #cccccc;
border-left:solid 1px #cccccc;
border-right:solid 1px #666666;
border-bottom:solid 1px #666666;
outline:none;
}
div.spoiler-wrapper input[type=button]:hover,div.spoiler-wrapper input[type=submit]:hover {
padding:3px;
margin:3px;
background:#CDDFE9;
border-top:solid 1px #666666;
border-left:solid 1px #666666;
border-right:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
}



[nofollow]Links:
SMF-Spoiler-Tag

ameo

ciberwing, is it possible to replace text "Show spoiler" with "spoiler" only?

&

is it possible to have different codes for spoiler instead of [spoiler]text[/spoiler]

i'd like something like [šap]text[/šap]

it's like [whisper]text[/whisper] only in Croatian.
antechinus:
QuoteIf you are dying for a solution it may be wise to seek medical attention.
Get some Awesome Smileys for your forum

|±(ಠ_ಠ
)±|

ciberwing

#19
Yes & Yes...

But you must edit the package before installing it:

==========================================
How to replace the text 'show spoiler' for 'spoiler' (for 1.03):
==========================================

-In the file modifications.xml inside the package, search something like this (depending on the language that you want to change)
<file name="$languagedir/Modifications.english.php">
<operation>
<search position="end" />
<add><![CDATA[
/* Spoiler Show & Hide */
$txt['spoiler_posting'] = 'Spoiler - hide the content';
$txt['spoiler_show'] = 'Show hidden content (spoiler)';
$txt['spoiler_hide'] = 'Hide this content (spoiler)';
/* END Spoiler Show & Hide */]]></add>
</operation>
</file>


and edit it like you want...

PLUS:

for adding more translations only duplicate that piece of code and change on it the language dir / filename for the language that you want to add...

=======================
How to add more tags (for 1.03):
=======================

In the same file modifications.xml, you must search something like this:
<file name="$sourcedir/Subs.php">
<operation>
<search position="before"><![CDATA[
array(
'tag' => 'white',
'before' => '<span style="color: white;">',
'after' => '</span>',
),]]></search>
<add><![CDATA[
/* Spoiler Show & Hide */
array(
'tag' => 'spoiler',
'before' => '<div class="spoiler-wrapper"><div class="smallfont"><input type="button" value="' . $txt['spoiler_show'] . '" 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 = \'' . $txt['spoiler_hide'] . '\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'' . $txt['spoiler_show'] . '\'; }" /></div><div class="spoiler-content"><div style="display: none;">',
'after' => '</div></div></div>',
'block_level' => true,
),
/* END Spoiler Show & Hide */]]></add>
</operation>
</file>


and before the:</add>

ADD the following text (you must edit this text, this is only an example, replacing the text THISISMYNEWTAG for the tag that you want...):

/* Spoiler Show & Hide (PLUS!!! CUSTOM VERSION) */
array(
'tag' => 'THISISMENEWTAG',
'before' => '<div class="spoiler-wrapper"><div class="smallfont"><input type="button" value="' . $txt['spoiler_show'] . '" 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 = \'' . $txt['spoiler_hide'] . '\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'' . $txt['spoiler_show'] . '\'; }" /></div><div class="spoiler-content"><div style="display: none;">',
'after' => '</div></div></div>',
'block_level' => true,
),
/* END Spoiler Show & Hide */]]>


Please, do NOT touch anymore if you don't know what you are doing =)

I hope this help!

NOTE: I'm not native english speaker :P


[nofollow]Links:
SMF-Spoiler-Tag

Advertisement: