floating-container
v1.2.0
Published
A lightweight float to any container!
Downloads
6
Readme
Floating Container
A simple floating for your any container. This library doesn't have any dependencies and can be used with any webpage.
CDN Links:
https://cdn.jsdelivr.net/npm/floating-container@latest/src/js/floating-container.min.js
https://cdn.jsdelivr.net/npm/floating-container@latest/src/css/floating-container.min.css
NPM
npm i floating-container
https://www.npmjs.com/package/floating-container
Usage
import FloatingContainer from "../src/js/floating-container.min.js";
const fc = new FloatingContainer({
container: '#fc-container',
wrapper: '#fc-wrapper',
selector: '#fc-selector',
direction: 'bottom-right',
escapeHeight: 50,
showControllers: true,
observerOptions: { threshold: 0 },
onCloseFC: () => { },
onPutBackFC: () => { },
startPreviewFC: () => {},
endPreviewFC: () => {},
notSupportedCallback: () => { },
});
Parameters
| Name | Type | Default | Description | | --- | --- | --- | --- | | container | string | "#fc-container" | Container field selector | | wrapper | string | "#fc-wrapper" | Wrapper field selector | | selector | string | "#fc-selector" | Selector field selector | | direction | string | "bottom-right" | Floating position enum | | escapeHeight | number | 50 | The escape field to be created for scroll when canceling floating operation (px) | | showControllers | boolean | true | Control field will be added | | observerOptions | object | { threshold: 0 } | Intersection Observer options | | onCloseFC | function | () => {} | Runs when 'close' is triggered | | onPutBackFC | function | () => {} | Runs when 'put back' is triggered | | startPreviewFC | function | () => {} | Runs when 'float container' is triggered | | endPreviewFC | function | () => {} | Runs when 'float container' is prevented | | notSupportedCallback | function | () => {} | If this code doesn't support it will be triggered |