OBSOLETE:
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 -->
or
just before the closing body tag add the following code:
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>
Related ready CSS files edited on fly (so maybe to be improved) to use in conjunction and achieve the same result you see here, which are
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.
[size=130][b]OBSOLETE:
Check this instead:
[url]https://www.axew3.com/w3/forums/viewtopic.php?f=17&t=889[/url][/b][/size]
This script improve the previous one, where was necessary to edit the [i]viewforum_body.html[/i] template file, due to a fail on check childNodes if an element [i]a[/i] was present on output, produced by phpBB template may due to an unread post.
The [i]columned result[/i] with vertical aligned elements you can see in action at date of this post into this online forum, can be viewed on main [i]index-forum-list page[/i] and into [i]view-forum page[/i].
Nothing need to be changed on default phpBB template files except one: it is needed to add the following code into [b][i]overall_footer.html[/i][/b] file of the [b]default Prosilver theme[/b] (or you may need to change the [i]childNodes[/i] to search for, for any other different template.
If able, please post any suggestion to improve this wild on fly code.
Open [b][i]overall_footer.html[/i][/b] and maybe just before this line:
[code]<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->[/code]
or [b]just before the closing body tag[/b] add the following code:
[code]<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>[/code]
Related ready CSS files edited on fly (so maybe to be improved) to use in conjunction and achieve the same result you see here, which are
[b]common.css[/b], [b]content.css[/b] and [b]colors.css[/b] of the default Prosilver theme are in the attachment. Remember to recompile phpBB template to changes take effect.
[attachment=0]prosilver_css_column_colors.zip[/attachment]