[BBCode] jQuery Spoiler

Mods, snippets and styles postet and supported by the users
Forum rules
As the forum title says this is for User Contributions
Post a support request in this forum and you will be banned!
User avatar
all4phone
BBCoder IV
BBCoder IV
Posts: 150
Joined: 11 Feb 2011, 11:50
BBCodes: 28
Favourite BBCode: Random text signature
Favourite MOD: BBCode Strikethrough MOD
Location: Poland

[BBCode] jQuery Spoiler

Post by all4phone » 12 Dec 2011, 08:40

Title: jQuery Spoiler
Description: Spoiler for long descriptions
Autor: liptonace [minor changes by FTH & all4phone]


BBCode usage:

Code: Select all

[spoiler]{TEXT}[/spoiler]
HTML replacement:

Code: Select all

<div style="margin:5px; margin-top:5px; border: 1px solid #3bbfe7;" class="codebox">
    <div style="height:22px; text-align: center;"><strong>PhpBB3BBCodes Spoiler:</strong>
    <input type="button" class="changevalue" value="{L_EXPAND_VIEW}" style="width:100px; font-size:10px; margin:0px; padding:0px;" onclick="$(this).parents('.codebox').find('.content').toggle('slow');"></div>
    <div class="content" style="display: none; background-color:#e6e6e6; padding: 5px;">{TEXT}</div></div>
Helpline:

Code: Select all

Spoiler for long descriptions: [spoiler]text[/spoiler]
Example:

Code: Select all

[spoiler]hidden text :) :D[/spoiler]

necessary edits:

Open: styles/your_style/template/overall_header.html
Find:

Code: Select all

</head>
Before add:

Code: Select all

    <script type="text/javascript">
    // <![CDATA[
    !window.jQuery && document.write('<script type="text\/javascript" src="http:\/\/code.jquery.com\/jquery-latest.min.js"><\/script>');
    // ]]>
    </script>
<script type="text/javascript">
$("document").ready(
	function()
	{
		$("input.changevalue").toggle(
			function()
			{
				$(this).val('{L_COLLAPSE_VIEW}');
			},
			function()
			{
				$(this).val('{L_EXPAND_VIEW}');
			}
		);
	}
);
</script>
NOTE: This spoiler uses the jQuery library. It is your responsibility to ensure adding this BBCode does not cause any conflicts with other jQuery related BBCodes/MODs on your board. jQuery should never be included on a page more than once.

Demo:
http://youtu.be/8mS1STsRBhM
Last edited by all4phone on 28 Dec 2011, 20:14, edited 3 times in total.


User avatar
Blackwolf
BBCoder IV
BBCoder IV
Posts: 272
Joined: 04 Dec 2010, 10:36
BBCodes: 101
Favourite BBCode: Dropcap
Favourite MOD: mchat
Location: Melbourne Australia

[BBCode] jQuery Spoiler

Post by Blackwolf » 12 Dec 2011, 11:21

Screenshot please?
Ultimate Edition, Ultimate Edition Oz, Oz Unity

“We are Anonymous. We are Legion. We do not forgive. We do not forget. Expect us.”

User avatar
FTH
BBCoder III
BBCoder III
Posts: 124
Joined: 25 Nov 2011, 21:28
BBCodes: 10

[BBCode] jQuery Spoiler

Post by FTH » 12 Dec 2011, 16:56

HTML Replacement :

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$("document").ready(
   function()
   {
      $("input.changevalue").toggle(
         function()
         {
            $(this).val('{L_COLLAPSE_VIEW}');
         },
         function()
         {
            $(this).val('{L_EXPAND_VIEW}');
         }
      );
   }
);
</script>
<div style="margin:5px; margin-top:5px; border: 1px solid #3bbfe7;" class="codebox">
<div style="height:22px; text-align: center;"><strong>Spoiler:</strong>
<input type="button" class="changevalue" value="{L_EXPAND_VIEW}" style="width:85px; font-size:10px; margin:0px; padding:0px;" onclick="$(this).parents('.codebox').find('.content').toggle('slow');"></div>
<div class="content" style="display: none; background-color:#e6e6e6; padding: 5px;">{TEXT}</div></div>
it's not better just to do it ? With this code, not need to modify overall_header and language/en.common.php

;)

Demo :
http://graphogames.fr/demo/viewtopic.php?p=1#p1

User avatar
doktornotor
BBCoder IV
BBCoder IV
Posts: 167
Joined: 14 Sep 2011, 21:20
BBCodes: 30
Favourite MOD: Thanks for Posts

[BBCode] jQuery Spoiler

Post by doktornotor » 12 Dec 2011, 17:00

FTH wrote:it's not better just to do it ? With this code, not need to modify overall_header and language/en.common.php
Letting people inject jQuery or $("document").ready() at any time via BBCode does not sound like the best idea around.
Support requests via PM go straight to /dev/null!

User avatar
FTH
BBCoder III
BBCoder III
Posts: 124
Joined: 25 Nov 2011, 21:28
BBCodes: 10

[BBCode] jQuery Spoiler

Post by FTH » 12 Dec 2011, 17:05

yeah exactly, i didn't think to that , thanks doktornotor for this suggest ;)


User avatar
all4phone
BBCoder IV
BBCoder IV
Posts: 150
Joined: 11 Feb 2011, 11:50
BBCodes: 28
Favourite BBCode: Random text signature
Favourite MOD: BBCode Strikethrough MOD
Location: Poland

[BBCode] jQuery Spoiler

Post by all4phone » 12 Dec 2011, 18:52

Blackwolf wrote:Screenshot please?
Demo added to first post.
FTH wrote: $(this).val('{L_COLLAPSE_VIEW}');
},
function()
{
$(this).val('{L_EXPAND_VIEW}');
FTH wrote:it's not better just to do it ? With this code, not need to modify [edited] language/en.common.php
very good idea, thanks for that, first post updated ;).

Oyabun1
BBCoder II
BBCoder II
Posts: 10
Joined: 05 Mar 2010, 21:49

[BBCode] jQuery Spoiler

Post by Oyabun1 » 19 Dec 2011, 11:07

I'd suggest replacing the line of code at the top of the add in for styles/your_style/template/overall_header.html

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
with

Code: Select all

<script type="text/javascript">
// <![CDATA[ 
!window.jQuery && document.write('<script type="text\/javascript" src="http:\/\/code.jquery.com\/jquery-latest.min.js"><\/script>');
// ]]> 
</script>
That should then only load the jQuery library if it is not already loaded, thus minimising the chance of multiple inclusions.

It's not my code I just found it somewhere and it may be useful, especially because a number of MODs and BBCodes now use the jQuery library.

User avatar
all4phone
BBCoder IV
BBCoder IV
Posts: 150
Joined: 11 Feb 2011, 11:50
BBCodes: 28
Favourite BBCode: Random text signature
Favourite MOD: BBCode Strikethrough MOD
Location: Poland

[BBCode] jQuery Spoiler

Post by all4phone » 28 Dec 2011, 20:16

First post updated.

@Oyabun1, this is a beautiful idea, tested, many thanks for that mate ;)

master412160
BBCoder II
BBCoder II
Posts: 39
Joined: 04 Jun 2011, 12:17

[BBCode] jQuery Spoiler

Post by master412160 » 15 Jan 2012, 10:29

Would it be somehow possible to add a cookie to store if the last click of a user was if the spoiler was HIDE or SHOW?

Then this would be really a neat spoiler to have.
Hello please check out my Interview Site, Interviewed You

Jessica
BBCoder II
BBCoder II
Posts: 66
Joined: 25 Apr 2010, 23:26
BBCodes: 50
Favourite BBCode: spoilvtitle
Favourite MOD: AJAX Quick Edit
Location: Pennsylvania

[BBCode] jQuery Spoiler

Post by Jessica » 21 Mar 2012, 19:18

always wanted a jQuery spoiler *added*