I hope you're keeping well. I just looked at when I subscribed to this forum and I can't believe it's been a decade! Holy Cow!
Your latest version of Floatbox has polished things up quite nicely. Things are pretty darn reliable with the "box" on all devices.
I understand why you've made this the last version. It has been a long road. Thanks for sticking with it over the years.
I do have one question that I may have overlooked in the documentation and it would appear that it may be glaringly obvious and I missed it. I am using boxLeft and boxRight position with multiple links on a page that light-up a floatbox a certain percentage either left or right on the screen.
It works great.
Q. However, is there a method to keep Floatbox's default auto center positioning on mobile views, while retaining boxLeft or boxRight positioning for large devices?
BoxRight positioning pushes the floatbox outside the screen boundaries on the right for mobile views.
The floatbox content is using CSS width: 90vw with a media query for portrait (0px - 479px) views, so the content shifts right out of view.
A few other things:
I've opted for fb.start because I'm creating my own pseudo style Context Box, because I want to retain the Floatbox background overlay dark. Context boxes and non-modal content do not allow for the dark overlay. At least versions in the past do not and I could find no way to execute that with the latest Floatbox version.
There are also some form input elements that close your Floatbox down when they receive focus. This has to do with a custom keyboard overlay that is firing up on top of your Floatbox. For some reason, it's closing your Context boxes down, but not a normal Floatbox panel. I didn't want to investigate whether "blur" or "focus" javascript changes might correct this because it would delve deeply in your code. Yes, I tried various options on the Context Boxes to keep them open.
Here is the relevant code and CSS for the page in case you need it. I will send you a link to the page by your websites form. It's typically password protected, but I've unlocked that page in case you need to view it. The code below is provided to help you find things faster if you need it.
I hope I haven't overlooked something in the new documentation! And, if I did, please feel free for a swift kick in myderriere!
Shift Floatbox Left Links
<a class="btn btn-default btn-circle btn-xl floatbox naked" type="button" id="" onclick="fb.start(this); return false;" <?php echo $dataFloatBoxStringLeftAdjust;?> href="#quicksetup-id-lf-floatbox"><i class="wi wi-fahrenheit" style="font-size:1.6em;"></i></a>
Shift Floatbox Left Options
$dataFloatBoxStringLeftAdjust = 'data-fb-options="boxLeft:10% doAnimations:false shadowType:halo outsideClickCloses:false zIndex:10 autoFit:false";';
Shift Floatbox Right Link
<a class="btn btn-default btn-circle btn-xl floatbox naked" type="button" id="" onclick="fb.start(this); return false;" <?php echo $dataFloatBoxStringRightAdjust;?> href="#quicksetup-id-rf-floatbox"><i class="wi wi-fahrenheit" style="font-size:1.6em;"></i></a>
Shift Floatbox Right Options
$dataFloatBoxStringRightAdjust = 'data-fb-options="boxLeft:60% doAnimations:false shadowType:halo outsideClickCloses:false zIndex:10 autoFit:false";';
CSS:
#quicksetup-id-rf-floatbox
{
width: 35vw;
background: url(../images/bg/bg_corner_weight_wheeltires_noarrow_superwide_1920w_672t_75opacity.jpg) 60% 18% / 500% no-repeat;
}
The link is on the way with your form.