Page 1 of 2
[BBCode] jQuery Spoiler
Posted: 12 Dec 2011, 10:40
by all4phone
Title: jQuery Spoiler
Description: Spoiler for long descriptions
Autor: liptonace
[minor changes by FTH & all4phone]
BBCode usage:
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>
Code: Select all
Spoiler for long descriptions: [spoiler]text[/spoiler]
Code: Select all
[spoiler]hidden text :) :D[/spoiler]
:
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>
[BBCode] jQuery Spoiler
Posted: 12 Dec 2011, 13:21
by Blackwolf
Screenshot please?
[BBCode] jQuery Spoiler
Posted: 12 Dec 2011, 18:56
by FTH
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
[BBCode] jQuery Spoiler
Posted: 12 Dec 2011, 19:00
by doktornotor
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.
[BBCode] jQuery Spoiler
Posted: 12 Dec 2011, 19:05
by FTH
yeah exactly, i didn't think to that , thanks doktornotor for this suggest
[BBCode] jQuery Spoiler
Posted: 12 Dec 2011, 20:52
by all4phone
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
.
[BBCode] jQuery Spoiler
Posted: 19 Dec 2011, 13:07
by Oyabun1
I'd suggest replacing the line of code at the top of the add in for
styles/your_style/template/overall_header.htmlCode: 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.
[BBCode] jQuery Spoiler
Posted: 28 Dec 2011, 22:16
by all4phone
First post updated.
@Oyabun1, this is a beautiful idea, tested, many thanks for that mate
[BBCode] jQuery Spoiler
Posted: 15 Jan 2012, 12:29
by master412160
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.
[BBCode] jQuery Spoiler
Posted: 21 Mar 2012, 21:18
by Jessica
always wanted a jQuery spoiler *added*