1.2.0 • Published 3 years ago
floating-container v1.2.0
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 |