www programming

Posted: **Fri Jun 30, 2017 8:12 pm**

I've just remember that i had prepare this some day ago, it is the starting code that work into the default install theme of phpBB 3.2, the prosilver theme. Resize the forum list on index, and the topics list of viewforum.
Provide a throttle to not overload the cpu on resize.
Into overall_footer.html after:

Code: Select all

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}

add:

Code: Select all

<script type="text/javascript">

function resizer() {

$('ul.topiclist.forums li.row dl.row-item').each(function () {
  var dhsf = ($(this.childNodes[0].nextElementSibling.childNodes[3]).height());
   if (null == dhsf){
 	var dhsf = ($(this.childNodes[1].childNodes[1]).height());
 }

 	if (dhsf < 55){ dhsf = 55; } // the needed min height 
      $(this,'ul.topiclist.forums li.row dl').children().css({
          height: dhsf + 'px',
          'padding':'0px'
        });
  
});

$('ul.topiclist.topics li.row dl.row-item').each(function () {
  var dhsf = ($(this.childNodes[0].nextElementSibling.childNodes[3]).height());
   if (null == dhsf){
 	var dhsf = ($(this.childNodes[1].childNodes[1]).height());
 }

 	if (dhsf < 55){ dhsf = 55; } // the needed min height 

      $(this,'ul.topiclist.topics li.row dl').children().css({
          height: dhsf + '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>" );
 }); 
 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;
        actualResizeHandler();
       // The actualResizeHandler will execute at a rate of 45fps
       }, 198);
    }
  }

function actualResizeHandler() {
    // handle the resize event
     resizer();
}

}());

</script>

Recompile template!

Posted: **Fri Jun 30, 2017 8:43 pm**

p.s the above code has been just updated, i have fail on copy the right piece, and it was not containing the resize for viewforum.php (topics list).
Now is ok.

Posted: **Fri Jul 07, 2017 5:08 am**

I LOVE IT!!!!

Purge cache wors too after adding this script to footer. I first used on my test forum which anyone can see it working here: https://phpbb.thetopfew.com/viewforum.php?f=2

Then I put on my live site here: https://forums.thetopfew.com/ (and this is a custom theme, based on prosilver!) works like a charm, seriously.

I could have never helped you with this, lol. BUT I FRICKIN LOVE IT! WOW.. Glad I stayed up with this topic.. hell a good job mate! I would make that a phpbb extension and maybe ask for donations mate or drag more ppl to your site per clicks to download it.. seriously. Once people understand what this does, phpbb platform users may will want it!

Posted: **Fri Jul 07, 2017 3:59 pm**

so we go to further improve it ... let say that the code intentionally leave something not needed, like:

Code: Select all

$( this,'ul.topiclist.forums li.row dl.row-item').height();

could may just be:

Code: Select all

$(this).height();

it is in place to be more clear where we aim ... ok it is little elementary, but you know, i'm a simple man

Posted: **Mon Jul 17, 2017 2:40 pm**

Far from simple code tho.. that's some complicated script to me! I feel tiny all the sudden..

Posted: **Wed Aug 16, 2017 2:20 am**

Okay, say I want to NOT resize the row-items height, BUT instead only want to vertically-align the 'dd' elements (such as posts and reply numbers).

How would I edit this script? Thanks, I think I could can still benefit from your nice script here, without compromising my topic descriptions extension that the script height adjustment interferes with.

Thanks as always!

www programming

A stunning theme required

Re: A stunning theme required

Re: A stunning theme required

Re: A stunning theme required

Re: A stunning theme required

Re: A stunning theme required

Re: A stunning theme required