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.
Common overall_footer.html js questions help
- axew3
- w3all User
- Posts: 2852
- Joined: Fri Jan 22, 2016 5:15 pm
- Location: Italy
- Contact:
- axew3
- w3all User
- Posts: 2852
- Joined: Fri Jan 22, 2016 5:15 pm
- Location: Italy
- Contact:
Re: Common overall_footer.html js questions help
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
[EDITED code]
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);
}
});
- axew3
- w3all User
- Posts: 2852
- Joined: Fri Jan 22, 2016 5:15 pm
- Location: Italy
- Contact:
Re: Common overall_footer.html js questions help
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/
The smooth into the smooth for all the lovely and cool people!
Anybody want to challenge this code, finding one that will work better?
*** 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]
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);
}
});
Anybody want to challenge this code, finding one that will work better?
Bets are accepted.when Lightbox ext shows images into a phpBB iframed
*** please, always consider that what it is true for me today, it is often changed the day later
![Surprised :o](./images/smilies/icon_e_surprised.gif)
... anyway, this code never fail and works great into any of my test.
[EDITED]
- Ezrael
- User www
- Posts: 95
- Joined: Wed Nov 15, 2023 9:11 pm
- Contact:
Re: Common overall_footer.html js questions help
axew3 wrote: ↑Wed Jul 24, 2024 8:44 am 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
- w3all User
- Posts: 2852
- Joined: Fri Jan 22, 2016 5:15 pm
- Location: Italy
- Contact:
Re: Common overall_footer.html js questions help
Yes!Probably miss tipped ? You mean overall_footer.html?
![Confused :?](./images/smilies/icon_e_confused.gif)
Yes, the image slide into the viewport.Ahh maybe it looks better than my first impression was! At least it works perfect with huge images!
The speed can be increased to 0 doing this into the code:
Code: Select all
const w3LBfixImgs = setInterval(exec_w3LBfixImgs, 1000);
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);
Code: Select all
$("#lightbox").animate({top: t+'px'}, 0);
Code: Select all
const w3LBfixImgs = setInterval(exec_w3LBfixImgs, 1000);
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
- w3all User
- Posts: 2852
- Joined: Fri Jan 22, 2016 5:15 pm
- Location: Italy
- Contact:
Re: Common overall_footer.html js questions help
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:
add the follow:
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.
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");
Code: Select all
$( "#wrap" ).wrap( "<div style='padding:10px 0;margin:0;'></div>");
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.