FB Re-position on browser resize

Page: 1

Author Post
bruce
Guest
First, FB is absolutely the best solution out there from all I've seen. It rocks! However, I have noticed, even with the FB online demos, that when the browser window is resized, (h or v) while a FB is displayed, the FB does not re-position itself within the browser window.

If it is relative top/left to the browser, is it possible for it to move with the browser resize (like being inside a div), rather than having to close the FB, then reopen it to obtain the desired position? Users in my app my resize the browser to reference a desktop app, and have mulitple windows open while completing a FB form, but the FB moves off the screen.

Any thoughts or possibilities? Thanks again for the fine job!
Administrator
Registered: Aug 2008
Posts: 3382
Yeah, the box stays put if the browser window is resized. This isn't going to change. But perhaps what might work out in your case is to pin the floatbox to the top left of the browser window. To do this, set both the boxLeft and boxTop options to 0. (Or to something like 16 if you want to move the box away from the edges a bit.) The box will still stay put during a resize, but it will do so at a location that remains displayed. (Also note that, by default, the floatbox is draggable with the mouse.)
bruce
Guest
Thanks for your prompt response and reply. Since you have no plans to change this, can you perhaps provide a clue as to the complexity of resolving this issue as your suggested resolution won't solve my problem.

Is my request even possible with the way FB is coded for positioning? I surely appreciate any info or direction you can provide. Regardless, this is a really great app for web developers!
bruce
Guest
Oh yeah... one more thing... I am particularly interested in auto horizontal re-positioning to center, not the vertical, which is perfectly fine the way it is. Thanks again for your support!
Administrator
Registered: Aug 2008
Posts: 3382
Hmmm....
If my suggestion won't solve your problem, then I am mis-understanding your problem. Here's what I understood:

When people are using your web application, they may have a form open in floatbox in their browser. They may also wish to reference material in another app (not in their browser) on their computers. In order to see this other material, they may resize the browser to smaller dimensions.

The problem is that the floatboxed form was positioned in the middle of the larger browser window, and when the browser is resized smaller, the browser edges can slide over the floatbox display leaving all or part of the form outside the browser window.

I think that's the behaviour you're referring to. If it is, how is moving the floatbox form up to the top left not a solution?

Try these couple of links:
This first one opens a floatbox item normally. If you resize your browser smaller while the box is displayed, you can obscure the floatbox contents.
This second one uses boxTop and boxLeft to move the displayed item close to the top left corner. Now when you resize your browser, the content remains visible unless you resize the browser so small there's no room left to show it.

I don't mind providing pointers as to how you might add code to floatbox to reposition the box on browser resize, but I thought it best to get clear on what problem and proposed solution we're talking about first.
bruce
Guest
Yes, you have correctly stated the issue. And again, thank you for taking the time to respond so thoroughly.

The reason your suggestion will not solve the problem is because the website is horizontally centered, vertically fixed. Thus, when you resize the browser, the web page centers, but not the FB (which stays in its original fixed position).

Aesthetically, when the browser window gets reduced or enlarged, the horizontal position of the FB remains attached to the boxLeft location or the location where it was originally centered, while the rest of the page automatically moves to the center.

The design of this site is not just a forms issue. The FB is being mainly being used to provide content results in a specific location on the screen (in a design window). Thus, it would be optimal for websites using horizontal centering (which many do), to maintain the aspect of the FB in the same position of the website when the browser size has changed.

The only way for this to work now is to manually close the FB (which has to be done first or the close box may not appear anymore), then resize the browser, then open the FB again so that the FB correctly re-positions itself with respect to the underlying web page.

That, actually would also be a reasonable solution if there was a way to auto-close the FB on browser resize, then reopen automatically, positioned again based on its 'boxLeft:auto' settings.

Therefore, having the ability to somehow re-center the FB on resize is an important capability for websites using css horizontal centering. Your demo site is anchored to the top left, and that is why your solutions work perfectly in that environment.

Again, thanks for your attention and any thoughts or input you may have to assist me as this is really important for the design and implementation of this project.
bruce
Guest
Hi again,

I was doing a bit more research into this topic and found that both Thickbox at http://jquery.com/demo/thickbox/ and Lightbox2 at http://www.huddletogether.com/projects/lightbox2/ accomplish this task, auto centering on browser resize, though overall not as eloquent and flexible as Floatbox.

Perhaps the solution is embedded in the code from those apps. I truly believe this would be a worthwhile enhancement to Floatbox, especially for those developing sites that use horizontally and/or vertically centering design.

Hopefully, those demo links I have provided will give you more info. Thanks again for indulging me and I truly appreciate the fact that you respond, give great support and are very very professional in your responses.
Administrator
Registered: Aug 2008
Posts: 3382
I have to admit I'm still quite confused about the requirement. I'm just not getting it. The whole idea of a *box style of display is to create a sort of popup box that creates a new viewing context for its content. This popup box is by its very nature dissociated from the underlying page. When you say you have a requirement to tie the position of the box to the position of some elements on the host page, it sounds to me like you don't really want a floating box at all. It sounds to me like that requirement should be met by a dynamically appearing div on the host page. Then it would of course be positionally integrated with the host page. Perhaps if I saw your pages in action I would understand the requirement better.

But maybe all you are saying is you have an aesthetic preference for the box to move with browser resizing. If you just like that look/behaviour better, fair enough.

I think most other lightbox clones have horizontally auto-centering boxes. This auto-centering is done either by centering the box against the body, or by using fixed positioning (disabling scrollbars) and centering the box against the browser window. In floatbox, I took a different approach and explicitly set the left side of the box based on measurements of the browser window and the displayed content. This approach was taken because there are weaknesses in both the above mentioned strategies.

When a *box is centered against the body, this works well in almost all circumstances, but messes up if the body width is different than the browser display width. Centering against the browser window using fixed positioning has two problems. The first is, it breaks use of the scrollbars. I'm against modifying the behaviour and functionality of a visitor's browser in general, and non-functioning scrollbars are a serious impediment to viewing content larger than the screen size. The second problem is that IE6 can't do fixed positioning so you have to add a bunch of handler code in for IE6.

So I chose to assign the left edge of the box based on measured browser window dimensions. This provides reliable positioning in all browsers and against any body width, including launching content from a horizontally scrolled page.

Ok, enough blathering about that. If you really want the box to move around when your site visitors resize their browser, below is a code snippet you can use to make that happen. It attaches a window.onresize handler to your page that will move the open floatbox. Paste this into your document somewhere, preferably the <head> section. If you want only horizontal movement and no vertical, rem out or delete the line that begins "fb.fbBox.style.top = ".

Cheers...

<script type="text/javascript">//<![CDATA[
(function () {
var func = function() {
if (!(window.fb && window.fb.fbBox)) return;
var displaySize = fb.getDisplaySize(),
dx = (displaySize.width - fb.displaySize.width)/2,
idx = parseInt(dx, 10),
dy = (displaySize.height - fb.displaySize.height)/2,
idy = parseInt(dy, 10);
if (dx !== idx) {
if (arguments.callee.roundx) {
idx += (idx < 0 ? -1 : 1);
arguments.callee.roundx = !arguments.callee.roundx;
}
}
if (dy !== idy) {
if (arguments.callee.roundy) {
idy += (idy < 0 ? -1 : 1);
arguments.callee.roundy = !arguments.callee.roundy;
}
}
fb.fbBox.style.left = (fb.pos.fbBox.left = (fb.fbBox.offsetLeft + idx)) + 'px';
fb.fbBox.style.top = (fb.pos.fbBox.top = (fb.fbBox.offsetTop + idy)) + 'px';
fb.displaySize.width = displaySize.width;
fb.displaySize.height = displaySize.height;
};
if (window.addEventListener) {
window.addEventListener('resize', func, false);
} else if (window.attachEvent) {
window.attachEvent('onresize', func);
}
})();
//]]></script>
bruce
Guest
Wow! What a pleasant and unexpected surprise! Your response was beyond expectation and your solution is wonderful. I think it will be a very useful addition to FB.

I appended the code at the end of floatbox.js and tested it in the following latest version browsers with these results: [commenting out the "fb.fbBox.style.top = " code line]

IE7 - Perfect
Chrome / Safari - Perfect
FF - centers horizontally after browser resize is completed, but works.
Opera - Same as FF result.

Anyone using horizontal centering page design will certainly be pleased with the result.

Again, thanks so much for taking the time to support this issue. FB is best!
bruce
Guest
Just noticed one problem. If another FB is opened on top of an existing centered FB (which is properly centering from the new code), the second FB on top does not center as the one below it.

I am launching another FB from one already open. Is it possible to extend the adapted code to handle the centering to the one on top as well?

Many thanks in advance for any assistance you may be able to provide.
Administrator
Registered: Aug 2008
Posts: 3382
Troublemaker. :D

It's a minor addition...
(function () {
var func = function() {
if (!(window.fb && window.fb.fbBox)) return;
var displaySize = fb.getDisplaySize(),
dx = (displaySize.width - fb.displaySize.width)/2,
idx = parseInt(dx, 10),
dy = (displaySize.height - fb.displaySize.height)/2,
idy = parseInt(dy, 10);
if (dx !== idx) {
if (arguments.callee.roundx) {
idx += (idx < 0 ? -1 : 1);
arguments.callee.roundx = !arguments.callee.roundx;
}
}
if (dy !== idy) {
if (arguments.callee.roundy) {
idy += (idy < 0 ? -1 : 1);
arguments.callee.roundy = !arguments.callee.roundy;
}
}
var move = function(box) {
box.fbBox.style.left = (box.pos.fbBox.left = (box.fbBox.offsetLeft + idx)) + 'px';
box.fbBox.style.top = (box.pos.fbBox.top = (box.fbBox.offsetTop + idy)) + 'px';
box.displaySize.width = displaySize.width;
box.displaySize.height = displaySize.height;
}
move(fb);
for (var i = 0; i < fb.children.length; i++) move(fb.children[i]);
};
if (window.addEventListener) {
window.addEventListener('resize', func, false);
} else if (window.attachEvent) {
window.attachEvent('onresize', func);
}
})();
bruce
Guest
Yeah baby -- service with smile! The minor addition is it... and works perfectly as tested in the latest browsers indicated in this thread.

Brilliant work my friend... simply brilliant! :)

Page: 1