demo/index.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="Washington Botelho">
<meta name="description" content="A Notifier Plugin">
<meta name="google" content="notranslate">
<meta name="keywords" content="alert, aviso, notice, notificar, notificação, notifier, notify">
<meta name="robots" content="ALL">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<title>jQuery Notify | A Notifier Plugin - Washington Botelho</title>
<meta content="authenticity_token" name="csrf-param">
<link href="stylesheets/labs.css" media="screen" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../lib/jquery.notify.css">
<link rel="stylesheet" href="../lib/jquery.notify.fonts.css">
<style>#notify {
line-height: 1.3em;
}
#notify .notify-item p {
font-size: 1.4em;
margin-top: 10px;
text-shadow: none;
text-align: center;
}
#notify > div.body-image {
height: 73px
}
#notify > div.body-image p {
font-size: 1.3em;
margin-top: 17px;
}
#notify > div.body-icon {
height: 42px;
padding-left: 47px;
}
#notify > div.body-icon p {
font-size: 1.2em;
margin-top: 4px;
}</style>
<script src="../vendor/jquery.js"></script><script src="../lib/jquery.notify.js"></script>
<script src="javascripts/labs.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
<div role="banner" class="header">
<h1><a href="/notify">jQuery Notify</a></h1>
<div>A Notifier Plugin</div>
</div>
<nav role="navigation" class="navigation">
<a href="http://github.com/wbotelhos/notify/archive/0.1.0.zip" class="download" title="Download version 0.1.0"><i class="i-file-zip"></i> v0.1.0</a>
<a href="http://github.com/wbotelhos/notify" class="i-github" target="blank" title="Github <http://github.com/wbotelhos/notify>"></a>
<a href="http://wbotelhos.com/labs" class="labs i-labs" target="blank" title="Labs <http://wbotelhos.com/labs>"></a>
<i class="i-heart" title="Thank you! <3"></i>
<div id="donations">
<a href="http://gittip.com/wbotelhos" target="_blank">Git tip</a>
<span>•</span>
<a href="http://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=X8HEP2878NDEG&item_name=jQuery%20Notify" target="_blank">Paypal</a>
</div>
</nav>
<div class="clearfix"></div>
<article>
<div class="body">
<h1>
<a name="default"></a> Default</h1>
<p>The string passed is the body of message.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'I am the Body'</span><span class="p">);</span>
</pre></div>
<p><a id="default-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="title"></a> Title</h1>
<p>You can give a title for your notice passing a hash with parameters:</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'I am the Body'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s1">'I am the Title!'</span> <span class="p">});</span>
</pre></div>
<p><a id="title-demo" href="javascript:void(0);">Open</a></p>
<p>But when you want extra parameters, is more convinient to use all as it:</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span> <span class="s1">'I am the Title!'</span> <span class="p">});</span>
</pre></div>
<p><a id="title2-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="image"></a> Image</h1>
<p>You can use some image into notice just passing an URL. It will appears on the left side.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span>
<span class="nx">body</span> <span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span>
<span class="nx">image</span> <span class="o">:</span> <span class="s1">'https://pbs.twimg.com/profile_images/1591360162/wbotelhos-qconsp.png'</span>
<span class="p">});</span>
</pre></div>
<p><a id="image-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="icon"></a> Icon</h1>
<p>Instead <a href="#image">image</a> you can use a font icon on an <code><i/></code> element.<br>
The font name depends of your font<code>s name.<br>
We provide</code>jquery.notify.fonts.css` as an example, but you can use your own.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">icon</span><span class="o">:</span> <span class="s1">'notify-bug'</span> <span class="p">});</span>
</pre></div>
<p><a id="icon-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="wrapper"></a> Wrapper</h1>
<p>Main element hooked via <strong>ID</strong> where all noticies will be <strong>appended</strong>.<br>
If element already exists on DOM, it will be just loaded and used.<br>
If element does not exists, then it will be created and <strong>appended</strong> into <code>body</code>.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">wrapper</span><span class="o">:</span> <span class="s1">'#notify'</span> <span class="p">});</span>
</pre></div>
<p><a id="wrapper-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="destroy"></a>Destroy</h1>
<p>Removes the <a href="#wrapper">wrapper</a> when there is no more notice on it.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">destroy</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span>
</pre></div>
<p><a id="destroy-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="position"></a> Position</h1>
<p>You can choose, by default, 4 positions where Notify can appears.<br>
This positions is configured via CSS on <code>jquery.notify.css</code> and affects the <a href="#wrapper">wrapper</a>:</p>
<ul>
<li>top-left</li>
<li>top-right (default)</li>
<li>bottom-left</li>
<li>bottom right</li>
</ul>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">position</span><span class="o">:</span> <span class="s1">'top-left'</span> <span class="p">});</span>
</pre></div>
<p><a id="position-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="showTime"></a> Show Time</h1>
<p>Time used on fade in effect until notice appears.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">showTime</span><span class="o">:</span> <span class="mi">100</span> <span class="p">});</span>
</pre></div>
<p><a id="showTime-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="timeout"></a> Timeout</h1>
<p>How many time in <strong>milliseconds</strong> until the notice <strong>begins</strong> to disappear.<br>
The whole time until notice completely disappears depends on the sum of this and <a href="#hideTime">hideTime</a> plus <a href="#minimizeTime">minimizeTime</a></p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">timeout</span><span class="o">:</span> <span class="mi">100</span> <span class="p">});</span>
</pre></div>
<p><a id="timeout-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="hideTime"></a> Hide Time</h1>
<p>After <a href="#timeout">timeout</a> finish, this effects starts to fade out the notice.<br>
This will keeps occupying the space. So, the next one is the <a href="#minimizeTime">minimizeTime</a>.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">hideTime</span><span class="o">:</span> <span class="mi">100</span> <span class="p">});</span>
</pre></div>
<p><a id="hideTime-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="minimizetime"></a> Minimize Time</h1>
<p>After <a href="#hideTime">hideTime</a> this effects begins to give space to notice below.<br>
It will minimize the current notice and remove it when it gets height equal 0.</p>
<blockquote>
<p>Try to keep it less than <a href="#hideTime">hideTime</a> for miminize only when notice is not more visible.</p>
</blockquote>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">minimizeTime</span><span class="o">:</span> <span class="mi">100</span> <span class="p">});</span>
</pre></div>
<p><a id="minimizeTime-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="forever"></a>forever</h1>
<p>Disables the <a href="#timeout">timeout</a> and let the notice on screen forever.<br>
Don't worry! We still have the <a href="#closeClick">closeClick</a> option.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">forever</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span>
</pre></div>
<p><a id="forever-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="closeClick"></a>Close Click</h1>
<p>Close the notice when click on it.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">closeClick</span><span class="o">:</span> <span class="kc">false</span> <span class="p">});</span>
</pre></div>
<p><a id="closeClick-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="id"></a>Id</h1>
<p>Identifier used as class name for each notice.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span> <span class="s1">'notify-item'</span> <span class="p">});</span>
</pre></div>
<p><a id="id-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="max"></a>Max</h1>
<p>Number maximum of noticies on screen.<br>
If this limit is exceeded, the items are placed in a queue and shown later.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span> <span class="nx">body</span><span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span> <span class="nx">max</span><span class="o">:</span> <span class="mi">1</span> <span class="p">});</span>
</pre></div>
<p><a id="max-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="beforeOpen"></a>Before Open</h1>
<p>Callback execute before the notice appears on screen.<br>
Return <code>false</code> will prevent the open action.<br>
Inside the callback <code>this</code> is the Notify instance.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span>
<span class="nx">body</span> <span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span>
<span class="nx">beforeOpen</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'A notice will be presented.'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
<p><a id="beforeOpen-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="afterOpen"></a>After Open</h1>
<p>Callback execute after the notice appears on screen.<br>
Inside the callback <code>this</code> is the Notify instance.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span>
<span class="nx">body</span> <span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span>
<span class="nx">afterOpen</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'The notice is on the screen.'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
<p><a id="afterOpen-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="beforeClose"></a>Before Close</h1>
<p>Callback execute before the notice is closed.<br>
Return <code>false</code> will prevent the open action.<br>
Inside the callback <code>this</code> is the Notify instance.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span>
<span class="nx">body</span> <span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span>
<span class="nx">beforeClose</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s2">"I'll be back!"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
<p><a id="beforeClose-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="afterClose"></a>After Close</h1>
<p>Callback execute after the notice is closed.<br>
Inside the callback <code>this</code> is the Notify instance.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span>
<span class="nx">body</span> <span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span>
<span class="nx">afterClose</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s2">"It's gone!"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
<p><a id="afterClose-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="click"></a>Click</h1>
<p>Callback executed when the notice is clicked.<br>
Return <code>false</code> will prevent the notice of to be closed, in case <a href="#closeClick">closeClick</a> is enabled.<br>
Inside the callback <code>this</code> is the Notify instance.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span>
<span class="nx">body</span> <span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span>
<span class="nx">click</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Do not touch me!'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
<p><a id="click-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="mouseover"></a>Mouseover</h1>
<p>Callback executed when mouse over the notice.<br>
When the notice is mouseovered the <a href="#timeout">timeout</a> option is canceled.<br>
Return <code>false</code> will prevent this cancel and the time will be counted normally.<br>
Inside the callback <code>this</code> is the Notify instance.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span>
<span class="nx">body</span> <span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span>
<span class="nx">mouseover</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'I can see you!'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
<p><a id="mouseover-demo" href="javascript:void(0);">Open</a></p>
<h1>
<a name="mouseout"></a>Mouseout</h1>
<p>Callback executed when mouse out the notice.<br>
When the notice is mouseouted the <a href="#timeout">timeout</a> is reactivated.<br>
Return <code>false</code> will prevent this reactivation and the notice will be there <a href="#forever">forever</a>.<br>
Inside the callback <code>this</code> is the Notify instance.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span>
<span class="nx">body</span> <span class="o">:</span> <span class="s1">'I am the Body'</span><span class="p">,</span>
<span class="nx">mouseout</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Where are you?'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></div>
<p><a id="mouseout-demo" href="javascript:void(0);">Open</a></p>
<h1>Changing the settings globally</h1>
<p>You can change any option mentioning the scope <code>$.notify.defaults.OPTION = VALUE;</code>. It must be called before you bind the plugin.</p>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">max</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">timeout</span> <span class="o">=</span> <span class="mi">10000</span><span class="p">;</span>
</pre></div>
<h1>Options</h1>
<div class="highlight"><pre><span class="nx">afterClose</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Callback executed after notice closes.</p>
<div class="highlight"><pre><span class="nx">afterOpen</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Callback executed after notice opens.</p>
<div class="highlight"><pre><span class="nx">beforeClose</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Callback executed before notice closes.</p>
<div class="highlight"><pre><span class="nx">beforeOpen</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Callback executed before notice opens.</p>
<div class="highlight"><pre><span class="nx">body</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Body of notice.</p>
<div class="highlight"><pre><span class="nx">click</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Callback executed when notice is clicked.</p>
<div class="highlight"><pre><span class="nx">closeClick</span><span class="o">:</span> <span class="kc">true</span>
</pre></div>
<p>If notice will be closed on click.</p>
<div class="highlight"><pre><span class="nx">destroy</span><span class="o">:</span> <span class="kc">false</span>
</pre></div>
<p>Removes the wrapper when there is no more notice on it.</p>
<div class="highlight"><pre><span class="nx">forever</span><span class="o">:</span> <span class="kc">false</span>
</pre></div>
<p>If notice will stay on screen forever.</p>
<div class="highlight"><pre><span class="nx">hideTime</span><span class="o">:</span> <span class="mi">1000</span>
</pre></div>
<p>Time spent to hide the notice.</p>
<div class="highlight"><pre><span class="nx">icon</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Icon (font) name for the notice.</p>
<div class="highlight"><pre><span class="nx">id</span><span class="o">:</span> <span class="s1">'notify-item'</span>
</pre></div>
<p>Identifier to be used as class on notice.</p>
<div class="highlight"><pre><span class="nx">image</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Image path to be used into notice.</p>
<div class="highlight"><pre><span class="nx">max</span><span class="o">:</span> <span class="mi">5</span>
</pre></div>
<p>Number maximum of noticies on screen.</p>
<div class="highlight"><pre><span class="nx">mouseout</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Callback executed on mouse over the notice.</p>
<div class="highlight"><pre><span class="nx">mouseover</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>Callback executed on mouse out the notice.</p>
<div class="highlight"><pre><span class="nx">minimizeTime</span><span class="o">:</span> <span class="mi">300</span>
</pre></div>
<p>Time spent to minimize the notice.</p>
<div class="highlight"><pre><span class="nx">position</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>The place where notices will appears.</p>
<div class="highlight"><pre><span class="nx">showTime</span><span class="o">:</span> <span class="mi">400</span>
</pre></div>
<p>Time spent to show the notice.</p>
<div class="highlight"><pre><span class="nx">timeout</span><span class="o">:</span> <span class="mi">5000</span>
</pre></div>
<p>Time spent to initiates the other timeouts.</p>
<div class="highlight"><pre><span class="nx">title</span><span class="o">:</span> <span class="kc">undefined</span>
</pre></div>
<p>The notice title.</p>
<div class="highlight"><pre><span class="nx">wrapper</span><span class="o">:</span> <span class="s1">'#notify'</span>
</pre></div>
<p>Where notices will be appended.</p>
<h1>Functions</h1>
<p>First, save the notice reference:</p>
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">notice</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Hello World!'</span><span class="p">);</span>
</pre></div>
<p>Then you can use the functions:</p>
<div class="highlight"><pre><span class="nx">notice</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
</pre></div>
<p>Removes the notice from screen.</p>
<div class="highlight"><pre><span class="nx">notice</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="s1">'class-name'</span><span class="p">);</span>
</pre></div>
<p>Changes the notices position via CSS class.</p>
<h2>Global Functions</h2>
<div class="highlight"><pre><span class="nx">$</span><span class="p">.</span><span class="nx">notify</span><span class="p">.</span><span class="nx">clean</span><span class="p">(</span><span class="s1">'name'</span><span class="p">)</span>
</pre></div>
<p>Clean the queue with name equal you passed or all when no name is given.</p>
</div>
</article>
<div class="share">
<p>Share it!</p>
<div class="twitter"><a href="https://twitter.com/intent/tweet?text=%22jQuery+Notify+-+A+Notifier+Plugin%22+%7E&url=http%3A%2F%2Fwbotelhos.com%2Fnotify&via=wbotelhos" target="_blank" title="via Twitter"><i class="i-twitter"></i></a></div>
</div>
<section class="comments">
<ol>
</ol>
</section>
<script>
$(function() {
AntiBOT.init('.new_comment');
CommentResponder.init();
$('#comment_body').taby();
});
</script>
</div>
<script>
$(function() {
$('#default-demo').on('click', function() {
$.notify('I am the Body.');
});
$('#title-demo').on('click', function() {
$.notify('I am the Body.', {
id : 'body-title',
title : 'I am the Title!',
position : 'top-right'
});
});
$('#title2-demo').on('click', function() {
$.notify({
id : 'body-title',
body : 'I am the Body.',
title : 'I am the Title!',
position : 'top-right'
});
});
$('#image-demo').on('click', function() {
$.notify({
id : 'body-image',
body : 'I am the Body.',
image : 'https://pbs.twimg.com/profile_images/1591360162/wbotelhos-qconsp.png',
position : 'top-right'
});
});
$('#icon-demo').on('click', function() {
$.notify({
id : 'body-icon',
body : 'I am the Body.',
icon : 'notify-bug',
position : 'top-right'
});
});
$('#wrapper-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
position : 'top-right',
wrapper : '#notify'
});
});
$('#destroy-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
destroy : true,
position : 'top-right'
});
});
$('#position-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
position : 'top-left'
});
});
$('#showTime-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
showTime : 100,
position : 'top-right'
});
});
$('#timeout-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
position : 'top-right',
timeout : 100
});
});
$('#hideTime-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
hideTime : 100,
position : 'top-right'
});
});
$('#minimizeTime-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
minimizeTime : 100,
position : 'top-right'
});
});
$('#forever-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
forever : true,
position : 'top-right'
});
});
$('#closeClick-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
closeClick : false,
position : 'top-right'
});
});
$('#id-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
id : 'notify-item',
position : 'top-right'
});
});
$('#max-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
max : 1,
position : 'top-right'
});
});
$('#beforeOpen-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
beforeOpen : function() {
alert('A notice will be presented.');
},
position : 'top-right'
});
});
$('#afterOpen-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
afterOpen : function() {
alert('The notice is on the screen.');
},
position : 'top-right'
});
});
$('#beforeClose-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
beforeClose : function() {
alert("I'll be back!");
},
position : 'top-right'
});
});
$('#afterClose-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
afterClose : function() {
alert("It's gone!");
},
position : 'top-right'
});
});
$('#click-demo').on('click', function() {
$.notify({
body : 'I am the Body.',
click : function(evt) {
alert('Do not touch me!');
},
position : 'top-right'
});
});
$('#mouseover-demo').on('mouseover', function() {
$.notify({
body : 'I am the Body.',
mouseover : function(evt) {
alert('I can see you!');
},
position : 'top-right'
});
});
$('#mouseout-demo').on('mouseout', function() {
$.notify({
body : 'I am the Body.',
mouseout : function(evt) {
alert('Where are you?');
},
position : 'top-right'
});
});
});
</script>
</body>
</html>