boxLeft or boxRight for large devices while centered floatbox on mobile devices

Page: 1

Author Post
Member
Registered: Apr 2009
Posts: 56
Hello Byron,
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.
Member
Registered: Apr 2009
Posts: 56
I forgot to tell you where to click on the page when I sent you the link. Sorry! Just click on any of the larger four round buttons marked with a capital "F".
Administrator
Registered: Aug 2008
Posts: 3369
Welcome back!

It will shorten my reply greatly if you read this section of the instructions first:
Setting mobile-specific options

In your context, the mobile options will go into your data-fb-options string and will unset rather than set options for mobile devices. Options are unset by setting them to null.
data-fb-options="mobile:`boxLeft:null boxRight:null autoFit:true` boxLeft:10% ... " 

The options outside of the backquotes will apply to all browsers and then the mobile options inside the backquotes will be applied to only small-screened devices. I put autoFit in there because it may be relevant in your context.


There's some apparent confusion about modal floatboxes and the page overlay (normally translucent black, but can be any colour and opacity including transparent). modal:true simply means add the overlay while modal:false means no overlay. The presence of the overlay makes the floatbox a modal element by blocking interaction with the rest of the page, thereby restricting interaction to the fbMain div and its children.

fbContext and fbTooltip floatboxes are hard-set with modal:false. They are intended to behave in a similar manner to native browser 'right-click' or 'press-and-hold' context menus and mouseover tooltips, but with unrestricted content possibilities. They are really just normal floatboxes and, other than the triangular arrows on the fbTooltips, all the appearance settings used can be applied to regular floatboxes too. You can see the options in use by searching for tooltipSettings and contextSettings in the core.js source file (in the src folder).


There is no reason to implement your own fb.start click handler to get a page overlay - or to get any other option applied for that matter. In fact, if you use the normal floatbox class activation to light up that link, the Floatbox code will add its own onclick which is essentially the same as your manual one (but better). Search clickHandler in the core.js source file if curious.


I can't quite follow the bit about boxes closing, or not, at undesired times. I suspect that the outsideClickCloses option could help. May as well also read about contentClickCloses right below that entry in case it too is of value.


So much for my short reply ambition.

Page: 1