Interactables
Interactables is a Javascript framework that allows you to interact with html elements.
You can move, resize, dock & undock elements according to the class names you give them.
Resize or move the red square below, which is an element with classname 'moveable' and 'resizable'.
Elements
Moveables
To Use:
- To make an element moveable, classify it with 'moveable'.
- Click and drag the element.
- While docked, the element is bound to it's container.
- While undocked, you can move it anywhere in the body container.
Resizables
To Use:- To make an element resizable, classify it with 'resizable'.
- To resize it, click and drag the icon in the bottom-right corner of the element.
- The video shown above is resizable.
Slidables
This is a slidable container. To use it:- Classify the element 'slidable'
- To resize the element, drag the bottom up or down.
- This element is slidable.
Dockables
When you switch between docked and undocked, the element's position switches between relative and absolute. If the container element id is found, resizable.js switches the element's node between the body and container node.To Use:
- Classify the element 'dockable'.
- Set the 'id' of the parent element. If you leave this blank
- To dock and undock it, double-click in the upper-left hand corner.
Dockable #2
This is another dockable. Add as many as you like. Double click the icon to dock or undock it.Setup Framework
To use Interactables:
- On your html document, classify elements as one or more of the interactable class names.
- Load interactable.js when the html document loads.
- Run Interactable() function when the html document lodas, or as desired, including optional parameters.
CSS Styling
When an element is interacted with, the box-shadow styling is changed. Interactable elements use an 'active' and 'passive' to show when the element is being interacted with.You can easily adjust the box-shadow when you call the Interactable() function. For example, to make things red, call
Interactable('0px 0px 20px 4px red', '0px 0px 1px 1px red')
with the styling parameters desired.
Styles Modified
In order to show the elements, this script modifies the following css attributes.- top, left, height, width: sets to control size and position of element.
- box-shadow: sets for active and passive modes.
- position: sets to absolute or relative.
- overflow: sets to clip.
Function Parameters
The function syntax is:
Interactable([box-shadow-active],[box-shadow-passive])