jquery.bay-window.js

A jquery plugin that adds the floating window function.

Use requestAnimationFrame and transform

Example

example html

Installation

Include script after the jQuery library (unless you are packaging scripts somehow else):

<script src="/path/to/jquery.bay-window.min.js"></script>

Usage

If you want to use the default element(Built-in close button):

// If the bayWindowOption is used, the run method will be executed by default
$.createBayWindowElement(createBayWindowElementOption).bayWindow(
  bayWindowOption | methodName
)

or use a custom element:

$(element).bayWindow(bayWindowOption | methodName)

// if need destroy
$(closeBtn).on('click', function () {
  $(element).bayWindow('destroy')
})

use methods:

$(element).bayWindow(methodName)

Options for $.createBayWindowElement

Option	Data Attribute	Default	Description
href	string	''	Href attribute of a tag
src	string	''	Href attribute of img tag
width	string	230px	Width of img
height	string	130px	Height of img
id	string	jsBayWindow	Id attribute
target	string	__blank	target attribute of a tag

Options for $(element).bayWindow(options)

Option	Data Attribute	Default	Description
stepLength	number	1	Pixels moved every 16.6ms
startTop	number	0	Top offset pixel distance
startLeft	number	0	left offset pixel distanc
zIndex	number	9999	css z-index

Methods for $(element).bayWindow(methodName)

Method	Description
run	Start moving
stop	Stop motion
destroy	Stop motion and delete elements