Fix for Forum Post Expand/Contract Links
Posted: Mon Jun 08, 2009 9:27 pm
Edit: This issue has been resolved with recent forum software updates.
I noticed that the Expand/Contract links above code blocks in posts do not work (subsilver2 theme), so I tracked down the problem.
The HTML for posts has this structure. As you can see, the max-height style is applied to the "codeholder" div.
The Expand/Contract link calls the expandCode() Javascript function.
And the expandCode() function is defined as
As it is currently defined, the expandCode() function tries to change the max-height style of
instead of its parent
Because the code block is still restrained by its parent which has a max-height of 300px, the Expand/Contract button is non-functional.
This can be fixed by adding ".parentNode" to the expandCode() function (line 2).
Edit: This post was recovered from search engine cache.
I noticed that the Expand/Contract links above code blocks in posts do not work (subsilver2 theme), so I tracked down the problem.
The HTML for posts has this structure. As you can see, the max-height style is applied to the "codeholder" div.
Code: Select all
<div class="postbody">
<div class="codebox">
<div class="codeheader"></div>
<div class="codeholder" style="max-height: 300px;">
<div id="cb99999" class="php"></div>
</div>
</div>
</div>Code: Select all
<a onclick="expandCode('cb99999'); return false;" href="#">Expand/Contract</a>Code: Select all
function expandCode(id){
var parent = document.getElementById(id);
if ((typeof parent.style.maxHeight != 'undefined') && parent.style.maxHeight == ''){
parent.style.maxHeight = '300px';
} else {
parent.style.maxHeight = '';
}
}Code: Select all
<div id="cb99999" class="php">Code: Select all
<div class="codeholder" style="max-height: 300px;">This can be fixed by adding ".parentNode" to the expandCode() function (line 2).
Code: Select all
function expandCode(id){
var parent = document.getElementById(id).parentNode;
if ((typeof parent.style.maxHeight != 'undefined') && parent.style.maxHeight == ''){
parent.style.maxHeight = '300px';
} else {
parent.style.maxHeight = '';
}
}