Common overall_footer.html js questions help

[axew3]

Because into my tests it return that without padding:0
the bottom result with an increased gap. It remove the top/bottom completely as default.

[axew3]

The new and definitive Lightbox fix, come with a new code that resolve all issues into any viewport tested ok where the old fail.

The definitive that works always, with any image size, would be probably like this i think?
I tested this never failing: a slide into the slide

Code: Select all

// Lightbox scroll fix, #phpbb_confirm scroll fix, #phpbb_alert scroll fix, #bbcode_wizard + abbc3_button fix
$(".dropdown-contents-cp,.abbc3_button,.postimage,.dropdown-contents li a,#add_files").on("click", function(e) {
  var g = $($(this.getBoundingClientRect().top));
  var t = parseInt(g[Object.keys(g)[0]]);
  $("#bbcode_wizard,#phpbb_alert,#phpbb_confirm").animate({top: t+'px'}, 100);

 const w3LBfixImgs = setInterval(exec_w3LBfixImgs, 1000);
 function exec_w3LBfixImgs() {
   var  imh = parseInt($('.lb-image').css("height"));
   var lbOh = parseInt($('#lightboxOverlay').css("height"));

    var totH = imh+t;
    if(totH < lbOh){
      $("#lightbox").animate({top: t+'px'}, 400);
    } else {
      t = parseInt((lbOh-imh)-100);
      $("#lightbox").animate({top: t+'px'}, 400);
    }
   clearInterval(w3LBfixImgs);
 }

});

[EDITED code]

[axew3]

So as said above, though that yes the code that always correctly reposition*** and show the image of any dimension into any device and viewport, when Lightbox ext shows images into a phpBB iframed, is the follow, that will be now added as default, into the overall_footer.html code
https://www.axew3.com/w3/2020/01/phpbb- ... iframe-v5/

Code: Select all

// Lightbox scroll fix, #phpbb_confirm scroll fix, #phpbb_alert scroll fix, #bbcode_wizard + abbc3_button fix
$(".dropdown-contents-cp,.abbc3_button,.postimage,.dropdown-contents li a,#add_files").on("click", function(e) {
  var g = $($(this.getBoundingClientRect().top));
  var t = parseInt(g[Object.keys(g)[0]]);
  $("#bbcode_wizard,#phpbb_alert,#phpbb_confirm").animate({top: t+'px'}, 100);

 const w3LBfixImgs = setInterval(exec_w3LBfixImgs, 1000);
 function exec_w3LBfixImgs() {
   var  imh = parseInt($('.lb-image').css("height"));
   var lbOh = parseInt($('#lightboxOverlay').css("height"));
    var totH = imh+t;
    if(totH < lbOh){
      $("#lightbox").animate({top: t+'px'}, 400);
    } else {
      t = parseInt((lbOh-imh)-100);
      $("#lightbox").animate({top: t+'px'}, 400);
    }
   clearInterval(w3LBfixImgs);
 }
});

The smooth into the smooth for all the lovely and cool people!

Anybody want to challenge this code, finding one that will work better?

when Lightbox ext shows images into a phpBB iframed

Bets are accepted.

*** please, always consider that what it is true for me today, it is often changed the day later
... anyway, this code never fail and works great into any of my test.

[EDITED]

[Ezrael]

So as said above, though that yes the code that always correctly reposition*** and show the image of any dimension into any device and viewport, when Lightbox ext shows images into a phpBB iframed, is the follow, that will be now added as default, into the overall_header.html code
https://www.axew3.com/w3/2020/01/phpbb- ... iframe-v5/

Probably miss tipped ? You mean overall_footer.html?

I changed the code now an will test how it works...

Edit: If you ask me, the old code was better because now the images appears in the top and then the script pull it down! Looks a bit wired to me.

Edit 2: Ahh maybe it looks better than my first impression was! At least it works perfect with huge images!

[axew3]

Probably miss tipped ? You mean overall_footer.html?

Yes!

Ahh maybe it looks better than my first impression was! At least it works perfect with huge images!

Yes, the image slide into the viewport.
The speed can be increased to 0 doing this into the code:

Code: Select all

const w3LBfixImgs = setInterval(exec_w3LBfixImgs, 1000);

it delay by 1 second the execution of the code that determine where the image should be positioned.

May change it into 100 (1/10 of second).

Then change both the 2 lines of code that moves the images into the place:

Code: Select all

$("#lightbox").animate({top: t+'px'}, 400);

change into

Code: Select all

$("#lightbox").animate({top: t+'px'}, 0);

Or just change the first

Code: Select all

const w3LBfixImgs = setInterval(exec_w3LBfixImgs, 1000);

The problem i've find out was the fact that Lightbox, while loading the image into the popup, do it increasing the style height property value of the related <img> tag so to ease it in.
Where jQuery failed on retrieve the right image value, until it has not completely loaded (so an interval was necessary to wait for the complete image loading) it has been fixed, if i am not wrong: it seem to me that it do not fail on determine the image dimension now, even if it is not still loaded.

[EDITED]

[axew3]

As said, to adjust the border of the phpBB iframed, it can be done in several ways and doing a stupid test for a task
i've set the same padding into a template, like into this stupid example done in 2 min:
https://www.axew3.com/w3/w3forum/

the overall_footer.html js code has been changed like this:
after this line:

Code: Select all

t.setAttribute("style", "position:fixed;top:0;left:0;width:100%;padding:0");

add the follow:

Code: Select all

$( "#wrap" ).wrap( "<div style='padding:10px 0;margin:0;'></div>");

into this fly example, you see that the space gap top/bottom of the iframe perfectly match vertically, and also horizontally, try to resize the width of the viewport so to force the resize of the iframe container, and see that the padding will be exactly 10px between it and the container.
And it can be forced to be the wanted dimension in several ways, this is just a fly example.
With these two lines of code, the exact padding of the phpBB can be managed exactly and as much we like.

Of course, CSS changes to fit the iframe at any needs can be manually applied at any level directly into the phpBB CSS or WP CSS. But these two lines of code, simply do the whole dirty job without having to look further more for anything else.
Assuming that the iframe resizer works only if javascript is enabled, and the user is invited to visit the phpBB at real url if the JS is not active into his browser, then we assume that these solutions are very good practice in this case.