Floatbox: The premier windowing system for web pages

Forum guidelines:

- Please read the docs first.

- The forum's search function can be very helpful.

- Give an online example of problems if you can.

- Try to behave.

Support & General Discussion » inline resizing with v4.04

inline resizing with v4.04

Page: 1

Author Post
Member
Registered: Jan 2010
Posts: 8
Hi,

We recently upgraded to version 4.04 of Floatbox. We are having issues where Floatbox is not resizing itself if we dynamically change the innerHtml. and did not have this problem in the previous version, 3.??.

The html below demonstrates the problem if you click on Link1, close Floatbox, and then click on Link2. There will be scrollbars within the instance of Floatbox since Link2 has more content. I appreciate any help you can give.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link href="floatbox/floatbox.css" rel="stylesheet" type="text/css" />
<script src="floatbox/floatbox.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<a href="javascript:void(0);" onclick="fb.setInnerHTML(fb$('lb1Text'), 'abc');fb.start(fb$('lb1'));">Link1</a><br />
<a href="javascript:void(0);" onclick="fb.setInnerHTML(fb$('lb1Text'), 'abc<br/>def<br/>ghi<br/>');fb.start(fb$('lb1'));">Link2</a><br />
<a class="floatbox" id="lb1" href="#lb1Container" rev="width:340;padding:0;shadowType:none;roundBorder:0;
roundCorners:all;outerBorder:10;
innerBorder:0;autoFitOther:true;
showClose:true;graphicsType:auto;resizeDuration:0;
imageFadeDuration:0;overlayFadeDuration:0;
enableKeyboardNav:false;outsideClickCloses:false;
appendToForm:0;theme:black;"></a>
<div style="display:none;" id="lb1Container"><span id="lb1Text"></span></div>
</form>
</body>
</html>
« Last edit by mdm0781 on Wed Jul 07, 2010 10:09 pm. »
Administrator
Registered: Aug 2008
Posts: 1530
Thanks for the clear example.

The problem is how floatbox is handling the results of auto-measuring html content height. Where no explicit height is given, the content is measured and this measurement is assigned as the explicit height for that item. On the subsequent invocations, it remains the explicit height.

This behaviour does not occur in v4.05 which is close to release. In this new version I've modified the handling of explicit and implicit option settings and the measured height (and other transient settings) no longer persists between launches. This was done to better handle the interplay between auto-measuring height, adjusting height to the current browser space (autoFitHTML) and the circumstances when scrollbars appear. I think v4.05 is about 1 week away from release.

There is a workaround for the 4.00 to 4.04 releases. That workaround is to reinventory the floatboxed anchors on the page, thus resetting their option assignments. This is done by invoking fb.activateElements().

So your link2 click action becomes:
onclick="fb.activateElements(); fb.setInnerHTML('lb1Text', '...'); fb.start('lb1');"


As an aside, and not related to the issue under discussion, notice that I dropped the calls of fb$() from the click action. Both the fb.setInnerHTML and fb.start functions will accept an id string as well as an actual DOM element. Indeed, all the floatbox API functions that operate on a DOM element will accept that element's id as the parameter.
Member
Registered: Jan 2010
Posts: 8
Thanks for the quick response, tips, and solution. That worked.

Page: 1

Support & General Discussion » inline resizing with v4.04

Floatbox Forum is powered by UseBB 1 Forum Software