Login

ePirat · (This post was last modified: 2013-05-28, 01:04:56 by ePirat.)

Hello,
I wrote a small plugin which adds the ability to use BBTag like spoiler tags on GetSimple Pages.
Spoiler means that the Text inside the [spoiler]-Tags will not be visible to the visitors, until they click the "Spoiler" Button (or hover the text if JS is disabled).
It is very useful if you have content that some visitors may not want to see.

Usage:
Simplest usage would be without any additional arguments:

Code:
[spoiler]This is my spoiler text[/spoiler]

It will create a button with the caption: Show Spoiler, when it's clicked, it shows the spoiler text. (And button caption will change to Hide Spoiler)
A bit more complex usage would be if you set a special button caption:

Code:
[spoiler=Click to show/hide a super secret text]This is my spoiler text[/spoiler]

This would create a button with the caption Click to show/hide a super secret text, when you click it will show the spoiler text. (The button caption will not change)
The more advanced way if the following, where you set show caption and hide caption:

Code:
[spoiler=Click to show a super secret text|||Click to hide a super secret text]This is my spoiler text[/spoiler]

Which will create a button with the caption Click to show a super secret text. When the user clicks on it, it will show the spoiler text and the button caption will change to Click to hide a super secret text. (Note that the delimiter for the two captions is |||, so you can't use it if you want a single caption spoiler button.

Changelog:
Version 1.1

Background-Color is now set to transparent when javascript is enabled.
Background-Color and Text-Color are now both set to #333, so that the text isn't readable until it is hovered (when JS is disabled)

Version 1.2

Now you can use [spoiler=Custom Text]My hidden Text[/spoiler] to give the spoiler button a custom caption
Will not add javascript and css code if no spoiler is used on the page
Improved onload function to not conflict with other plugins Thanks to singulae from the forum!

Version 1.3

Fixes a bug with line breaks in spoilers

Version 1.4

Rewrote Javascript Code (thanks to frnkkpp, he did most of the work), cleaned up PHP code
Added ability to specify different text for show/hide
Changed default button text to Show Spoiler and Hide Spoiler
HTML produced by the spoiler plugin should now be valid

Version 1.5

Added Settings:
- Set default show/hide text
- Decide if button/link should appear after or before the spoiler
- Switch between Link and Button

Version 1.6

Improved JavaScript to work with IE6 and higher Versions and with latest Firefox 8 (more)

Version 1.7

Fixed another Firefox issue, where the Button/Link text won't change properly

Version 1.8

Added support for custom classes for button and div
Switched to domready to load faster

Version 1.9

Fixed some strict php errors
Fixed a bug with custom classes, everything should work fine now

Plugin Link – Download

Connie · 2011-04-27, 20:07:14

Please explain what for this plugin is, I never met "spoiler" in webdesign ;=)

ePirat · 2011-04-27, 20:38:35

Connie Wrote:Please explain what for this plugin is, I never met "spoiler" in webdesign ;=)

Quote:Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work.

from Wikipedia

I can't explain spoiler very good, my English is horrible.

Connie · 2011-04-27, 21:27:52

I did a google search and found that SPOILER in BBCode is an element which hides text which only becomes visible when you mark the text

is that what you are intending?

Cheers, Connie

polyfragmented · 2011-04-27, 21:32:41

I've encountered this at sites like geocaching.com (for text which might prematurely reveal hints to a hidden location) which comes in quite handy there. They encrypt text with ROT13 there (mangle up the characters), but it's the same principle.

I personally don't have any immediate use for it, but it may come in handy for others, so: way to go epirat!

krisu · 2011-04-28, 01:08:45

Connie Wrote:I did a google search and found that SPOILER in BBCode is an element which hides text which only becomes visible when you mark the text

is that what you are intending?

Cheers, Connie

No, it puts a button that's calls 'spoiler' and when you click it, it shows the content.

You can also hide it again clicking the spoiler button.

Demo: http://krisu.viuhka.fi/getsimple3/index....ler-plugin

mikeh · 2011-04-28, 02:53:16

cool! This will be useful on a large site of mine, thanks!

jlm · 2011-04-28, 03:03:14

Hello,

this plugin is nice and works very well

But I have questions:
-how to change the button title
-Is it possible to put many buttons "spoiler" in a page with different names?

singulae · (This post was last modified: 2011-04-28, 08:08:51 by kk3mike.)

I like it. Has great potential..

It would be much better if the button's appearance could change with CSS..

Some recommendations:
To avoid conflicts with other plugins that using window.load:

Code:
// unobtrusive way for call window.onload 

  function addEvent(obj, evType, fn){ 

    if (obj.addEventListener){ 

      obj.addEventListener(evType, fn, false); 

      return true; 

    } else if (obj.attachEvent){ 

      var r = obj.attachEvent("on"+evType, fn); 

      return r; 

    } else { 

      return false; 

    } 

  }

  addEvent(window, 'load', yourFunctionLaunchOnWindowLoad);

For check if exists the tag [spoiler] and avoid loading code that do not is used in other pages:

Code:
function check()

{

    global $data_index;    

    if (strpos($data_index->content, '[spoiler]') === false)

    {

        return false;

    }    

    add_action('theme-header','code');

}

ePirat · (This post was last modified: 2011-04-29, 02:30:03 by rolandv40.)

jlm Wrote:-how to change the button title

I've updated the plugin, now you can use the following code to set custom button title:

Code:
[spoiler=My custom title]Here is the hidden spoiler text[/spoiler]

jlm Wrote:-Is it possible to put many buttons "spoiler" in a page with different names?

Simply put more than one [spoiler] on the site:

Code:
[spoiler=My custom title]Here is the hidden spoiler text[/spoiler]

[spoiler=Another custom title]Here is the hidden spoiler text[/spoiler]

Please Update to the new Version 1.3, it fixes a bug when you have multiple line spoilers

jlm · 2011-04-29, 01:04:32

Thank you for your excellent work!
I am doing tests on this site http://gs.comlu.com/ and it works very well. (spoiler_plugin v 1.2)
I tried to create tabs (http://www.qualitycodes.com/samples/php/tabs/?id=2 example) but I'm too bad in php to make a plugin that works with GS

ePirat · 2011-04-29, 02:35:31

jlm Wrote:Thank you for your excellent work!
I am doing tests on this site http://gs.comlu.com/ and it works very well. (spoiler_plugin v 1.2)

Thanks, but you should update to version 1.3 because it fixes a bug where the plugin won't work if you have multiple lines spoiler and custom text...

BTW: I looked to the example and i dont know how this could be used productive with getsimple... maybe if you give me some ideas i will think about making a plugin for it...

ePirat · (This post was last modified: 2011-04-29, 02:50:31 by rolandv40.)

singulae Wrote:I like it. Has great potential..

It would be much better if the button's appearance could change with CSS..

Some recommendations:
To avoid conflicts with other plugins that using window.load

Thanks a lot, I'm using your code now...

singulae Wrote:For check if exists the tag [spoiler] and avoid loading code that do not is used in other pages

Yeah, thanks i never thought about this Smile

Now I used a different code which worked too.
Big thanks for your help!

jlm · 2011-04-30, 00:42:21

Hello,
sorry for my English very bad!
I think with this plugin do that sort of thing
http://www.trafalgardesign.com/faqs/module-faqs
or
http://www.acusti.ca/mooaccordion-css-sh...orial.html
on getsimple .
I can not make a plugin, because my php level is very small.
But the plugin is not far from doing this. You may need to modify the css to not look like the submit button
but I think the best is here http://ninjaforge.com/demo/ninja-accordion
My tests here http://gs.comlu.com/

ePirat · 2011-04-30, 10:42:56

jlm Wrote:But the plugin is not far from doing this. You may need to modify the css to not look like the submit button

Ah... This plugin was nerver designed to do stuff like this, it's only a simple spoiler button, sure you can give it another style, just play a bit with the css...

What do you (users) think? Should I modify the button to look like the examples from jlm?
Personally I would create a new plugin for this, because this isn't a Tab plugin or a menu plugin, but a spoiler box...

polyfragmented · 2011-04-30, 21:33:58

ePirat Wrote:What do you (users) think? Should I modify the button to look like the examples from jlm?
Personally I would create a new plugin for this, because this isn't a Tab plugin or a menu plugin, but a spoiler box...

I'd say that jim's suggestions exceed the original scope of your plugin. A more general plugin which hides/reveals content would be cleaner in my book. Just my 2c.

Also, mikeh has started work on a FAQ plugin this week.

andyash · 2011-06-25, 20:11:02

Is there a possibility for the Spoiler button to show "READ MORE" when the text is hidden and "READ LESS" when the text is expanded. This would make it so much more flexible than just saying SPOILER all the time.

ePirat · (This post was last modified: 2011-10-23, 11:25:58 by rolandv40.)

andyash Wrote:Is there a possibility for the Spoiler button to show "READ MORE" when the text is hidden and "READ LESS" when the text is expanded. This would make it so much more flexible than just saying SPOILER all the time.

Sorry for my late reply. I will try to make it possible, stay tuned Wink

EDIT: Done, update to 1.4 and see the first post how to use it. If you need further help, feel free to post your questions here.

andyash · 2011-11-02, 21:23:48

I can't see any button text.

ePirat · 2011-11-03, 02:05:07

andyash Wrote:I can't see any button text.

Please give me a detailed description:
What spoiler tag you used? (Paste full [spoiler=xyz]...[/spoiler] that you used here.
What browser are you using?

andyash · 2011-11-08, 01:28:08

ePirat Wrote:
andyash Wrote:I can't see any button text.
Please give me a detailed description:
What spoiler tag you used? (Paste full [spoiler=xyz]...[/spoiler] that you used here.
What browser are you using?

Got it. I was doing it wrong. One question - Is there a possibility of the button to shift at the end of the hidden text when the hidden text is made visible? Currently it stays where it is.

ePirat · 2011-11-08, 03:29:38

andyash Wrote:Is there a possibility of the button to shift at the end of the hidden text when the hidden text is made visible? Currently it stays where it is.

On my feature list now, thanks for the idea. I'll make an option's page where you can set some of these things. Stay tuned for next version.
Currently I am a bit bussy but I hope that I can do it until the weekend.

andyash · 2011-11-10, 20:38:32

ePirat Wrote:
andyash Wrote:Is there a possibility of the button to shift at the end of the hidden text when the hidden text is made visible? Currently it stays where it is.
On my feature list now, thanks for the idea. I'll make an option's page where you can set some of these things. Stay tuned for next version.
Currently I am a bit bussy but I hope that I can do it until the weekend.

Thanks.

ePirat · 2011-11-21, 17:56:04

andyash Wrote:Is there a possibility of the button to shift at the end of the hidden text when the hidden text is made visible? Currently it stays where it is.

Update 1.5 is out, has a settings page where you can set all this stuff. If you have any problems let me know.

andyash · 2011-11-21, 19:31:25

The new version rocks. Nothing more on the wishlist. Smile

Login
Username:
Password:	Lost Password?
	Remember me