Hi All.
I have released a new plugin to force device orientation (Portrait or Landscape)
Script use two groups (one for the background and one for the message). So you can design how this look like when the user doesn’t use the orientation you want.
Demo page and instructions:
Editor:
If you have any issue, please reach me in PM.
Thanks!
Is there any updated guidance on using this with the new responsive mode? The rotate group does not cover the whole page when I rotate my device. TIA!
Hi @calicass83
Here’s a demo using the new RE
Thank you! Is there any way to force the notification to persist on top of/over a floating header? Currently, the header is still visible and the Group Rotate shows below it. Or is there a way I can put this in a floating header that goes on all pages and have it cover the entire page?
Here’s a demo now with floating group
So basically, the first container to display when force rotation is needed will be a floating group too and be sure to make it on top of the other floating group on the page.
It doesn’t look like floating groups can be stacked on top of one another, specifying which is first (?). I tried putting the rotate elements & floating group inside my floating header (which I have on every page, with the hope of not having to paste the rotate elements on every page), but the rotate message doesn’t span the page - it’s only as long as the floating header. Any ideas? Here’s a link to my editor if that helps explain what I mean.
Floating header: Raising-anchors | Bubble Editor
Page I’m trying to keep from rotating: Raising-anchors | Bubble Editor
Or does the rotate plugin have to be pasted on every page and if so, how do you get it to take priority over the floating header?
The stuff for the force rotate (group and element) need to be in a separate floating group. But you can put two floating group on the same page. And I guess you can probably use reusable element, but I’ve not tested that.
Actually you have both in the same floating group (header and rotate). this won’t work because the Group that you use in Rotate element need to be at the “root” of the page.
I have put the floating group with element and rotate group on the page, but it still won’t show - I can’t figure out what I’m doing wrong.
When you say the group with the rotate element needs to be at the “root” of the page, do you mean the floating index needs to be “beneath the page”? Either way, I’ve tried both and neither one is working.
no I mean that on the page, the group need to be at the “page” level. not inside another group.
Also, you should set the floating zindex above element.
I can see your floating group is now at the page level, but there’s no attribute ID assigned to it. Set it to rotate. The inner group need to be inner. Actually, it’s rotate
If you wan’t, set your app in public edit mode a few min and I will set it for you
So, I made those changes, but the group is still not spanning the entire page when I rotate my device. I have set the app to ‘everyone can edit’ - can you let me know once you’re done so I can change it back? I really appreciate your help!
You can make your app private and have a look now. It should work.
Also, don’t forget that it will also apply on desktop. And Most desktop will be landscape. So you may consider to use the plugin with something that will detect if user is on mobile or not.
Works now! Thank you!
Oh, wait - I just tested it in desktop mode - it works great in mobile mode, but it’s covering the whole desktop page…
Yes this is what I said on my previous message.
There’s a few plugin you can use to detect the device type. You should probably make the group and the ForceRotate element Hidden on desktop
Do you know what the plugin for this is called?
Look for Device detector
I think there’s a lot of different plugins
Is it possible to conditionally forceLandscape?
Specifically, in my case, if Current page width < thresholdValue?
()r is it all or nothing?
Did you tried to make plugin element not visible on page load and condition to be visible only when page width is less than X number?
Yes, and I realized I described the problem poorly, because my mind jumped to a possible solution, rather than just a definition of the problem.
The element is not visible on page load, and becomes visible when the page width is less than the threshold value.
And for my table and phone, it works great.
The problem is in a browser on a computer.
If I make the browser window less than full screen, and shrink it, at some point it becomes narrower than the threshold wide, and “Rotation your device” is displayed even though there is no rotating the device.
I’m not seeing a way to detect what TYPE of device the user is on, which would allow me to easily solve this.
Do you have ideas on how to solve this?
You can add another plugin that will let you know if the user is on mobile or not. There’s a lot of differents options on plugin market. Example: Device Detector Plugin | Bubble
