by axew3 » Tue Aug 22, 2017 2:03 pm
The first version above, even isn't prefect, and with bad/wrong explain, work but
not align to middle the first element dt on each row.
This can be added into phpBB subsilver overall_footer.html without any change, it will work.
This is maybe, the correct (little improved) code to use:
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 () {
// cross nodes fix check
var hb1 = ($(this.childNodes[1].childNodes[3]).height());
var hb2 = ($(this.childNodes[1].childNodes[1]).height());
var hb3 = ($(this.childNodes[1].childNodes[1].childNodes[11]).height());
var hbr = Math.max(hb1, hb2);
if (hbr < 55){ hbr = 55; } // the needed min height for form list rows
if(hbr > 55 && hb3 !== null){ hbr += hb3+6; } // wow, the needed min height, more the pagination row ... if there is one on this row
$(this,'ul.topiclist.topics li.row dl').children().css({
height: hbr + 'px',
'padding':'0px'
});
});
// x ul.topiclist.forums
$('ul.topiclist.forums li.row dl.row-item').each(function () {
// cross nodes fix check
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[1]).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]).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>" );
});
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>
While the second version, with also first element aligned to middle require to inject more code into the DOM, to correctly vertical align even the dt and related nested
div.list-inner ...
The working example is here online right now, you can see the result, but to achieve this result, there are some things to explain.
I will try to provide an easy and short how to, with js code (and few easy changes into css i've apply to get colored columns) into the default prosilver theme.
The main problem here, is to traverse the DOM getting the value (height in this case, of the
div.list-inner, ), where phpBB add more nested divs into the main dt when for example, there is a new post into forum/topic: in this case, phpBB display Red icon that is also a link. This added
a element, is added by phpBB in the case there is a new post, and not if there are no new posts. The worse is that is added outside the
div.list-inner! ... we could move manually it inside the
div.list-inner, and the rendered result would be the same ... why they have put it so outside the
div.list-inner is mysterious to me ... by the way, should be a reason may i ignore at moment ...
So, when we iterate to get the height value of
div.list-inner, the code can fail because the childNodes structure we search for not match in some row and js error return:
(TypeError: this.childNodes[1].childNodes[1].childNodes[0]... is undefined) ... because some row could contain the <a> element to render the icon as a link....
The joke could be further more improved, or done in several ways, moving the element
a inside the
div.list-inner manually as above mentioned, with jQuery or JS onload, when necessary, and checking the DOM searching for childNodes in a way or another when required.
I've just remove these lines, one for each file, into files
forumlist_body.html, and
viewforum_body.html.
So the icon display but is not more an active link, which isn't a big loss, it is redundant because there are more links that point to the same in the same row.
I stop here this crazy example for the moment. I think will be complicated for many, i would like not became impossible for +- all.
Posting this night my time
all the easy procedure/code, to complete the logic that explain all this crazy thing, with middle vertical align for dt as is in this online example.
We are crazy, We are cool!
The first version above, even isn't prefect, and with bad/wrong explain, work but [b]not align to middle the first element dt on each row[/b].
This can be added into phpBB subsilver overall_footer.html without any change, it will work.
[b]This is maybe, the correct (little improved) code to use:[/b]
[code]<script type="text/javascript">
// w3all resizer
function w3all_resizer() {
// x ul.topiclist.topics
$('ul.topiclist.topics li.row dl.row-item').each(function () {
// cross nodes fix check
var hb1 = ($(this.childNodes[1].childNodes[3]).height());
var hb2 = ($(this.childNodes[1].childNodes[1]).height());
var hb3 = ($(this.childNodes[1].childNodes[1].childNodes[11]).height());
var hbr = Math.max(hb1, hb2);
if (hbr < 55){ hbr = 55; } // the needed min height for form list rows
if(hbr > 55 && hb3 !== null){ hbr += hb3+6; } // wow, the needed min height, more the pagination row ... if there is one on this row
$(this,'ul.topiclist.topics li.row dl').children().css({
height: hbr + 'px',
'padding':'0px'
});
});
// x ul.topiclist.forums
$('ul.topiclist.forums li.row dl.row-item').each(function () {
// cross nodes fix check
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[1]).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]).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>" );
});
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]
[b]While the second version, with also first element aligned to middle[/b] require to inject more code into the DOM, to correctly vertical align even the dt and related nested [i]div.list-inner[/i] ...
The working example is here online right now, you can see the result, but to achieve this result, there are some things to explain.
I will try to provide an easy and short how to, with js code (and few easy changes into css i've apply to get colored columns) into the default prosilver theme.
The main problem here, is to traverse the DOM getting the value (height in this case, of the [i]div.list-inner[/i], ), where phpBB add more nested divs into the main dt when for example, there is a new post into forum/topic: in this case, phpBB display Red icon that is also a link. This added [i]a[/i] element, is added by phpBB in the case there is a new post, and not if there are no new posts. The worse is that is added outside the [i]div.list-inner[/i]! ... we could move manually it inside the [i]div.list-inner[/i], and the rendered result would be the same ... why they have put it so outside the [i]div.list-inner[/i] is mysterious to me ... by the way, should be a reason may i ignore at moment ...
So, when we iterate to get the height value of [i]div.list-inner[/i], the code can fail because the childNodes structure we search for not match in some row and js error return: [i](TypeError: this.childNodes[1].childNodes[1].childNodes[0]... is undefined)[/i] ... because some row could contain the <a> element to render the icon as a link....
The joke could be further more improved, or done in several ways, moving the element [i]a[/i] inside the [i]div.list-inner[/i] manually as above mentioned, with jQuery or JS onload, when necessary, and checking the DOM searching for childNodes in a way or another when required.
I've just remove these lines, one for each file, into files [i]forumlist_body.html[/i], and [i]viewforum_body.html[/i].
So the icon display but is not more an active link, which isn't a big loss, it is redundant because there are more links that point to the same in the same row.
I stop here this crazy example for the moment. I think will be complicated for many, i would like not became impossible for +- all.
[b]Posting[/b] this night my time [b]all the easy procedure/code[/b], to complete the logic that explain all this crazy thing, with middle vertical align for dt as is in this online example.
We are crazy, We are cool! ;)