positioning info box

Page: 1

Author Post
afrenyo
Guest
hello there,

i am displaying flash content embedded in html. i would like to add an info box, but i need to make sure that it is positioned so that it is NOT above the embedded flash movie, as the latter will 'float to top', and cover it.

consider:
i open an 800x600 float box, which ultimately has the dimensions of 834x668 with the default format options. relative to that size, assuming the top left corner of the floatbox to be [0,0], i would like to position/size my info box to be, let's say size: 800 x 40 with its top lef at [17,620].

is this possible? if so, could someone please advise how to make it happen?

thanks.
Administrator
Registered: Aug 2008
Posts: 3382
Positioning is available in the next version, but not in v3.12.

v3.20+ has two new options: boxLeft and boxTop. If these are plain numbers they are taken to be pixel location. If they are percentages, floatbox will be displaced by that amount proportional to its default location. So "boxLeft:'-50%'" would move the box half way towards the left browser margin. If either of these options are set to anything else, default centering occurs on that axis.

In the case of displacing the info box, you would add these options as infoOptions settings in the base item's rev attribute.
« Last edit by admin on Thu Nov 20, 2008 7:37 pm. »
afrenyo
Guest
thanks.

the numbers representing the pixel locations seem to be counting from the inner boundaries of the browser window.

is than the only way to come up with proper positioning relative to the floatbox frame (in which the infobox appears) to calculate those coordinates based on the current browser window dimensions and those of the floatbox?

can such approach be compatible with the many browsers?
Administrator
Registered: Aug 2008
Posts: 3382
Yes, those pixel values are relative to the top left corner of the visible browser window - as if you are positioning elements that have a style of position:fixed. It will be robust from a cross-browser perspective. The screen measurement routines that position floatbox are reliable and have been well tested on many browsers in many different circumstances.

Setting something up that allows positioning of an info or other child box relative to the position of the parent floatbox is just too much work and too much code. But mostly it would be too challenging and confusing to document and communicate how the position options work in different circumstances. The existing positioning capabilities are what you get to work with.

The original problem you mentioned was that the flash was appearing above the info box. This is a wmode issue. If wmode on the flash object is "opaque" or "transparent", the flash won't ride above everything. If wmode is set to the default value of "window", it will ride above everything. If you're loading your flash in floatbox through an iframe, try setting wmode in your object code. If you're loading flash directly, v3.13+ will run it with wmode=opaque unless overridden by a querystring parameter. v3.12- set wmode to window for firefox 3.x to fix some display problems, but this is narrowed down to just yahoo video flash in v3.13+.
afrenyo
Guest
instinctively, i opted to do exactly as you suggest below, and the opaq and transparent wmode object params proved to be a good work-around.

thank you.
afrenyo
Guest
have positionLeft and positionTop been implemented?
i can't seem to get them working with:

<a href="some.html" rel="floatbox" title="Page Title" rev="info:#infodiv infoOptions:`width:225 height:580 positionLeft:10 positionTop:10` infoPos:tl controlPos:tr width:1000 height:600 scrolling:no showCaption:false">floatbox</a>

thank you.
Administrator
Registered: Aug 2008
Posts: 3382
Well, yes they have, but they're not called that. My post above is in error about the names. (I'll edit it to correct it.) The positioning options are called boxLeft and boxTop.

Page: 1