Check this instead:
viewtopic.php?f=17&t=889
This script improve the previous one, where was necessary to edit the viewforum_body.html template file, due to a fail on check childNodes if an element a was present on output, produced by phpBB template may due to an unread post.
The columned result with vertical aligned elements you can see in action at date of this post into this online forum, can be viewed on main index-forum-list page and into view-forum page.
Nothing need to be changed on default phpBB template files except one: it is needed to add the following code into overall_footer.html file of the default Prosilver theme (or you may need to change the childNodes to search for, for any other different template.
If able, please post any suggestion to improve this wild on fly code.
Open overall_footer.html and maybe just before this line:
Code: Select all
<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->Code: Select all
<script type="text/javascript">
// w3all resizer
function w3all_resizer() {
// x ul.topiclist.topics
$('ul.topiclist.topics li.row dl.row-item').each(function () {
// search now for list-inner height that is wrapped into table ... see onload more below
// on phpBB template viewforum_body.html nothing been removed in this (little) improved version
try {
var hb1 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0]).height();
if (typeof hb1 !== 'undefined') {
//console.log(hb1);
}
}
catch (e) {
//console.log(e);
}
try {
var hdnp = $(this.childNodes[1].childNodes[3].childNodes[0].childNodes[0].childNodes[0].childNodes[0]).height();
if (typeof hdnp !== 'undefined') {
hb1=hdnp;
}
}
catch (e) {
//console.log(e);
}
try {
var hb2 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0]).height();
}
catch (e) {
//console.log(e);
}
try {
var hb3 = $(this.childNodes[1].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[11]).height();
}
catch (e) {
//console.log(e);
}
if (typeof hb2 == 'undefined') {
hb2 = hb1;
}
var hbr = Math.max(hb1, hb2);
if (hbr < 50){ hbr = 50; } // the needed min height for form list rows
if(hbr > 50 && hb3 !== null){ hbr += hb3+6; } // the needed min height, more the pagination row, if there is one on this row
$(this).children().css({
height: hbr + 'px',
'padding':'0px'
});
});
// x ul.topiclist.forums
$('ul.topiclist.forums li.row dl.row-item').each(function () {
// cross fix node check
// same above: search now for list-inner height that is wrapped into table ... see onload more below
var hb1 = ($(this.childNodes[1].childNodes[3]).height());
var hb2 = ($(this.childNodes[1].childNodes[1]).height());
var hbr = Math.max(hb1, hb2);
if (hbr < 55){ hbr = 55; } // the needed min height for form list rows
$(this,'ul.topiclist.forums li.row dl').children().css({
height: hbr + 'px',
'padding':'0px'
});
});
}
$( window ).load(function() {
$('ul.topiclist.forums li.row dl.row-item').each(function () {
$(this.childNodes[3]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
$(this.childNodes[3,5]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
$(this.childNodes[3,5,7]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding-left:6px;vertical-align:middle\"></td></tr></tbody></table>" );
});
$('ul.topiclist.topics li.row dl.row-item').each(function () {
$(this.childNodes[3]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
$(this.childNodes[3,5]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
$(this.childNodes[3,5,7]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding-left:6px;vertical-align:middle\"></td></tr></tbody></table>" );
});
$('ul.topiclist.topics li.row dl.row-item dt div.list-inner').each(function () {
$(this).wrapAll( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
});
$('ul.topiclist.forums li.row dl.row-item dt div.list-inner').each(function () {
$(this).wrapAll( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
});
w3all_resizer();
});
(function() {
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if ( !resizeTimeout ) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
w3actualResizeHandler();
// The actualResizeHandler will execute at a rate of 45fps
}, 198);
}
}
function w3actualResizeHandler() {
// handle the resize event
w3all_resizer();
}
}());
</script>common.css, content.css and colors.css of the default Prosilver theme are in the attachment. Remember to recompile phpBB template to changes take effect.