Set the background color for type ajax.

Page: 1

Author Post
Member
Registered: Nov 2010
Posts: 71
I use floatbox type ajax often on my pages. I set the background color for the content using a CSS file. If the content does not fill the box or the person resizes the box, then the background color displayed is the same as the page behind the box. To set the background of the ajax box I must use the following on the page containing the URL of the ajax page.

    <script>
fbClassOptions = {
Background: &#039;contentBackgroundColor:#E8E8E8&#039;,
};
</script>


Is there a method to accomplish this using a CSS file only instead of inserting the script on the page?
Administrator
Registered: Aug 2008
Posts: 3382
I like to discourage folks from applying css styles to the floatbox components. Doing so introduces risk of unintended side effects, is not guaranteed to survive version upgrades, can make support difficult, and there's often a simple way to accomplish the desired effect through standard supported Floatbox options.

Save CSS for styling your own content shown within the floatbox. In the case of the document background color, it could likely be forced to always cover the whole iframe display area by styling the document's html and body elements with width and height of 100%.

There's lots of ways to set options, most of which don't require the script element on the page. (Note that fbClassOptions is legacy old style. Recent Floatbox versions use an 'fbOptions' object which supports the same data structure as the fbOptions.js file.)

If you want all ajax content to have a certain contentBackgroundColor assigned, an easy way to do this is by setting it in the 'type:' section of fbOptions.js for ajax content. You can similarly assign it based on class name in the 'className:' section of fbOptions.js. And of course it can be assigned directly to an individual link through data-fb-options.

There's some useful information about assigning option preferences in the docs: https://floatboxjs.com/instructions#options and 3 or 4 sections after that.
Member
Registered: Nov 2010
Posts: 71
Thanks for the information. Using contentBackgroundColor: does work, but does not lend itself to easy maintenance when the background color needs to be changed. I realize I may be stepping outside of a request for normal Floatbox support. If I am, just let me know and I'll muddle through. I have created an example that better explains what I'm attempting to accomplish.

https://www.pickleball-huntsville.com/testajax/
Administrator
Registered: Aug 2008
Posts: 3382
I misspoke on my previous reply. You were talking about an ajax fetch and I replied about setting styles on the html and body elements in an iframe. The principle of styling the ajax content to fill the display area is more or less the same. A bit more complicated because you would need position:absolute and maybe some other fiddling.

No problem asking for support on this. I thought your initial question was how to get the desired background without putting an options script on the page, so that's what I answered.

The easiest way to specify the background color once is to not put it on the css styles of the ajax-fetched div. Let that come in with the default transparent background color. Assign contentBackgroundColor to the opening link's options, and bada-bing, Bob's your uncle, floatbox-filling background color specified only once.
Member
Registered: Nov 2010
Posts: 71
Thanks for your assistance. I have come up with a solution although not very elegant.

Let's say I have 3 links on every page and 10 different pages. I want the background color to be the same on all 30 instances. If I wanted to change colors I would need to edit 30 total links on 10 pages. The color may change one time per month, so that would be a lot of editing. Here is my solution for now.

<p><a class="floatbox" data-fb-options="caption2:`Using php echo contentBackgroundColor:$color;` group:tester <?php echo "contentBackgroundColor:$color"; ?> boxScroll:false pageScroll:false type:ajax width:800 height:800" href=&#039;thebox.php&#039;><b>Click Here</b></a> to open the box using PHP echo color.</p>


At the top of each page I'll include a PHP file that sets the variable $color. With this method, I'll need to edit one file only to make the color change. This is an unusual circumstance where the color needs to be changed frequently.
Administrator
Registered: Aug 2008
Posts: 3382
A simpler way might be to assign the background color through a single entry in class options set in the fbOptions.js file.

Something like:
<a class="colored floatbox" data-fb-options="type:ajax width:800 height:800" href=&#039;thebox.php&#039;>Click Here</a>

And in the className section of fbOptions.js:
className: {
colored: {
contentBackgroundColor: &#039;pink&#039;,
boxScroll: false,
pageScroll: false
},
...
}

Note the additional options set in there that are common to all the colored links.

I think this is tidier and more obvious and maintainable than spreading the option settings out between client side and server side code. To change the color site-wide, just change the single entry in fbOptions.js.
Member
Registered: Nov 2010
Posts: 71
Thanks - Definitely a better solution.

Page: 1