Skip to content

Latest commit

 

History

History
44 lines (33 loc) · 3.51 KB

README.md

File metadata and controls

44 lines (33 loc) · 3.51 KB
Raw

Floating Alerts

Floating Alerts is a jQuery plugin for creating simple, animated alerts that slide into view from off screen. There are a number of ways that alerts can be created, including:

  • Creating alerts programmatically using the createAlert(messages, classes) method.
  • Executing alerts based upon existing HTML in the body.
  • Watching the body for newly created matching elements, that are automatically executed.

Usage

The plugin is really easy to use. Just include jQuery, include the plugin file and initialise the plugin like this:

<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/path/to/floating-alerts.js" type="text/javascript"></script>

<script>
    $.floatingAlerts();
</script>

Options

There are some options you can pass to the plugin to configure it's functionality:

Option Type Default Description
listenForNew Boolean true Listen for newly created elements that match the target class and execute them as alerts
targetClass String floating-alert The class the plugin should consider to be an alert
alertTemplate String <div class="%targetclass% %extraclasses%"><ul class="%targetclass%-messages">%messages%</ul></div> The surrounding alert template. The %targetclass% will be replaced with the targetClass value, %extraclasses% will be replaced with extra classes passed to the createAlert(messages, extraClasses) method and %messages% will be replaced with the generated HTML for the messages (Using the messagesTemplate as a template).
messageTemplate String <li class="%targetclass%-message">%message%</li> The HTML template for each message. %targetclass% will be replaced with the targetClass value and %message% will be replaced with the message content.
animationDuration Integer 200 The duration of the alert animation, the smaller the number, the quicker the animation.
animationEasing String/Function swing The animation easing function. This is passed to jQuery.animate() so it accepts anything that it accepts.
clickToDismiss Boolean true Whether the alert should be dismissed when it's clicked.
visibleDuration Integer 5000 The number of milliseconds that the alert is visible before it's automatically dismissed.
zIndex Integer 1000000 The z-index CSS value of the alert.
animateHorizontal Boolean true Whether the alert should animate in horizontally (From the left or right).
animateVertical Boolean false Whether the alert should animate in vertically (From the top or bottom).
fromLeft Boolean false Whether the alert should be anchored to the left. When false the alert is anchored to the right.
fromTop Boolean false Whether the alert should be anchored to the top. When false the alert is anchored to the bottom.
horizontalGap Integer 0 The number of pixels the alert is offset from the left/right of the window.
verticalGap Integer 0 The number of pixels the alert is offset from the top/bottom of the window.

Examples

TODO