Mobile device width control

Page: 1

Author Post
Member
Registered: Feb 2014
Posts: 11
Hello,

I tried to set "width:98%" in my mobile options but it seems to have no effect. Is width or max-width a valid mobile options attribute?

Also, is there a list of mobile options on the site? I didn't really see any specific attributes listed.

Thanks much!

Spencer
Administrator
Registered: Aug 2008
Posts: 3381
Any option can be a mobile option; that is, they can all be placed inside a "mobile" option string or object and will be applied on any device that Floatbox detects as having what it considers to be a small screen. To take one interesting example, "source" could be set in mobile options to show alternate content for small screen devices.

You're welcome to link me into the page where "width:98%" doesn't appear to get assigned to small screen devices, and I'll figure out what's going on there.

One possibility is that Floatbox does not detect the device you are testing with as being small-screened. I added some code to this forum which will display "fb.smallScreen detected" down in the footer if it thinks you're viewing with a small-screened device and hence picking up "mobile" options. Otherwise, the footer just says "Try to behave".
Member
Registered: Feb 2014
Posts: 11
Thank you for the prompt response! I was able to get the mobile width:98% working as long as I don't specify a normal/non-mobile width. If the normal/non-mobile width is specified, it appears to win out over the mobile. Here is what I have that initiates the Floatbox:

function trainPopup() {

fb.start('/requestVirtualTrain.cfm','width:800 enableDragResize:false contentScroll:false doAnimations:true showClose:false outsideClickCloses:true shadowType:hybrid overlayOpacity:0.5 boxColor:#F4F4F4 padding:14 panelPadding:5 innerBorder:1 innerBorderColor:#AAAAAA');

}


Here are my mobile options from the fbOptions.js:


// This mobile section assigns overrides to be applied to small-screened mobile devices only.
mobile: {
showControlsText: false,
showItemNumber: false,
showPrint: false,
numIndexLinks: 0,
strictCentering: false,
padding: 12,
panelPadding: 4,
navType: "button",
imageTransition: "slide",
preloadLimit: 1,
newWindow:false
},

type: {
image: "",
// html settings apply to all 5 html sub-types that follow
html: "",

iframe: "mobile:`width:90%`",

inline: "",
ajax: "",
direct: "",
pdf: "mobile:`newWindow:true`",
// media settings apply to the 2 sub-types as well
media: "",
video: "height:56.25%w",
flash: ""
},
Administrator
Registered: Aug 2008
Posts: 3381
It's rational behaviour given the rules of precedence that Floatbox uses when applying aggregate options defined in multiple places.

When building effective settings for a floatbox, options are added in this order: global, type, className and lastly per-item, causing the per-item options to override and take precedence over the others. "mobile" options are rolled up into their section. Thus "width" defined in the "mobile" section of fbOptions.js becomes part of the global option set.

Were no per-item "width" set, the global "width" option would be applied, but where per-item "width" is set, it takes precedence. Having "width" in the per-item settings necessitates having "mobile: `width: ...`" in there too if a different width is to be applied to small screen devices.
Member
Registered: Feb 2014
Posts: 11
Perfect!! Worked just as you stated. Thank you again, you are the best...

Page: 1