PHPBB BBcode - code tag with: select, expand/collapse function

Question

Im creating a custom bbcode for phpbb, in which i need a "select all" and a "expand/collapse" function. The expand/collapse option should then have a specific style when scrolling is active.

The select and expand/collapse work fine, but where i have a problem is when looking for if scrolling is active.

First the scrolling and looking for it works fine, but the bbcode is not unique (only works on the first one posted) Second the getElementByTagName('testlink') for the expand/collapse link does not work.

So quickly excplayn what i want the script to do, and what is working so far.

• When div class is ready run function - working
• set var for the link class (testlink) - not working
• set var for the content div class - working
• set var for scrolling - working
• try to scroll content - working
• if scrolling works scroll back up - working
• if scrolling works set visibility of (testlink) to visible - not working
• if no scrolling (else) set visibility of (testlink) to hidden - not working

Javascript:

$(document.getElementsByTagName('pre_header')[0]).ready(
    function () {
    var expandlink = this.getElementsByTagName('testlink')[0];  
    var eee = this.getElementsByTagName('dd')[0];   
    var old = eee.scrollTop;
    eee.scrollTop += 220;


    if (eee.scrollTop > old) {
        eee.scrollTop -= 220;
        expandlink.style.visibility = "visible";
    } 
    else {
        expandlink.style.visibility = "hidden";
        };  
    }
);

HTML:

<div class="pre">
    <dt class="pre_header">
        <b>Code: </b>
        <a class="testlink" href="#">expand</a>
    </dt>
    <dd style="overflow:auto;">
        content here
    </dd>
</div>

Hope to get some help, and when it all done ill add the whole BBcode for others to use..

/megaman

Answer 1

Well i got i to work by myself so as promised here my working code. Hope this will help others. and feel free to usage it on your own phpbb forums.

/megaman

ps. the expand/collapse button i have disabled for IE because issues with scrollTop.

BBCode usage:

[pre]{TEXT}[/pre]

HTML replacement

<script type="text/javascript">
// select all function
function selectCode(a)
{
    // Get ID of code block
    var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
    // Not IE and IE9+
    if (window.getSelection)
    {
        var s = window.getSelection();
        // Safari
        if (s.setBaseAndExtent)
        {
            s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
        }
        // Firefox and Opera
        else
        {
            // workaround for bug # 42885
            if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
            {
                e.innerHTML = e.innerHTML + '&nbsp;';
            }

            var r = document.createRange();
            r.selectNodeContents(e);
            s.removeAllRanges();
            s.addRange(r);
        }
    }
    // Some older browsers
    else if (document.getSelection)
    {
        var s = document.getSelection();
        var r = document.createRange();
        r.selectNodeContents(e);
        s.removeAllRanges();
        s.addRange(r);
    }
    // IE
    else if (document.selection)
    {
        var r = document.body.createTextRange();
        r.moveToElementText(e);
        r.select();
    }
}

//expand - collapse settings
function expandcollapse(a) {
    var ee = a.parentNode.parentNode.getElementsByTagName('dd')[0];
    if (ee.style.maxHeight == '200px') 
        { 
        ee.style.maxHeight = '2000px'; 
        a.innerHTML = 'collapse';
        } 
        else { 
            ee.style.maxHeight = '200px';
            a.innerHTML = 'expand';
            };
}

</script>
<![if !IE]>
<script type="text/javascript">
    function scrolltest(k) {
        var eee = k.getElementsByTagName('dd')[0];
        var old = eee.scrollTop;
        eee.scrollTop += 1;

        if (eee.scrollTop > old) {
            eee.scrollTop -= 1;
            k.getElementsByTagName('a')[1].style.visibility = "visible";
        } 
    }
</script>
<![endif]>

<div class="pre" onmouseover="scrolltest(this); return false;">
    <dt class="pre_header">
        <b>Code: </b>
        <a href="#" onclick="selectCode(this); return false;">Select all</a>
        <a style="float:right; visibility:hidden;" href="#" onclick="expandcollapse(this); return false;">expand</a>
    </dt>
    <dd style="max-height:200px; overflow:auto;">
        <code>
            {TEXT}
        </code>
    </dd>
</div>

Help line

Code: [pre]Add content here[/pre]