Skip to content

customedialabs/JS_floativ

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Panagiotis Papadatis
Jul 25, 2017
d46408c · Jul 25, 2017

History

77 Commits
Jul 4, 2015
Jun 26, 2015
Jul 25, 2017
Jul 3, 2015
Apr 6, 2017
Jun 25, 2015
Nov 5, 2015
Sep 18, 2015
Jul 25, 2017
Jun 26, 2015

Repository files navigation

floativ

floativ is a responsive floating scroll-box at the bottom of the screen of your site that contains text, among other things, which can be displayed while browsing a web page. This floating scroll-box disappears when the user reaches an element with a specific id.

See a working demo here.

Installation

  1. Download and install NodeJS
  2. Clone or Download project straight from GitHub.
  3. Extract the zip file and start working.

Directions

  • cd into the directory and run npm install in order to install all the project dependencies.
  • Open index.html to see and start working with this project.

NPM Package

You can find and install floativ from npm here.

Usage

Put this $("#floativ").floativ(); inside script tags at the bottom of your HTML file. You can also specify parameters, such as:

<div class="floativ" id="floativ">
    <div class="floativ-container">
        <div class="floativ-head">
            <span>
                <i class="fa fa-plus-circle floativ-expand" aria-hidden="true" aria-label="Expand"></i>
            </span>
            <span>
                <i class="fa fa-minus-circle floativ-collapse" aria-hidden="true" aria-label="Collapse"></i>
            </span>
        </div>
        <div class="floativ-wrapper">
            <div class="floativ-body">
                ... YOUR CONTENT HERE ...
            </div>
        </div>
    </div>
</div>

Dependencies

Library compatibility

This library works for IE8+, Mozilla Firefox 4+, Google Chrome 11+, Opera 10+, Safari 4+.

Collaborators

Contributors

Projects using floativ

License

GPL-3.0