beginners questions serie: background page and lightbox should be fixed position
2 years 4 months ago #66764
by raphi
Replied by raphi on topic beginners questions serie: background page and lightbox should be fixed position
Dear Cedric,
Thank you for your engagement and your very quick replies!
Thank you for your engagement and your very quick replies!
Please Log in or Create an account to join the conversation.
2 years 4 months ago #66800
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic beginners questions serie: background page and lightbox should be fixed position
Hi
regarding your other post on the problem for mobile, please try to modify the code like that
regarding your other post on the problem for mobile, please try to modify the code like that
Code:
#mbCenter:not(.mediaboxckmobile) {
position: fixed;
top: 0 !important;
margin-top: 50vh !important;
transform: translateY(-50%);
}
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.
2 years 4 months ago #66809
by raphi
Replied by raphi on topic beginners questions serie: background page and lightbox should be fixed position
I did follow your advice. Now it looks good on desktop. But it is very different looking and not acceptable on a real smartphone! I suppose, that there is not only a query for screen width but also for the user agent.
As I wrote in the other thread, I have a sample, which is working well. But it runs on an old Joomla 3 installation. And further I want to keep the add ons on my website as small as possible. Therefore I have not taken this solution in account for my actual new Joomla 4 website.
But I repeat my statement from the other Thread here again:
I have an example from an older draft and study design of a website. There the function of the iframe in a modalbox is realized very good. If you open this site: idcreativ.de/index.php You can try the iframe / modalbox by clicking on the button "Hier geht's zum Text". You will experience, how responsive it is, on real desktop and also on real smartphone. You can change the smartphone from portrait to landscape and the modalbox will change its size adequately. Especially by the big top and bottom margins in portrait mode, the visitor will always recognize, that he is not visiting a regular website but the content of an article within a modalbox. Thus he can go on surfing only by closing the modal at first, instead of searching for a navbar.
BTW: This design has been created by the PLYR framework, a JS framework containing also media player and it is here: plyr.io/
As I wrote in the other thread, I have a sample, which is working well. But it runs on an old Joomla 3 installation. And further I want to keep the add ons on my website as small as possible. Therefore I have not taken this solution in account for my actual new Joomla 4 website.
But I repeat my statement from the other Thread here again:
I have an example from an older draft and study design of a website. There the function of the iframe in a modalbox is realized very good. If you open this site: idcreativ.de/index.php You can try the iframe / modalbox by clicking on the button "Hier geht's zum Text". You will experience, how responsive it is, on real desktop and also on real smartphone. You can change the smartphone from portrait to landscape and the modalbox will change its size adequately. Especially by the big top and bottom margins in portrait mode, the visitor will always recognize, that he is not visiting a regular website but the content of an article within a modalbox. Thus he can go on surfing only by closing the modal at first, instead of searching for a navbar.
BTW: This design has been created by the PLYR framework, a JS framework containing also media player and it is here: plyr.io/
Please Log in or Create an account to join the conversation.
2 years 4 months ago #66831
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic beginners questions serie: background page and lightbox should be fixed position
on mobile it switches on a specific mode to use the whole screen area.
if you want, you can disable the mobile behavior in the plugin options
for the iframe option, the request is about to stop the scroll of the parent page, that you already asked. This is not possible for now, already added on my todolist
I don't understand what you mean here, because it has been developped for mobilenot acceptable on a real smartphone!
if you want, you can disable the mobile behavior in the plugin options
for the iframe option, the request is about to stop the scroll of the parent page, that you already asked. This is not possible for now, already added on my todolist
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.
2 years 4 months ago #66832
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic beginners questions serie: background page and lightbox should be fixed position
please download and unzip these files
www.dropbox.com/s/38vx0b83a0ejbbi/mediaboxck.zip?dl=0
and replace them in
plugins\system\mediabox_ck\assets
then clear your browser cache and tell me. It shall fix the scrolling of the body when the lightbox is opened
let me know
www.dropbox.com/s/38vx0b83a0ejbbi/mediaboxck.zip?dl=0
and replace them in
plugins\system\mediabox_ck\assets
then clear your browser cache and tell me. It shall fix the scrolling of the body when the lightbox is opened
let me know
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.
2 years 4 months ago #66835
by raphi
Replied by raphi on topic beginners questions serie: background page and lightbox should be fixed position
I have done, as you proposed. And I have left the code from an earlier proposal from you in the custom.css:
This in conjunction with your dropbox files does not do the trick. Sorry! You can see it on the webpage, I have already given you.
Of course I have then cleared the cache in Joomla and also the browser cache. Further I have tried it in Firefox and in Chromium.
Code:
#mbCenter:not(.mediaboxckmobile) {
position: fixed;
top: 0 !important;
margin-top: 50vh !important;
}
This in conjunction with your dropbox files does not do the trick. Sorry! You can see it on the webpage, I have already given you.
Of course I have then cleared the cache in Joomla and also the browser cache. Further I have tried it in Firefox and in Chromium.
Please Log in or Create an account to join the conversation.
Time to create page: 0.219 seconds