[BBCode] jQuery Spoiler

My mods · Post by **all4phone** » 12 Dec 2011, 10: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

Post by **Blackwolf** » 12 Dec 2011, 13:21

Screenshot please?

Post by **FTH** » 12 Dec 2011, 18: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

Post by **doktornotor** » 12 Dec 2011, 19: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.

Post by **FTH** » 12 Dec 2011, 19:05

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

My mods · Post by **all4phone** » 12 Dec 2011, 20: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

.

Post by **Oyabun1** » 19 Dec 2011, 13: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.

My mods · Post by **all4phone** » 28 Dec 2011, 22:16

First post updated.

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

Post by **master412160** » 15 Jan 2012, 12: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.

Post by **Jessica** » 21 Mar 2012, 21:18

always wanted a jQuery spoiler *added*