Latest version is 4.13
md5sum: 9d581523032fd41820a6511b36006bd6
Terms and Conditions of download and usage
You are welcome and encouraged to download the floatbox package, test it, experiment with it and integrate it with development and test instances of your web site.
Floatbox is copyrighted and licensed software that requires purchase and registration for deployment on production instances of commercial and group sites.
Free registration may be available for individual personal hobby sites and some public service non-profit sites.
Please see the license terms for details.
When no valid license key file is in place, floatbox will periodically generate a registration reminder popup.
Installation of a license key matched to your production site's domain name eliminates the reminders on that site.
A license key is not required for development, test and evaluation usage.
The unlicensed download package is complete and fully functional.
By proceeding to download the Floatbox software, you are assenting to the license terms as described on this site.
Acknowledged
Change Log
v4.13
2010/07/24
Enhancements
fb.addEvent has been extended to support the DOMContentLoaded event for all browsers (yes, including IE). Call fb.addEvent(document, 'DOMContentLoaded', myFunc) to register early DOM load events.
The code is IE9 ready. It will use the new standards-based capabilities of IE9 and avoid many of the workarounds that were necessary for all previous IE versions. (IE9 is looking excellent; finally up to the standard set by the other major browsers.)
The dynamically created img element used for zooming image content from a thumbnail now always has src and alt attributes, making it technically correctly formed.
Bug Fixes
IE would throw permission denied exceptions when ending an iframe floatbox whose content includes floatboxed anchors, cyclers or tooltips, if that content page had been navigated away from within the floatbox.
The 'timeout' setting for enhanced tooltips was not working.
In IE, images zoomed up from a thumbnail within an iframe could have a displaced starting position if the iframe element had borders or padding.
An empty caption in data-fb-options (e.g., caption:``) could break parsing of that option string.
Resolved a few troublesome interactions between the various ways content can be sized.
The 'Info...' link wouldn't fire after a resized box had been click-resized.
If a floatbox had been auto-sized down to fit the screen and then subsequently drag-resized with the mouse, it would jump to small dimensions.
Drag-resizing could also 'jump' the floatbox size when done after the box had been resized with the fb.resize() function.
The fb.resize() function, when called without size parameters for images, could distort the proportions of the displayed image.
After invoking fb.resize() on an autoSized image, the click-to-resize cursor or control would still be available even though it no longer had anything to do.
v4.12
2010/07/19
Enhancements
The resize function handles scrollbars better and can successfully auto-measure some complex html that earlier versions would get wrong.
Auto-sizing of iframe content when first loaded in floatbox will now adjust the height either up or down as required.
API function fb.getStyle has been given a 3rd parameter of 'integerize' which will cause the requested css values to return as (you guessed it) integers.
Bug Fixes
In a gallery set with captions defined in hidden divs, floatbox could crash when returning to view a gallery set member a second time.
IE (and only IE) could start an item twice that was dynamically added to a page and had onclick="fb.start(this)" on it, but only on a fresh browser start and not by a cache flush and page reload (very odd).
The API fb.getStyle function, when not passed a specific property value, was failing to return the correct complete cssText in some browsers.
v4.11
2010/07/15
Enhancements & Changes
Content and captions fetched from hidden divs now have the div node itself moved into floatbox rather than copying the html. This preserves any event handlers that may have been attached to elements in the hidden content.
HTML content that is auto-measured (that doesn't have an explicit height set) when the autoFitHTML option is active will have no scrollbars if it fits in the browser window and will get scrollbars if it needs to be resized down to auto-fit.
New API function fb.translate() provides a wrapper for the Google Translate service and will translate floatbox content or other text. See the API reference for details.
New API function fb.executeJS will dynamically load and execute an external javascript file. See the API reference for details. (The "IE 6 end-of-life" example on the demo page showcases both fb.executeJS and fb.translate.)
Three new accessibility enhancements:
New option 'attachTo' allows the floatbox to be attached to the html document at a location other than the end of the body.
This allows content to comply with US Section 508 accessibility requirements for placement and facilitates compatibility with screen readers by placing floatbox content in natural page content order.
Can specify an element id to attach to, or "click" to attach just below the clicked anchor.
New per-item option 'altContent' added which assists accessibility compliance by providing alt tags for floatboxed images and titles and alternate content for floatboxed iframes.
Captions placed above the floatbox content will be read in the correct sequence by screen readers.
The IE6 end-of-life notification popup is now translated to the visitor's browser language.
API addEvent function has been improved for IE by correctly setting the 'this' keyword in the event handler, providing the event object as a parameter to the handler, and setting 'target' on the event object.
A new option, 'autoTypes', has been added. When setting the floatbox class on a containing div and letting that propogate to child elements in the div, set 'autoTypes' in the containing div's options to limit which types of child elements get the floatbox class auto-assigned.
API fb.ajax function now has a return value of the XMLHttpRequest object so that its properties and methods (such as abort()) are accessible and usable.
API fb.resize function will re-measure and auto-size currently displayed html content if no width or height parameters are passed (good for if the content has changed dynamically).
Mouseover and out actions for enhanced tooltips and cycler div's pauseOnHover moved to DOM2 events so as not to interfere with other events people might put on those elements.
The floatbox.css file has been re-arranged with all the custom theme settings near the top to make customization a little easier.
autoFitOther has been split to autoFitHTML and autoFitMedia.
The default for autoFitHTML has been set to 'true' because this is almost always the desired behaviour.
The resizeOther option has been removed. It never made much sense to have click-to-resize functionality on non-image content.
minContentWidth and minContentHeight options have been removed as settable options because there isn't a good reason for end users to adjust these.
Class names used for marking elements for Floatbox behaviours are now settable options (floatboxClass, cyclerClass & tooltipClass) in case the default class names are already in use for other purposes.
Animation speed has been increased on iPads.
Changed the type option's value of 'img' to 'image'. ('img' still works)
When the caption 'href' is specified, the caption will now be just the filename rather than the complete URI of the floatbox content.
Spacing between individual index links is increased slightly.
Estonian and Lithuanian language files added.
Bug Fixes
A very large caption, combined with autoFitImages set to its default of true, could cause image resizing to display the caption outside the bounds of the floatbox and could crash floatbox in IE.
A slideshow started with the options "showThis:false doSlideshow:true" would cause those options to get propogated to the gallery items causing subsequent launches to drop gallery members and to run a slideshow when not requested.
Iframe content with no height or scrolling option specified would fail to show scrollbars.
The download link for Windows Media Player install was incorrect.
Keyboard shortcuts would not work in Firefox for content opened from a link within an iframe until after something in the floatbox was mouse-clicked.
In 64-bit IE, the bottom left round corners were misaligned by 1 pixel.
Horizontal positioning of start positions and tooltips was off in IE8 on RTL (right-to-left) layout pages when scrolled to the left.
If an image was closed before zooming in of the box had completed, it would zoom out as a blank box instead of as the image.
If index links were active on a slideshow, an open index link thumbnail could stick open when the slideshow moved to the next item.
A direct call to fb.start() would unnecessarily require a non-null 'source' parameter even when 'showThis:false' was in the passed options.
Danish language localization file was broken. (The Danes would get English.)
v4.04
2010/05/25
Two Obscure Bug Fixes
Index links attached to floatbox gallery items residing in a hidden div would not show in Internet Explorer.
Re-populating an existing floatbox that has no round corners by using the sameBox option or the fb.reload function
could cause floatbox to error out on Internet Explorer and some older browsers.
v4.03
2010/05/17
Bug Fixes
If a floatboxed image was invoked at the same time as it was being preloaded, the image could display as a 0 x 0 dot.
In IE, floatbox could crash on exit when trying to zoom out to a thumbnail that had been dynamically removed from the page.
Changes
Framebox.js is no longer distributed in the zip package. Anyone with include lines for framebox.js will need to change that include path to 'floatbox.js?framed' or add 'framed:true' to fbPageOptions. (see the docs)
Code is restructured so that the modules can be appended to floatbox.js to create one monolithic js file. Note that doing this makes floatboxed pages load slightly slower.
English language localization strings have moved into core.js. English browsers will no longer do a module fetch to get their strings.
IE-specific css settings moved from the css file into the code (for validation improvements).
CSS left:0; added to cycler div elements to help them position better inside <td> elements on IE 6 and 7.
v4.02
2010/05/11
Bug Fixes
A URL with a #hash component (e.g., /somePage.html#someDivId) that should have loaded as an iframe would fail with a "404 - Requested content not found" message.
If box dimensions are based on measuring html content rather than explicitly set in the options, and autoFitOther is set to true, the auto-measured height could be too great by one scrollbar width.
Tooltips could fail to start when mousing rapidly between two adjacent tooltipped elements placed closely together.
When displaying a tooltip nested inside an open floatbox, sliding from that tooltip directly to a tooltipped page element could fail to open the second tooltip.
When printing iframe content from floatbox, Internet Explorer could fail to pick up the style attribute of the body element.
The afterPrint callback function was not firing.
When stickyDragResize was set and html box content was changed either by a sameBox load or by navigating in a gallery set of html content,
odd box sizing behaviour could occur. Now the stickyDragResize option applies only to images and video content.
The version 4.01 configurator.html page was broken when run in Firefox.
Enhancements
A few of the code modules which are used on almost all implementations have been merged into core.js, cutting down on the number of js files to be individually loaded.
An enhanced tooltip can be attached to the floatbox content using the new 'tooltip' and 'tooltipOptions' settings applied to an anchor.
For HTML content, type-specific options can be assigned to the main type 'html' or to the individual sub-types of 'iframe', 'inline', 'ajax' and 'direct'.
Retired the colorImages, colorHTML and colorVideo options and added per type color settings to options.js.
The showNewWindow hovered background graphic is now preloaded to avoid a brief wink when mousing over the newWindow link for the first time.
Placement of the left side of a tooltip is now proportional to the width of the tooltip.
API library function getStyle() will return a cssText string of all effective settings for an element if no css property name is passed/requested.
v4.01
2010/04/25
Bug Fixes
Image preloader could consume cpu and freeze the browser if preloading a large number of images from a slow server.
In some circumstances the license key would fail to load from the legacy licenseKey.js file.
autoStart:once would not fire.
If more than one image cycler was on the same page, one of the cyclers could jump to the last image in the set during each fade transition.
IE will not show a pdf file from an external domain as a direct-loaded object using the Adobe Reader plugin. External pdfs in IE are now shown as iframe content.
A quick mouse click on a slow-loading page could throw a non-fatal error.
Floatbox could fail to run on application/xhtml+xml pages in some older browsers.
Enhancements
A caption can now point to a hidden div to pick up its html content. This avoids the need to put messy encoded html in the caption string.
When a containing div is assigned the floatbox class to be inherited by child elements in that div, data-fb-options can also be set on the containing div and will be inherited by the children.
v4.00
2010/04/12
Enhancements
Enhanced tooltips. Any element can have a customized mouseover tooltip comprised of any kind of floatbox content.
Non-modal boxes. Added the ability to open, move, resize and switch between multiple non-modal floatboxes simultaneously, allowing a web page to host a virtual windowing system.
Auto-detection of inline, ajax and direct html content dimensions. If the html content has been given a width in some manner, then you don't need to provide width and height settings in the anchor's data-fb-options/rev attribute.
Corners are now drawn and don't use background images. This speeds load time and makes color customization an easy matter of editing the css file.
An IE6 end-of-life autoStart box can be enabled giving IE6 users the opportunity to upgrade their browsers. By default this is disabled, but everybody PLEASE turn this on.
The image/thumbnail cycler will now fade out the old image when the new completes fading in. This prevents the old image from appearing to "snap" out when it is larger than the replacement image.
The cycler has better handling when the next cycle fade fires before the last one has completed.
Added 'cyclePauseOnHover' option to pause cycler image or thumbnail sets on mouseover.
Index links can now show the associated thumbnails as a a pip (picture-in-picture) display in the closest corner of the floatboxed image.
Pdf files can be direct loaded as a media type using the Adobe Reader plugin.
Added 'appendToForm' option which will attach floatbox to a specified form, rather than the body. This is useful for displaying form fields in floatbox on asp.net pages which can have only one active form.
Option setting is now both more flexible and more organized. An 'options.js' file has been added for setting global preferences. Options preferences can be assigned globally, per page, per item and based on class name or content type. (License keys go into options.js.)
The 'floatbox' class can now be assigned to any containing element, such as a div, to activate all anchors in that element without needing to assign the floatbox class to each anchor individually.
If a query string is appended to the floatbox.js include line, the same querystring will be appended to fetches of the module files. This can help avoid stale cache problems when upgrading floatbox versions.
Hidden div styles can be applied directly to the hidden div itself. There's no longer a need for a second nested div for styling.
The API and library functions have been greatly expanded. See the API Reference for a full listing.
Many of the API functions are now available immediately upon load of the floatbox.js file and can be called during the build of the page without waiting for the afterFBLoaded or window.onload events.
The fb.ajax() library function is enhanced in two useful ways:
If the updateNode parameter is used to dynamically add content, all floatboxed elements in that content will be automatically "tagged" and any inline javascript in the fetched content will be reliably executed.
And, the postData parameter can now accept a form element or its id to correctly and easily post the form via ajax.
Added a fb.flashObject library function to easily create flash objects on the base page (and avoid firefox and opera's annoying "click to activate" behaviour).
The 'fb.end' API function can now accept a url parameter to be navigated to after the floatbox closes, similar to setting fb.loadPageOnClose.
The 'fb.start' function has been simplified and now uses just two parameters, 'source' and 'options' (the old syntax still works).
'fb.start' can accept a DOM node reference as a pointer to inline hidden div content to be shown.
'fb.start' will post a 404 notice on failure to find a requested inline div.
The 'fb.preload' library function can now accept an array of image paths to be preloaded.
Shadow background images are preloaded for a more seamless first box display.
A new 'backgroundColor' option has been added that allows the background color to be set for transparent box content.
Added 'autoFitSpace' option. This is the gap left between the floatbox edges and the browser window edge when items are autoSized.
The floatbox now opens exactly centered horizonatally regardless of what box shadows are being used.
When 'startAtClick' is set, the box will now start at exactly the mouse click location rather than the center of the clicked anchor or thumbnail.
Items opened from an 'fb.start' function call will open at the mouse click position instead of the screen center if the call originates from a click action.
If navigation has occurred inside a floatboxed iframe to a new same-domain page, 'showNewWindow' will open that current page in a new window rather than opening the original floatbox content page.
Multimedia content can now be drag-resized. (Dimensions are set to 100% rather than hard pixel values.)
iframe content is no longer hidden while the box is being moved by mouse-drag.
Added direct-loading of vevo.com music videos.
'autoStart' items fire a little quicker on slow loading pages (moved from window.onload to DOM and floatbox core loaded).
4px shadow size and corner radius added, primarily for use by the new tooltips.
Bug Fixes
Hidden div content would disappear if the floatbox showing it was closed before it had completely opened.
Ajax or inline floatbox content that contained more that one javascript block would only have the first block executed.
autoFitOther was incorrectly doing a proportional resize of html content. Now it will just resize the oversized dimension as required.
An attempt to open a secondary floatbox with a close button on it from a floatbox with no close button would crash and fail.
fb.ajax now creates a new XMLHttpRequest object for each request. This avoids obscure problems that can occur with nested ajax calls. (Simultaneous ajax requests are no longer queued but run in parallel.)
tagAnchors was running twice against each iframe at startup
The showNewWindow sprite graphic is now split into two files so that it wouldn't look goofy when the newWindow string wrapped.
Popup thumbnails inside a position:relative div would popup in the wrong place. This was previously fixed in v3.52.0 but the bug was foolishly reintroduced in version 3.54.0.
Captions that contain html with block elements could sometimes fail to display in webkit browsers.
If a floatbox anchor was in an iframed page, and that iframe was in a different folder than its parent page, and the anchor's href used a relative path that was relative to the iframe location, floatbox could fail to locate the referenced item for display in some browsers.
Resize function could set incorrect top and left box positions.
Select elements in inline hidden div content would not show in IE6.
On rare occasions Opera fails to complete an image fetch request. This could cause floatbox to get stuck on its loading graphic. Now the image fetch is re-initiated after 5 seconds.
When box resizing or moving was enabled and iframe content shown, the keyboard shortcuts handler would stop working after focus returned from the iframe window.
In IE6, the transluscent page overlay would not fill the entire screen on rtl (right-to-left) layout pages that were scrolled or resized.
Opera would wiggle and scroll (and sometimes navigate away) the underlying page when using left/right or spacebar keys to navigate a floatbox gallery.
In very rare cases, license key validation could fail on a domain with numerical digits in its name.
maxIndexThumbSize would not take effect if an explicit width or height set on the original thumbnail was less than or equal to the max size request.
For Opera on right-to-left layout pages, cycling image sets could display outside of the containing div and get pegged to the right side of the window.
Fixed inability to open a gallery set defined on the main page from a start call made from an open floatbox.
Fixed inability to load hidden div content using the fb.start() API function when that content was contained in an iframe document currently displayed within a floatbox.
Changes
PDF files are now loaded as multi-media using an object element, so they will now pick up the media color assignment (default blue) rather than the html colors (default white).
Removed the legacy compressed folder. Anyone with include lines pointing to that folder and upgrading will need to change their floatbox includes.
Language localization files now load as dynamic modules rather than with ajax to avoid cross-domain problems when the floatbox files are included from another domain.
Eliminated all (I think) IE memory leaks.
Color theme css files merged into floatbox.css
Removed level or instance restrictions on what can go into a gallery set.
Changed default scrolling value to 'no' for multimedia content.
Replaced 'fb.children' array with the more useful 'fb.instances' array that includes the primary floatbox (fb) as fb.instances[0]. (fb is not in the 'children' array.) The children array still exists to protect pre-existing code that uses it.
'tagAnchors' function renamed to 'activateElements' and expanded to handle new tooltip, cycler and popup content.
'fb.getXMLHttpRequest' function removed. Use 'fb.ajax' directly please. (The old function still works for backwards-compatability with existing code.)
Added handling of line breaks in data-fb-options (rev) values.
'autoTitle removed'. Set caption in fbPageOptions or fbTypeOptions instead. ('autoTitle' is still available for backwards compatability.)
Legacy support for the 'setFloatboxOptions' function removed. (I don't think anyone's using this.)
v3.54.3
2009/11/29
Bug Fix
AutoGallery was broken. Clicking previous or next could open up a second floatbox instead of refreshing the current one.
v3.54.2
2009/11/14
Bug Fix
Image cycler sets inside an iframe would not start cycling at page load on non-IE browsers.
v3.54.1
2009/11/10
Changes
In some configurations, the box could start from the middle of a thumbnail but end to the middle of the screen. Now it will start and end to the same location.
fbCycler divs would fade the captions along with the images, but IE renders text opacity changes very poorly. Now the cycler captions switch without fading in IE (but still fade for all other browsers).
Dutch language localization file corrected and updated.
v3.54.0
2009/11/05
Enhancements
Much more flexible placement of various widgets like captions, info links, controls, etc. in the floatbox border area.
You can now add a second caption to the floatbox border area using the new caption2 option.
Added showNewWindow option which will display a link allowing users to break out of the floatbox and open the content in a new browser instance or tab if they wish.
closeOnNewWindow and showNewWindowIcon options added to work in conjunction with the new showNewWindow capability.
Configurator tool now included which allows you to build your fbPageOptions preferences by selecting option values from a form.
Added fb.ajax() to the library functions to make ajax calls as simple as possible.
Added updateNode parameter to fb.ajax() to enable populating a div with the fetched contents without the need to define a callback function to do it.
AJAX requests are now sent with setRequestHeader('X-Requested-With', 'XMLHttpRequest') so that server side pages can know it is an ajax request coming in.
You can pass custom headers in your fb.ajax() calls using the new 'headers' argument.
Rapid-fire AJAX requests will be queued and initiated when the preceding one completes.
Sped up resizing and fades in IE and old Opera.
(Note: it is highly recommended that you place <meta http-equiv="X-UA-Compatible" content="IE=7" /> on all pages that use floatbox. See "IE8 rendering mode" in the instructions for details.)
Added fbClassOptions which allows you to assign floatbox options or preferences to groups of anchors based on their class attribute.
New thumbnail popup classes 'fbPopright' and 'fbPopleft' added to compliment the previous 'fbPopup' and 'fbPopdown' capabilities.
Can now direct load Yahoo and Vimeo videos (along with Youtube) by using the simpler page urls instead of the embed source urls.
Direct loading of .asf files using Windows Media Player.
allowScriptAccess added to the parameters that you can pass to direct loaded flash.
Image cycler items can now have per-item interval times.
Can use data-fb-src in the cycler instead of the longdesc attribute.
onItemStart and onItemEnd callback functions changed to beforeItemStart, afterItemStart, beforeItemEnd and afterItemEnd. (The old ones still work.)
All before* callbacks will cancel the floatbox action if the callback function returns false.
Added afterFBLoaded callback that you can use to reliably attach your DOMContentLoaded javascript.
fb.start, fb.tagAnchors and the library functions getElementsByClassName, getStyle, addEvent, removeEvent, getOuterHTML, setInnerHTML, and ajax can now all accept a node's id string in place of the actual node element parameter.
fb.getStyle() library function has been extended to convert IE's currentStyle values to pixels to make the function more useful as a library utility.
Added maxIndexThumbSize to scale down the size of the popup thumbnails shown with the index links.
Replaced the showCaption option with titleAsCaption, which controls whether an anchor's title attribute will be used as the floatbox caption.
Language localization improvements: Korean added, Hebrew added, Polish corrected and updated.
Improved IE version detection to better handle IE8 in emulation mode.
No longer zooming in/out to anchors that are off-screen. Floatbox will start from the screen center in these circumstances.
Adjusted css rules so that they apply to the floatbox elements but not to the content inside the floatbox.
Added height:100% to fbContent and media objects to override height:auto from user css.
Set background-color:transparent for all floatbox divs (to over-ride global client css backgrounds)
Reworked the internal getLeftTop function for better positioning in scrolled elements and other obscure circumstances on older browsers.
Bug fixes
Image zoom start and end positions would be out of place if containing elements had -ve left or top offsets.
Image zoom start position was off if a thumbnail image had padding applied.
Identical anchors in an iframe could fail to start on first click, but were ok on subsequent clicks.
Callbacks defined in anchor options could be called twice.
On rare occasions the cycler could fail to start cycling on initial page load (seen only on webkit).
A cycler on the main page was failing to restart after a cycler in a child floatbox was shown.
In gallery sets with animations disabled, images could briefly flash the new image early (before resizing) with distorted dimensions.
fixed jumping bottom border when enableDragResize was active.
fb.getLeftTop was not using the builtin getBoundingClientRect function when it was available, resulting in a small performance hit.
The cross-frame checker would mis-identify a url as being on the local domain if the protocol portion of the url was not specified (i.e., the url began with '//').
Items that had '%' or 'max' width or height could be resized smaller than minContentWidth/Height.
Tweaked the printContents routine to work around IE failing to fire body.onload in obscure circumstances, thus failing to launch the print dialog box.
Hidden divs that had a hyphen, colon or period in their id attribute would not be found.
Removed shadow support for IE6 due to unsolvable display problems.
Known Problems:
No round corners or shadows for IE6 (cleanly falls back to square corners).
No fixed positioning in IE6 (disableScroll doesn't work).
IE 6 & 7 mess up animated gifs shown inside a floatbox.
Some flash files won't play well with ff2/mac.
The keyboard handler doesn't work in Firefox in a secondary non-modal floatbox until after a box element has been clicked.
For flash in SeaMonkey 1.x, and both quicktime and flash in Firefox 2.x, the page won't be scrollable (content might be bigger than window, but at least it's still draggable).
Esc key doesn't work in Maxthon v1. (Not floatbox-specific)
FF2 forms cursor won't blink if form is bigger than the window.
Firefox's back button won't work correctly after an iframe's content has been updated. (Not floatbox-specific)
Opera showing a cyler image set on a right-to-left layout page will reset the horizontal scrollbar to zero at each image change.
On right-to-left layout pages, Webkit browsers (Chrome, Safari) will briefly flash the horizontal scrollbar when doing an animated box sizing.
v3.53.0
2009/07/27
Enhancements
Added image and thumbnail cycling which lets you fade in and out through a set of images or thumbs on your base page.
Improved shadow graphics for more subtle, less 'smudgey' shadow effects.
The graphics for the bottom and top round corners and shadows have been increased from 3000px to 6000px to accommodate really large panorama photographs.
Youtube videos can now be direct loaded using the youtube page url as an alternative to using the youtube embed path.
Can now direct load Windows Media Player content.
Keyboard handler is friendlier to forms loaded from an inline div or AJAX, leaving the tab, enter and spacebar keys active on the form.
Language localization files added for Icelandic and Catalan.
Spanish language localization file updated and improved.
"theme" option changed to "colorImages", "colorHtml", "colorVideo" and "color" rev tag or page option to allow setting a default color theme individually for each of the 3 main content types.
New option "cacheAjaxContent" added to allow static AJAX content to be cached, thereby helping performance a little bit.
The API reference is greatly expanded with many useful utility/library functions documented. You can use the floatbox API for many DOM manipulation activities.
The built-in AJAX library function has been expanded to support POSTs as well as GETs.
Javascript coming in to floatbox from an inline div or a direct string is now parsed and executed. Previously, only script in AJAX content was executed.
Replaced window.onload usage with addEventListener and attachEvent which may help avoid very rare conflicts with other javascript.
Will now recognize a rev option of "type:image" in addition to the previous "type:img".
The license key can now be added directly to the floatbox.js default options or fbPageOptions as an alternative to setting in the licenseKey.js file.
"installBase" setting can be used to point to the floatbox install location if you have renamed floatbox.js to something else.
You can now check the status of your license key by typing "javascript:fb.key()" in your browser's address bar.
Bug fixes
loadPageOnClose could fire when a secondary box is closed. Now it fires only when the primary box is closed.
getIframeWindow & getIframeDocument would fail to return the current floatbox iframe when no parameter was passed.
Script coming in to floatbox via AJAX could sometimes be executed twice. Now it will execute once only.
License key could fail on a domain with a '0' in its name.
v3.52.2
2009/06/07
Added capability to use multi-domain registration keys (so one deployment can go to multiple target sites).
Under rare circumstances, the box could zoom out to the top left page corner instead of to the starting anchor when ending.
v3.52.1
2009/05/27
Fixed: Could not right-justify caption because infoPanel width was miscalculated when round corners were present.
Fixed: Complex caption content could have the wrong height calculated causing it to overflow the box frame. (It was measured before the browser had completely rendered it.)
Fixed: Floatbox could halt in IE6 when minContentWidth or Height was less than the native image dimensions.
Fixed: Gallery set of non-image items could load the overlay navigation preventing mouse access to floatbox contents.
Added 'menu' as an available parameter when direct-loading flash content.
v3.52.0
2009/05/20
Changes
Floatbox now requires a license key file tied to your registered domain name to be installed in order to prevent periodic popup registration reminders from appearing.
The floatbox js files are now provided in compressed form only. There is no longer separate compressed and full-text files in the zip package.
Enhancements
Fullscreen flash is now supported, including for youtube.
minFlashVersion option added for direct-load flash content that needs a particular version of flash (or greater) to run correctly.
Strings displayed when a required plugin is missing or is too old are now translated and in the language files. Visitors will get these messages in their native languages.
The number of quicktime file types that can be direct-loaded has expanded to .mov, .mpg, .mpeg, .movie, .3gp, .3g2, .m4v, .mp4, & .qt
Youtube hi-definition parameter &ap=%2526fmt%3D18 can now be added to youtube direct-load hrefs without conflicting with MSN's 'ap' autoplay parameter.
The start function can now accept a string of html markup to be shown directly in a floatbox.
You can now scriptomatically start multiple boxes simultaneously.
Slovenian language localization file added.
Bug fixes
hideFlash was failing to hide some youtube embeds on webkit browsers.
A second fetch of an iframe content page could occur due to mishandling of image preloading when standalone items were shown.
IE 7 and earlier could fail to autodetect the install path for a page running from inside the floatbox install folder itself if a simple (no folders) relative path was used in the include lines.
The print module would fail to load if showPrint was set in fbPageOptions and not directly on an anchor.
Floatbox would cause a 'mixed page mode' warning when run on https/ssl pages.
Fixed bad fbPopup positioning when the anchor was inside one or more position:relative divs.
hideFlash was failing to hide some simply-defined flash objects, most egregiously, ones that floatbox had direct-loaded itself.
IE could throw an error if an item's scrolling option was not valid (i.e., not one of 'auto', 'yes' or 'no'.)
IE6 could sometimes fail to autoStart because it was waiting for the load of the transparent png helper file to complete.
A box closing down to an anchor that has been moved offscreen (possibly a dropdown menu anchor) would chase that anchor offscreen. Now fb will close to the screen center in those circumstances.
v3.51
2009/04/23
Enhancements
Added allowFullScreen parameter to direct-loaded flash. If your flash file has full-screen support, this will work from a floatbox.
Added afterPrint callback function. Handy for closing the box when printing.
New options minContentWidth and minContentHeight restrict how small a box can be set through drag resizing and when navigating between resized items.
All floatbox control widgets now have their background set explicitly to transparent to avoid conflicts with css rules that globally set backgrounds.
Bug fixes
Some flash was continuing to play sound after the box closed.
Fixed failure to launch from a flash getURL call due to the start function having a return value.
Fixed IE6 failure to launch from a flash getURL call due to self-destruct code in the transparent png handler.
Minor positioning fixes to exactly center horizontally and to allow hard-setting a top postion of zero.
Would not zoom in from a thumbnail if the thumb had align or float positioning applied to it.
Two instances of mis-declaration of variable "t" as a global instead of local var. This could cause conflict with other javascript that also use a global var named "t".
v3.50
2009/04/10
Enhancements
Round corners! - 8, 12 and 20px radius, with and without a 1px border.
Modularized! - now dynamically loads modules as required resulting in faster load and initialization.
Install and graphics folder paths are now auto-detected eliminating the need to manually add install path info into floatbox.js (which a lot of people failed to do).
Callback functions added. You can now set the following tasks to run as required: onItemStart, onItemEnd, beforeBoxStart, afterBoxStart, beforeBoxEnd, afterBoxEnd, onPrint.
Hidden div content is moved, not copied, to avoid duplicate IDs. This allows for dynamic update of hidden div content.
The loading gif that appears over thumbnails while waiting for a zoomed image to load is now normal size and not stretched to the thumbnail size.
Javascript that is included in content loaded via ajax is now parsed and run because browsers often fail to run it on their own.
Added Silverlight .xap direct load support.
Direct load of flash can now pass most any parameter (wmode, bgcolor scale, base, play, loop, quality, salign) on the href's querystring.
Direct loading of DailyMotion and Metacafe flash.
Easier use of the compressed files. Just point your include lines to the "compressed" folder.
The transparent png shadows now work on ie6. (But ie6 still doesn't get round corners due to rendering errors.)
Now prefers assigning a class of "floatbox" to anchors instead of setting the rel attribute (but still recognizes old-style floatbox rel attributes).
Added "group" option for the rev tag as the preferred method to group items into gallery sets.
New sizeRatio option allows setting dimensions to maximum that will fit the screen while retaining a defined width/height ratio.
New enableDragResize option allowing users to manually resize the displayed floatbox. Retains width/height ratio for images.
proportionalResize option added to force proportional drag-resizing on html content floatboxes (good for flash in an iframe, for example).
stickyDragMove and stickyDragResize options added which cause user-initiated size and position changes to persist across different items in a gallery set.
centerOnresize option added which keeps the box centered if the user resizes the browser window.
centerNav option which will center the < prev | next > controls in the middle of the box frame.
imageClickCloses option added which allows closing the box with a - you guessed it - click on the image.
randomOrder option added which will randomize the order of your gallery sets (sometimes a nice option for slideshows).
Added utility functions to easily get a floatboxed iframe's document and window.
Added fbChildOptions for setting secondary box options preferences from the host page.
Better sequencing for less background flashing during transitions. Now you get no black between image changes if animations are off.
Removed spinning "loading" gif between item change-overs. It was distracting.
Added white background to the zoom-in image to help out images that have transparency.
Image pre-loading is now started from window.onload so it cannot ever compete with the page load for network or browser resources.
Print... and Info... text is now styled from the css for easier customization.
You can now use either a data-fb-options attribute or the rev attribute for assigning floatbox options to anchors. This lets you use rel="nofollow" for search engines.
New Bulgarian(bg) and Romanian(ro) language files (we now have support for 27 languages).
Russian(ru), Dutch(nl), Italian(it) and Greek(el) language files corrected and updated.
Now properly handles escaped chars of the form { in the caption.
No longer resets/refreshes an iframe's content when fb.resize() is called.
Added themed loading_iframe backgrounds that are displayed while iframes are loading. Previously the display was always white, regardless of the color theme in use.
When disableScroll was true and the page scrolled, images zooming out on end would start too high on the screen by the scroll amount.
Ctrl-Tab didn't work when a floatbox was open. Now all alt/ctrl/shift modified keys are passed through to the browser.
Ctrl key was ignored in IE on floatboxed items inside an iframe.
Fixed keyboard handler. Iframes could refuse to load in IE if the keyboard handler was turned off.
fbPopdown wasn't in the css so no "popDown" could function.
Index links wouldn't work when run from a secondary box.
Made the css for the caption color more specific to avoid css conflicts.
Changed opacity handling to avoid problems with very small opacity values.
outsideClickCloses would not work if the overlay opacity was set to 0.
Screen would flash to white for a split second when ending a box with flash in it.
Eliminated scrollbar flash when switching to a wide gallery item.
Eliminated screen flash that could happen when the page was scrolled and a large floatbox item had stretched the body.
Fixed bug where IE could lose the mouse on drag because iframe content was not hidden while dragging.
Querystrings could trash floatbox if they had the same value as floatbox properties or functions. Now they can't.
An extra and erroneous get request for the host page was being made which could disrupt state or database driven sites.
The zoom image could start and end off-position in some rare complex hierarchies of nested and floated divs.
Housekeeping
Removed support for really old browsers (ie5.5, safari2)
printCSS option can now be set in both the default and the page options.
Box now closes down to the anchor pos even if that anchor is scrolled offscreen.
Non-zoomed start-at-anchor ends at the same starting anchor.
Better/simpler handing off of keyboard handler between boxes.
Simplified event finding in IE. No more recursing the frame collection. (faster, safer)
Better frame recursing for hideElements that does not depend on try/catch exceptions for x-site iframes
Cleaned up the way page and rev options are managed.
Tidied up use of 'this' vs. 'fb'.
Tidied up shadow positioning and shortened the css.
Split colour themes off into seperate css files loaded as modules on demand.
Renamed .fbParent to .parent (but kept .fbParent too).
Now using getBoundingClientRect when available (faster box starts).
loadAnchor() now returns true/false if it succeeds or not.
Auto-loaded multimedia objects now use the floatbox level to create a unique id for the object (id= fbObject, fbObject1, fbObject2, etc.)
The autoSizeImages and autoSizeOther options have been renamed autoFitImages and autoFitOther (but the old option names still work too).
The start() function has been modified so that it is now the preferred way to load floatbox from code. loadAnchor() is now considered a deprecated legacy function.
Moved doSlideshow option into the js default options.
For autoGalleries, rel="nofloatbox" allowed as a className too (class="nofloatbox").
v3.24
2008/12/01
Enhancements
Ctrl-click and shift-click on image or iframe content opens in a new browser window or tab instead of loading floatbox as if a normal click was done.
New rev attribute option "href" added to provide alternate content for javascript-disabled browsers.
See the instructions for details.
RTL (right-to-left) page layouts are now supported with reversed navigation and updated screen measurements and layout.
Slovak and Arabic localization languages added.
Bug Fixes
Floatbox was not releasing the keyboard handler for Opera, thereby disabling the keyboard after floatbox was closed.
In secondary floatboxes, the overlayed previous and next controls and the resize magnifying glass in the top left would not display.
This was because their opacity values were mistakenly divided by 100.
In mixed content galleries (with both images and html pages), the wrong format for the "(x of y)" item count display was being used.
v3.23
2008/11/23
Enhancements
The early DOM loading routine that initializes floatbox prior to all images being rendered on a page has been updated and optimized.
Floatbox is now much better at early loading for IE browsers and it is now quite difficult to click an anchor before floatbox is ready.
The translucent overlay is displayed early when floatbox is zoom-starting from an image that is slow to load.
The fb.resize function now checks to make sure dimensions will change before applying the sizing change.
This is to avoid infinite call loops when resizing an iframe via onload. (An iframe will re-run its body.onload function after a resize.)
Bug Fixes
Opera would crash floatbox if hideFlash was true and the page included an iframe with a src from a different domain.
IE would crash floatbox if content inside an iframe included indexLinks and that content was refreshed without re-loading the page.
v3.22
2008/11/15
Bug Fixes
Captions displaying html anchors whose href attributes included a multi-item querystring (one with ampersands in it) would fail to render correctly.
Floatbox options could erroneously be picked up from anchor href querystring items within an html caption.
Enhancements
Shadow effect has been extended. In addition to the "drop" shadow on the left and bottom sides, you can have a "halo" shadow on all four sides.
Shadow size is adjustable to 8, 12, 16 and 24 pixels.
Browser cacheing of content fetched via AJAX is now disabled.
This helps when a reload of dynamically updated content is required, especially for IE.
Inline div and multi-media content is now fetched at display time, not at initial load time.
This can also help reloading of dynamically updated content.
Popup thumbnails that aren't floatbox enabled will now hide when clicked.
Croation language localization file added.
v3.21
2008/11/03
Bug fixes
Browser detection routines would break when floatbox was included on pages that also ran the prototype.js library (and quite likely other libraries as well).
Floatbox looked for the presence (or absence) of document.getElementsByClassName to detect old Opera and Firefox versions, but prototype adds this function for those browsers.
Browser detection is now done exclusively with the navigator appVersion and userAgent strings.
Some installs of IE7 ignore "return false" in the onclick action of an anchor element.
This would cause IE to try to load the page referenced in the href attribute of the close link.
Depending on page configuration circumstances the result could be a base page refresh, unwanted navigation to a default page, a directory listing, access denied, page not found, or a session re-authentication prompt.
This is fixed by setting the event returnValue to false for IE just prior to executing "return false".
IE6 can show transparent speckles in place of full-black pixels when opacity is less than 100%, messing up fades a little bit.
This was fixed by setting the content background color to black for image displays in IE6.
Enhancements
autoStart option has been extended to accept 'once' as a parameter.
An item with "autoStart:once" on its rev attribute will be auto-shown only on the first page load of a session.
(Client browser must allow session cookies.)
Floatbox's main content div's background color is now white instead of transparent.
This is helpful for html content that is being displayed when the color theme is neither 'auto' nor 'white'.
autoGallery option added to the floatbox.js options section.
Finnish language localization file added. (Thanks JIK!)
v3.20
2008/10/19
Enhancements
Floatbox can now auto-create an image gallery without rel and rev tag markups on the page anchors.
Just set autoGallery to true and every link to an image on a page will get added to a floatbox gallery (unless the rel attribute = "nofloatbox").
There's also a new autoTitle option which will set the title attribute, and thereby the floatbox caption, for each autoGallery item.
Print option added. Displays a print link in the info panel which will print just the contents of the floatbox, not the entire page.
You can assign css settings to the print document if needed for proper print layout.
Can optionally display a series of index links for galleries in the caption or info panels with popup thumbnails when hovered.
The index links look like this: 1 ... 121314 15 161718 ... 99.
The number of links shown is controlled by the new numIndexLinks option.
By popular demand resizing animation can now be split, setting width or height first and the other dimension in a second pass.
Info and Control panels can now be located at the top, bottom, left or right. Info panel can be centered.
Positioning of floatbox on the screen can now be controlled with new boxLeft and boxTop options.
Set these to fixed pixel values, percentage offsets, or 'auto' for default centering.
Configuration options such as urlLanguages, preloadAll etc., can now be set as page-specific and query-string options, not just in the .js code.
Use the new fbPageOptions object syntax as described in the docs to do this.
Floatbox can now be dragged (relocated) with the mouse. Disable this with the new enableDrag option if you like.
Smarter loading when included on cross-domain iframe heirarchies where a child iframe is coming from a different domain than a parent document.
Now floatbox will attach to the topmost document that is in the same domain, but will not try (and fail) to attach to a document in a different domain.
Opera and just about all Mac browsers except Safari 3 can't show custom cursors.
The resize tool is now set to the top-left widget for these browsers.
Slideshow is now paused if an "Info..." item is clicked.
For stacked floatboxes, if tooltips are set to show once they will be cleared for both the parent and child boxes, not just the current floatbox.
A new class of "fbPopdown" sets up popup thumbnails similar to "fbPopup" ones, but the fbPopdown class will appear beneath the hovered anchor, not above it.
New API addition: fb.fbParent var is available to reference the floatbox immediately beneath the top one when there are stacked boxes.
An autoStart request passed in the page's URL query string will no longer invoke an item that has showThis:false as a rev attribute option.
This gets around a problem of launching a slideshow when you are trying to autoStart a single item from a group.
Lots of testing and changes to increase reliability in old browsers and on OS X Macs.
New language localization files: Polish, Czech, Galician, Norwegian and Vietnamese.
Bug fixes
Floatbox could fail on exit and cause the host page to load a directory or a default page when displaying an image that was launched with fb.loadAnchor.
Some safety checks were added to the routine that looks for thumbnails associated with image anchors and this has fixed the issue.
A combination of two bugs consipired so that attempting an AJAX load of an item whose anchor includes a query string with a reference to an image would fail.
Flash that was added to a page using the swfobject library would fail to unhide on floatbox exit.
Floatbox would fail in Safari 3.0 due to the RegExp.compile function not being available in that browser.
Direct loaded Flash was not displaying in a number of older browsers on Macs.
Flash's wmode was changed to "window" for these browsers and they seem to work fine now.
Direct loaded Quicktime was not displaying in Safari on Macs.
To fix this, an embed is used rather than the standard object syntax if a Mac/Safari browser is detected.
The 404 image that is displayed for image links that can't be found would break if shown a second time in a floatbox session.
Safari 2.x would not run floatbox at all. Now it does, but not very well. This is not a supported browser.
Scrollbar flashes that could appear on floatbox start and during transition between gallery items have been eliminated.
Changes
If width and height are not provided in the rev tag for a non-image item in a gallery group, dimensions will be inherited from the previously shown item.
Because the control panel can now be located at the top of the floatbox, all options and DOM object names that referenced upperNav and lowerNav have been changed to navOverlay and navButton.
If you have the old syntax nav options on your pages, they will still be recognized without making any changes.
Secondary (stacked) floatbox background overlays now default to no animated fading.
Compressed versions are now provided as gzipped files and instructions for use on Apache.
The fb.rex collection of regular expressions has been discarded and the regular expressions disbursed throughout the code for easier readability and maintenance.
The vertical positioning of the popup Prev and Next widgets over images has been improved and can no longer be pushed below the image.
The frame buster buster that blocked attempts by external pages to reload themselves into the top document was removed.
It only worked in IE and Opera and caused very obscure problems in a few circumstances.
Floatbox DOM restructuring and css changes were made to support flexible positioning of the info and control panels.
There was a documentation error that said to use loadPageOnClose:this to reload the host page.
The correct setting was loadPageOnClose:self. Now floatbox will accept both "this" and "self".
A documentation error that stated that setting width and height by percentage was not available has been removed.
You _can_ set width and height as percentages of the screen dimensions.
Modified keyboard handler attachment strategy which makes it a little more robust in complex stackings of multiple floatboxes.
v3.12
2008/09/13
Bug fixes
A serious problem with IE6 detection.
Floatbox used the jscript version number to detect IE6.
In XP Service Pack 3, Microsoft updated IE6's jscript to the version used with IE7, which caused floatbox to recognize the browser as IE7.
This misdetection created a number of problems for IE6 site visitors:
- no transluscent background overlay
- messed up drop shadows (IE6 can't render transparent png images)
- focus outline showing on clicked navigation controls
- select elements on host page could bleed through
- flashes during transition between items
- messed up positioning if disableScroll (aka fixed positioning) was configured.
There is still a lot of IE6 being used (>25% market share).
Unfortunately, this means EVERYONE should update their floatbox installation.
(There's also a version 2.x update down below with this fix in it, but that's the last udpate that will be made on that version stream.)
If you want to just patch your current installation rather than re-download, see this forum topic for a replacement IE6 browser detect.
But you really should update to the latest version to keep clean and current.
The Swedish language file was not saved as UTF-8 so the unicode arrow characters did not display.
IE8 beta 2 was messing up its lower navigation layout in fixed positioning.
As a precautionary measure, the lower nav controls were re-structured to avoid this in case the IE8 production release has the same problem.
IE on XP is unable to display the tooltip arrow characters unless the XP language packs are installed.
A detect for XP was added and the tool-tip arrows switched to ascii art for IE on XP.
Flash and Java would successfully hide only on the top document, not in child iframes. (updated 2008/09/15)
Floatbox-enabled links inside ajax content could be a little slow to initialize causing them to open in the top doc if clicked quickly. (seen only in Chrome, updated 2008/09/17)
v3.11
2008/09/08
Bug fixes
Some bad screen flashes were happening in Firefox 2.x when navigating between grouped items (like an image gallery).
This was fixed by toggling fixed/absolute positioning rather than toggling display=none when measuring the screen.
Flash in an iframe in Firefox 2.x was not getting any mouse inputs.
This was fixed by setting postion=fixed for all iframes in Firefox2 that fit the current screen dimensions.
Again with the firefox - FF2 was not displaying video in quicktime movies.
Again, the fix was to set position=fixed for this combination of browser and content.
Firefox 2 was refusing to display some flash, and Firefox 3 was refusing to display some other flash.
Both of these were fixed by forcing wmode=opaque for FF2 and wmode=window for FF3.
A stoopid typo was preventing the loading gifs from displaying when initial content was slow to load.
IE8 beta2 was sometimes choking when appending content from an inline div.
Fixed by wrapping that code in a try/catch and setting innerHTML if it fails.
AJAX content loads could show "Unable to fetch content..." briefly before showing intended content. Not no more.
(This fix was patched into the v3.11 download on 2008/09/10.)
Enhancements
Since support for fixed positioning had to be added to fix the Firefox problems,
a configurable option - disableScroll - was added which allows floatbox to be shown with position=fixed.
Setting disableScroll to true locks floatbox in place on the screen and causes it to ignore any scrollbar actions. (Except IE6 that can't do fixed positioning.)
Note that fixed positioning is not applied if the floatbox content won't fit in the available screen area, because we'll need the scrollbars to work in that case.
A beneficial side effect of setting fixed positioning for Firefox 2 iframes is that now the blinking cursor in form fields will no longer vanish.
A small page named loading_iframe.html has been added to the graphics folder.
Iframes load this file before setting their src to the desired content.
This lets floatbox display the rotating loading gif while slow iframe content comes in.
Language localization file for Swedish added.
Housekeeping
A bunch of code changes/improvements that I'm too lazy to list here because it's past my bedtime.
v3.10
2008/08/31
3.10 is a major new release with many new features and capabilities.
See the new demo and instructions pages for details, and please visit the new forum for feedback and support.
Direct loading of flash and quicktime
Direct loading of YouTube, Yahoo Video, and many others
HTML content via AJAX and inline DIVs
Zoom from thumbnail to image and back
Popup thumbnails
International language localization
Graphics without English text for non-English browsers
Better animation fades and resizes during transitions and when closing
Multiple floatboxes can be stacked
Info box for descriptions, EXIF, help, etc.
Resize images by clicking on them (with a custom cursor)
Auto-detection of content type
3D drop shadows
Some things have been removed.
Fixed positioning (aka, disabled scrollbars)
IE quirks mode support. Now all your floatbox pages need valid doc types.
Modal mode. I don't think anyone was using this, and you can re-create it through the other options if you need to.
Resizing width first or height first. V3 only resizes dimensions all at once.
Large sized control gadget graphics and associated css stylesheet no longer included.
Known problems.
No blinking cursor in forms for Firefox 2. (Fixed in v3.11)
QuickTime video does not show in Firefox 2. It plays, but no video. (Fixed in v3.11)
Sizing and positioning is off in IE7 if the browser page zoom is more than 100%.
v2.47
2008/09/13
Bug fixes
See the v3.12 change log notes above for details on the IE6 browser detection problem.
v2.46
2008/08/04 (updated 2008/08/25)
Bug fixes
IE6 select elements could be messed up after floatbox hid and then showed them.
Now unhidden elements have focus applied to them for firefox 2.x, which is the only browser that needs that done.
IE6 on an SSL site would throw mixed-mode security warnings when loading iframe content.
Fixed by adding an empty src value to floatbox iframes when they are created.
Relative links in a hierarchy of iframed pages could get lost with floatbox being unable to determine what the links are relative to.
Fixed (I think) by using anchor.href instead of anchor.getAttribute('href') in the code.
Browsers seem to expand the .href values into absolutes for us.
Enhancements
Added option to hide Java applets when starting floatbox.
Applets can bleed through the overlayed display the same way flash can.
Added additional default div settings to the css to reduce the potential for conflicts with other css styles.
Housekeeping
I grew weary of seeing all those "Floatbox.prototype" statements so I collapsed them into one prototype object.
Fixed minor logic error in firefox browser detection.
v2.45
2008/07/07
Bug fix
A nasty bug: Firefox2 could hard-crash on floatbox exit if there was an object element in the displayed floatbox content.
Anyone displaying multi-media or other plugin content with floatbox needs v2.45.
v2.44
2008/06/28
Enhancements
I was very disappointed to see that Firefox 3 is now the worst browser at displaying content based on javascript DOM instructions, throwing off a bunch of spurious renderings and flashes.
I've added some short delays to the code which allow ff3 time to catch up and remove some of the problems.
Unfortunately, it will still bleed through underlying iframes while rendering images on slower machines.
By popular demand (one person asked for it) you can now turn off aggressive image preloading by setting preloadAll to false in the floatbox.js file.
The focus is now removed from the clicked anchor thereby preventing that anchor from having an outline when floatbox exits.
Particularly important for Opera 9.5 which leaves a very strong blue box around active anchors.
Bug fixes
A floatbox that was very close to full screen height and had a caption that wrapped could have the animated loading image continue to display behind iframe content.
The controls (nav, close, etc.) could flash on the screen in weird places just prior to the floatbox opening up. These are now hidden until the box is ready.
v2.43
2008/06/21
Updates
Opera 9.5 is out now, and they changed the way screen measurements are returned.
The result is that vertical positioning of floatbox is way off in Opera 9.5.
In some cases it can be off the screen.
(They're returning body height now in the property where they used to return screen height.)
Sorry, but everyone should move up to v2.43 to support Opera visitors.
The good news on Opera 9.5 is that their javascript engine is now much faster (it's still slower than just about everyone else though).
This means the animations now run adequately (but not great). I've removed the allowOperaFades (defaulted to false) option.
Bug fixes
Again with the Opera. The browser would crash every time a child iframe with floatbox stuff in it would get refreshed (but not if the whole page refreshes).
Not no more.
In IE6, the overlay would only cover the top inch of the screen on initial load until the floatbox was drawn, at which point the overlay would go full screen.
It is now full screen right from the get go.
For firefox2 on a mac, flash objects that were hidden at load time would not become visibility after termination until they were clicked.
Now floatbox clicks them for you at the time of unhiding.
v2.42
2008/06/03
Enhancement
HTML entities are now decoded before being assigned to the caption.
This enables placing clickable anchors in the floatbox caption.
Encode the following characters in your caption strings: &(&) "(") <(<) >(>) and optionally '(').
If you're using php, the htmlspecialchars() function will do this for you.
You can now have multiple items with the same href but different title or rev options on the same page.
Previously, only one matching href per page would get used.
Helper added so firefox 2 on a Mac will show flash objects after they are un-hidden. (2008/06/15)
Bug fix
Play and pause controls could fail to display when running a slideshow for the second time.
(This fix was patched into v2.41 too.)
Housekeeping
The innerHTML assignments that update the caption and item count display are now wrapped in try/catch in case the caption string has malformed html in it.
Unnecessary quotes removed from the defaultOptions object. (2008/06/15)
v2.41
2008/06/01
Enhancements
Added 'enableWrap' option. When set to false this disables 'previous' navigation when on the first item of a collection, and 'next' navigation from the last item.
Useful for displaying something like a sequenced instruction set where navigation wrapping doesn't really make sense.
Note: Adding this option required some new images and css changes. As always, if upgrading, upgrade the whole package. Don't mix and match versions.
Added a 'caption' option that allows setting a caption via the rev attribute instead of the title attribute, thereby separating browser tooltip behaviour from floatbox's caption.
To use this, put "caption:`Some caption string`" in your rev attributes. Note the backquotes - they're required.
Added 'auto' as the default colour theme. This uses the black theme for images and the white theme for iframe content.
Added 'allowOperaFades' option and set the default to false.
Opera is atrocious at rendering opacity fades - very slow, very jerky, very irritating.
It's best to leave this set to false to spare Opera users (all 12 of them) the self-inflicted pain.
Moved image preloading out of window.onload and into the more reliable dom-loaded code.
Too many pages have other javascript that stomps on window.onload and were thereby preventing floatbox image preloading from happening.
Backed off on the image preloading aggression a little by inserting a 200ms timer between image preloads.
This helps the suspension of preloads during floatbox item changes, improves loading of floatbox control graphics on slow connections and gives the underlying page more time to load its objects.
Controls are now moved off-screen rather than hidden when they're not being used so that their background images will preload and be ready as soon as the controls are displayed.
Bug fixes
Cleaned up some errors in some regular expressions that didn't materially affect behaviour.
Eliminated an IE6-only display flash when fading in images by starting the fade at 0 rather than 10%.
Housekeeping
Overhauled the instructions making them shorter and clearer.
Changed the regexp tests for 'showThis' and 'autoStart' checking to allow the alternate options syntax (qryString-like, css-like).
Enhanced the parseOptions routine so that it can accept backquoted strings containing otherwise toxic characters.
This is to allow the 'caption' and 'loadPageOnClose' options to be set in rev strings.
Removed some unnecessary empty string assignments.
Changed array, object and regexp constructors to literals.
v2.40
2008/05/26
Bug fixes
The early loading routine could fire before the document was ready in IE in an iframed child document.
Found a better alternative that now seems to correctly load in IE for both framed and flat pages.
If an iframed child document was reloaded, groups of floatbox items could get duplicate items added to the existing list and the item count could double.
(This is when only the child was refreshed, not when the top doc refreshed.)
Now the tagAnchors routine checks for pre-existing duplicates before adding a new anchor to the list.
When navigating or reloading a child iframe document, a previously captured anchor could be dereferenced but still be in the array of tagged anchors, causing code failure when a new anchor was clicked.
Derefenced anchors are now removed from the floatbox array at each load.
IE loads nested iframes in reverse order (child first) and will then mistakenly garbage collect the top floatbox object when the first-loaded child is refreshed/reloaded.
The init routine is restructured so as to force loading documents in parent-first order.
IMPORTANT: You now have to have floatbox.js included at each level of a multi-level nested iframe structure.
Enhancement
Added new option to have floatbox session cookies apply to an entire site or be restricted to the active subfolder.
(Previously was always subfolder based.)
Housekeeping
Changed all the core member functions to prototypes to reduce memory leaks in IE.
Restructured the css and images folders for the larger control graphics.
These are now off in their own images/big subfolder, making them easier to delete if you never use them.
I haven't seen anyone use them (by referencing floatbox_big.css) and one day I may drop them from the package.
Reworked most references to 'self' and 'top' so that maintenance of framebox.js is easier and the intent of the code is more apparent.
v2.39
2008/05/22
Enhancements
Added a "404 - not found" image that is displayed if the image pointed to by href can't be loaded. Previously you would just get the "loading" box forever.
Changed right click behaviour on the upper nav panels so that the image context menu appears, allowing image saves, viewing image properties, etc.
(Note: doesn't work in Opera or Firefox 3 RC1.)
The navigation control hrefs are now updated with the previous and next urls so that the browser status bar display makes more sense.
(Note: these hrefs point to the current image in Opera and Firefox 3 RC1 so that right-click "save link as..." fetches the current image (see the right-click enhancement above)).
Initial display and resizing of the floatbox now waits until the overlay has faded in instead of happening at the same time, yielding smoother and sequential animations.
The initial display of the 'loading' floatbox that occurs when the first item is slow to load is now delayed on a timer for a half a second to avoid floatbox size jumps on quick loading items.
Set css over-rides for floatbox <a> element borders, backgrounds, margins and padding so that styles set elsewhere don't interfere with the navigation gadgets.
Set visibility=visible on the floatboxed item in case other css or js is setting things to hidden.
Bug fixes
Opera was failing to display iframe content. It would just show an empty floatbox and the hourglass unless an alert was fired or the .src property was toggled to "" and back.
(Opera is almost as big a pain to code for as IE is. I'm not sure why I bother.)
Housekeeping
Reorganized user-settable options section into catagories (general, navigation, animation, etc.).
The spacing in between the lower panel controls and caption is now set in a variable (a property actually) near the top of the code so you can tighten it up more easily if you need to.
Now using the more efficient + operator to convert to numbers instead of parseInt and parseFloat.
v2.38
2008/05/11
Enhancements
Added support for launching floatbox from image map areas. See the instructions for details and the demo page for an example.
Added 'random' to the resizeOrder option choices to allow a mixup of width first, height first, and both at once resizing.
Changed 'overflow:auto' to 'overflow:hidden' in the css so that narrow titles (captions) with long words in them will truncate rather than display scrollbars.
Bug fix
Background overlay did not completely fill the screen if the following conditions were met: IE6 or IE7 quirks mode, content inside an absolute positioned element, and screen was scrolled.
v2.37
2008/05/04 (revised 2008/05/09)
Enhancements
The empty floatbox (with the animated loading gif in it) is now displayed immediately upon start.
Previously people on a slow connection or having other trouble loading the first image would get just the overlay and no floatbox until the first image completed loading.
Alternate version which constrains the floatbox display to a containing iframe or frameset child is now included in the package.
Use framebox.js instead of floatbox.js to do this. See the instructions for details.
The pause/play control background images are now preloaded so there is no apparent delay when the controls are first used.
All timeout functions plus the callback functions for the fade and resize animation routines now use true functions instead of eval strings, making floatbox.js easier and safer to compress should you choose to do so.
Bug fix
Setting options via cookies was broken for Opera.
The cookie specs call for a limit of 20 cookies per domain. Opera enforces that limit.
Each option was in a separate cookie and there were more than 20 of them.
Now, only one cookie is written which contains all the options concatenated into one string.
Housekeeping
A lot of cookie handling code was discarded and replaced with much more compact and quicker executing code.
The scaling code that sized things down to the available screen space is now smaller and quicker.
The string localization options are now all prefixed with "str", making them easier to exclude from being lower-cased and added to the option cookie.
v2.36
2008/04/29
Enhancement
Since the use of 'P' and 'N' was removed from keyboard nav in v2.35, the upper nav graphics were redone so that those letters are no longer underlined. (The gif sizes changed, so floatbox.css is changed too.)
Bug fix
Preserve case for customized localization strings.
v2.35
2008/04/23
Enhancements
Added resize functionality. A small resize button can be shown in the top left corner of images that have been scaled down to fit the screen or that are displayed larger than the current screen size.
Animated resizing can now be configured to resize width first and then height, or height first then width, or the default behaviour of resizing everything at the same time.
Due to a couple of reports of arguments between floatbox.css and other style sheets on the floatboxed page, specificity of references in floatbox.css has been greatly increased. This should cut down or eliminate css conflicts.
Image preloading is now temporarily suspended during display redraws so that browser and cpu attention can be focussed on presenting smoother transitions.
The showing of tooltips (nav hints) can now be configured to show once, show always, or show never.
When tooltips are set to show once, they are now on a timer to ensure the user has had sufficient time to read them before they are turned off.
Show-once tooltips are now turned off if the user navigates with the corresponding keyboard shortcuts (because the user obviously already knows the keyboard shortcut).
When resizing between displayed items results in scrollbars appearing or disappearing, floatbox positioning will be adjusted to better fit the new visible display area.
Control graphics have been updated for the blue and black themes to subdue the highlighted black controls a little and to make the blue controls less blue-on-blue.
Improved colourization of the upper navigation graphics.
Flash and IE6 selects that were hidden on the host page when floatboxed started are now not revealed on exit until after the overlay has finished fading out.
Documentation is improved with a more concise instructions page and the inclusion of an options page detailing floatbox's 48 (yes, 48) configuration settings.
Navigation hints (tooltips) are turned off if modal mode is in effect (because keyboard navigation is also turned off).
Keyboard shortcuts now consist of only left and right arrow (prev/next), spacebar (play/pause), tab (resize), and esc (exit). The additional letter-key shortcuts have been removed because they are not necessary and they complicate communication to the user about how keyboard navigation works.
Bug fixes
For IE6, the page overlay width could be slightly shy of the visible display width under particular circumstances. An additional screen measurement has been added which eliminates this.
For IE, iframe content was displaying frame borders when configured not to. (The frameBorder attribute is case-sensitive in IE.)
Housekeeping
The upper navigation was previously built from nested <a> elements, with the prev and next buttons residing inside the transparent nav panels.
While this worked, it was a violation of the DOM model where anchors can not contain other anchors.
They have now been split into sibling elements.
Doing this has made upper navigation function properly under IE8 beta 1.
Default options are now set in an Object structure, rather than as member properties.
Parsing of options from the different sources has been greatly streamlined and eliminates code that required relisting of all the option names.
Keyboard handlers now call the mouse event handlers for the navigation controls rather than replicating that handler code inside the keyboard handler function.
The image preloading routine now supports preloading a single image in addition to its previous behaviour of chaining preloads for all images. This is to enable preloading of the first image without major disruption to the main document load.
Reading of iframe options from the rev tag now uses the generic option parsing routines rather than replicating some of the code inside the loadItem function.
Resizing of images was moved out of the onload handler for images and into the setSize() function where it belongs.
v2.30
2008/04/12 (revised 2008/04/15)
Significant look and feel improvements - floatbox now looks the way I want it to. Also, improved support for multimedia content in iFrames.
Enhancements
Redrew all the graphical controls. The new ones are much tidier, smaller, less obtrusive and are a better visual fit with different underlying web site designs.
Completely reworked all the color themes. They are now less garish and quite presentable. They're also a good base from which to start your own theme customizations.
Added support for exact sizing and no scrollbars for iframed content, enabling effective display of multimedia content with no centering or framing issues.
Tootips (the yellow popup navigation hints) appear only once for each control. Once the user has seen them, they do not intrude for subsequent mouseovers.
Controls in the lower panel now have mouseover highlighting. Thanks go to MECA Computer Consulting Pty Ltd. for suggesting and demo-ing this.
More aggressive image preloading that improves responsiveness when a user clicks on an image other than the first one.
An alternate css style sheet (floatbox_big.css) and associated graphics are included which provide bigger nav controls than the default.
The stylesheets have been restructured and commented to make customization easier.
Autoresizing now is done in two passes rather than one. This helps get the height correct when the lower panel changes height between content changes.
New option "enableCookies" added and set to false by default. This is so the cookies don't override the floatbox.js options while you are setting things up. If you want to use cookie options, don't forget to set this to true.
Changed reloadPageOnClose to loadPageOnClose which now accepts "this" to reload current page, "back" to load the referring page, or a url to navigate to a new page when floatbox closes.
Installation and configuration instructions are now included in the download package.
Added disableScroll option which uses fixed positioning and thereby blocks scrollbar functionality for content that fully fits the screen. (This one is against my better judgment. I don't think you should disable your visitor's browser controls.)
Bug fixes
Floatbox could fail to initialize on some pages in IE6 and IE7 quirks mode (no doc type) due to the window.frames collection containing non-existent child frames.
The early loading code that allows floatbox to be active before all the page images are available was seen to cause IE7 to delay the load of the entire page. The early loading code has been reworked to avoid this occasional delay.
Fixed jerky animated resizing in firefox when displaying iframe content.
If an animated resize was interrupted before completion by another resize due to user navigation, the final positioning could be whack.
Caption fonts were cut-off a little bit if the host page had a small font-size assigned to the document body.
Eliminated a vscrollbar flash that could sometimes occur when going from wide to narrow content.
Scrollbar flashes and small floatbox size jumps could occur during resizing due to inconsistent application of border measurements.
Housekeeping
The floatbox_ifload.html file that provided smoothish transitions between iframe content changes is no longer required. The iframe content is now simply cleared during content changes, providing the same effect with less fuss.
The animated resizing routine has been reduced in size and complexity and is now more comprehensible.
v2.21
2008/03/31
Enhancements
Page-specific options can be set by a javascript function added to the document head. See the instructions page for details.
Config options can be read and written through session cookies, enabling end-user-selectable preferences.
Much better support for content in nested iframes. Iframes can be nested arbitrarily deep and have floatbox-enabled content at any and all levels.
Housekeeping
Serious code restructuring. Prototypes changed to member functions. Better global var handling (enabling the better iframe support).
v2.20
2008/03/29
Bug fixes
More sizing and positioning trouble. Horizontal centering was off if the underlying page was scrolled to the right. Vertical poistioning and sizing was slightly off in some browsers if there was a horizontal scrollbar and the doc height was close to the window height. Both of these have been fixed.
Failure to load for non-IE browsers on pages with no doctype.
Housekeeping
Some code optimizations and tidying.
v2.19
2008/03/24
Enhancements
Added the ability to automatically start floatbox on host page load by including "autoStart:true" in an anchor's rev attribute.
Added the ability to reload the parent page when floatbox closes by setting this option in floatbox.js or by including "reloadPageOnClose:true" in an anchor's rev attribute.
Text for the "Image x of y" display was moved to the string configuration area of floatbox.js to allow language or other customization of this string.
Bug fixes
IFramed content in Firefox was being pushed off the bottom of the screen if the host page was scrolled down. This was because iFrame content is set to fixed positioning to work around the blinking form cursor problem, but I was mistakenly adding the scrollTop offset to this fixed content. The scrollTop offset is now added only to absolute positioned content.
Browser window measurements were off for non-IE agents when scrollbars were present. This was resulting in content being off-center and wrongly autoSized.
Spacebar usage was not correctly taken over for Opera. Pressing spacebar in Opera for play/pause would scroll down and/or jump to another page. Floatbox now blocks onkeypress events thus forcing Opera to behave.
v2.16
2008/03/02
Enhancements
Lower navigation (prev||next) is now graphical rather than text.
When it was text a user could mess up the layout by increasing the browser font-size preference.
The new graphical nav controls maintain constant dimension and layout regardless of browser-side preferences.
v2.15
2008/02/20
Enhancments
The width of the mouse-over navigation panels on top of the image is now configurable using the "upperNavWidth" option in the floatbox.js configuration section.
Bug fixes
If an item was displayed that had info panel content, then closed, then another item with no info panel content opened IE would display the old info panel.