View Full Version : BBCode manager Suggestion: (Nested Spoiler Example)

29 Sep 2009, 12:33
I was recently adding a spoiler BB code from the site here.

(Sadly I forget which thread I found it).

It didn't work as expected. I was using it to "fold Sections"
Demo http://www.techtir.ie/forums/showthread.php?t=19

Examination suggested that using {option} or {param} in a javascript called function is simply not going to work sensibly if there are multiple instances in the same page. The BB Code will expand and put the javascript function multiple times. Any {option} or {param} in the last instance on the page will "fill in" the values when you click anywhere.

Also I realised that if a BB code has a Javascript function, it will be inserted N times on the page for N instances of the object.

So for now I put the function in headinclude

The BB code manager only has the instance code that calls it with {option} as a parameter to the javascript function.

My suggestions:

NEVER use {option} or {param} in a function.
A later version of BB manager should have an "include once in header" tag for a function.

For those interested here is the code.
(Make sure the <img src= paths match your install from root of web site, both in the javascript function and in the BB code definition that calls it.)
It allows nested folded sections/spoilers

<script language='JavaScript' type='text/javascript'>
function spoiler(obj,hdtit)

for (var i = 0; i < obj.childNodes.length; i++)
if (obj.childNodes[i].id == 'idTitle')
titleRow = obj.childNodes[i];
if (obj.childNodes[i].id == 'idSpoiler')
if (obj.childNodes[i].style.display != 'none')
obj.childNodes[i].style.display = 'none';
// bug next line align="absmiddle"
titleRow.innerHTML = '<img src="/forums/images/buttons/collapse_tcat_collapsed.gif" align="absmiddle">&nbsp;'+hdtit;
obj.childNodes[i].style.display = 'block';
// bug next line align="absmiddle"
titleRow.innerHTML = '<img src="/forums/images/buttons/collapse_tcat.gif" align="absmiddle">&nbsp;'+hdtit;

In the BB code Manager

<div align=center style=""><div align=left onclick="spoiler(this.parentNode,'{option}');" id="idTitle" style="width: 90%; margin-top: 6px; clear: both; border: solid #0B198C; border-width: 1px 1px 1px 1px; padding: 5px 8px 5px; line-height: 15px; font-weight: bold; background: #5C7099 url(/forums/images/gradients/gradient_tcat.gif) repeat-x top left; color: #FFFFFF; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; cursor: pointer; "><img src="/forums/images/buttons/collapse_tcat_collapsed.gif" align="absmiddle">&nbsp;{option}</div><div align=left id="idSpoiler" style="display: none; width: 90%; padding: 5px 8px 5px; border-left: 1px solid #0B198C; border-right: 1px solid #0B198C; border-bottom: 1px solid #0B198C; background: #F5F5F5; color: #000000; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-weight: normal;">{param} </a></div></div>

Lots of body, inc BBcode for images, tables & video