Creating iOS AssistiveTouch Style Floating Elements With JavaScript – Floaty.js

Floaty.js is a lightweight JavaScript library used to create iOS AssistiveTouch style draggable/swipeable floating elements that automatically attaches to the edge of the screen when released.

How to use it:

Include the style sheet floaty.css in the header, and the JavaScript file floaty.js at the bottom of the webpage.

<link href="floaty.css" rel="stylesheet">
<script src="floaty.js"></script>

Create a floating element:

<div class="floaty"></div>

Style the floating element whatever you like:

.floaty {
  ...
}

Changelog:

11/14/2018

• Bugfix