Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

CSS now in separete file, fixed 'this' issue'

  • Loading branch information...
commit 3117bb75156466cebd3caf7d7a9d98854a47e578 1 parent d01cfa9
@dknight dknight authored
Showing with 101 additions and 72 deletions.
  1. +40 −37 index.html
  2. +36 −0 jquery.notifyBar.css
  3. +25 −35 jquery.notifyBar.js
View
77 index.html
@@ -4,41 +4,17 @@
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery notify bar</title>
- </head>
+ <link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen" />
<style type="text/css">
- #greenDiv {
- width:100%;
- background-color:#cfc;
- color:#051;
- z-index:300;
- text-align:center;
- position:fixed;
- top:0px;
- left:0px;
- padding:30px 0px;
- font-family:Arial, serif;
- font-size:18px;
- display:none;
- }
- #errorDiv {
- width:100%;
- background-color:#fcc;
- color:#510;
- z-index:300;
- text-align:center;
- position:fixed;
- top:0px;
- left:0px;
- padding:30px 0px;
- font-family:Arial, serif;
- font-size:18px;
- display:none;
+ .custom {
+ font-size:20px;
+ font-family: "Times New Roman", Times, serif;
+ text-transform:uppercase;
+ background:#fff url(http://www.dmitri.me/misc/jq-test-pattern.gif) repeat-x top center;
}
-
</style>
+ </head>
<body>
- <div id="greenDiv">Success</div>
- <div id="errorDiv">Error</div>
<h1>'Notify Bar' plugin</h1>
<p>
Simple plugin (basically it's not a plugin, but widget) to show notify bar
@@ -56,6 +32,10 @@
});
</code>
</pre>
+ and to your html page stylesheet:
+ <pre>
+ <code>&lt;link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen" /&gt;</code>
+ </pre>
<h3>$.notifyBar can pass next parameters:</h3>
<table border="1">
<tr>
@@ -88,6 +68,12 @@
<td>jQuery object [optional]</td>
<td>null</td>
</tr>
+ <tr>
+ <td>class</td>
+ <td>You can set own CSS class for 'Notify bar'. There is too premade clasess "error" and "success"</td>
+ <td>String</td>
+ <td></td>
+ </tr>
</table>
<h3>Check different styles</h3>
@@ -96,14 +82,15 @@
<br />
Try it! <strong>↓</strong>
</p>
- <button id="callGreen">Call success bar</button>
- <button id="callError">Error bar</button>
<button id="common">Default style bar</button>
+ <button id="error">Error style bar</button>
+ <button id="success">Success style bar</button>
+ <button id="custom">Custom styling</button>
<p>
<a href="http://www.dmitri.me/blog/notify-bar">Project home</a> |
- <a href="http://www.dmitri.me/misc/notify/jquery.notifyBar.js">Download source</a>
+ <a href="http://github.com/dknight/jQuery-Notify-bar">download source</a>
</p>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
@@ -119,20 +106,36 @@
<script type="text/javascript">
$(function() {
+ $.notifyBar({ html: "This is 'Notify bar'!" });
+
$("#callGreen").click(function(){
$.notifyBar({
html: "Thank you, your settings was updated!",
jqObject: $("#greenDiv")
});
});
- $("#common").click(function(){
- $.notifyBar();
- });
+
$("#callError").click(function(){
$.notifyBar({
jqObject: $("#errorDiv")
});
});
+
+
+ $("#common").click(function(){
+ $.notifyBar({});
+ });
+ $("#error").click(function(){
+ $.notifyBar({ class: "error", html: "Error occurred!" });
+ });
+ $("#success").click(function(){
+ $.notifyBar({ class: "success", html: "Your data has been changed!" });
+ });
+ $("#custom").click(function(){
+ $.notifyBar({ class: "custom", html: "Your data has been changed!" });
+ });
+
+
});
</script>
View
36 jquery.notifyBar.css
@@ -0,0 +1,36 @@
+/*
+* Notify Bar - jQuery plugin
+*
+* Copyright (c) 2009-2010 Dmitri Smirnov
+*
+* Licensed under the MIT license:
+* http://www.opensource.org/licenses/mit-license.php
+*
+* Version: 1.2
+*
+* Project home:
+* http://www.dmitri.me/blog/notify-bar
+*/
+
+.jquery-notify-bar {
+ width:100%;
+ position:fixed;
+ top:0;
+ left:0;
+ z-index:32768;
+ background-color:#efefef;
+ font-size:18px;
+ color:#000;
+ text-align:center;
+ font-family: Arial, Verdana, sans-serif;
+ padding:20px 0px;
+ border-bottom:1px solid #bbb;
+}
+.jquery-notify-bar.error {
+ color:#f00;
+ background-color:#fdd;
+}
+.jquery-notify-bar.success {
+ color:#060;
+ background-color:#BBFFB6;
+}
View
60 jquery.notifyBar.js
@@ -1,66 +1,56 @@
/*
* Notify Bar - jQuery plugin
*
-* Copyright (c) 2009 Dmitri Smirnov
+* Copyright (c) 2009-2010 Dmitri Smirnov
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
-* Version: 1.1
+* Version: 1.2
*
* Project home:
* http://www.dmitri.me/blog/notify-bar
*/
/**
- * param object
+ * param Object
*/
$.notifyBar = function(settings)
{
- var bar = {};
-
- this.shown = false;
+ var bar = notifyBarNS = {};
+ notifyBarNS.shown = false;
if( !settings) {
settings = {};
}
// HTML inside bar
- this.html = settings.html || "Your message here";
+ notifyBarNS.html = settings.html || "Your message here";
//How long bar will be delayed, doesn't count animation time.
- this.delay = settings.delay || 2000;
+ notifyBarNS.delay = settings.delay || 2000;
- //How long this bar will be slided up and down
- this.animationSpeed = settings.animationSpeed || 200;
+ //How long notifyBarNS bar will be slided up and down
+ notifyBarNS.animationSpeed = settings.animationSpeed || 200;
//Use own jquery object usually DIV, or use default
- this.jqObject = settings.jqObject;
-
- if( this.jqObject) {
- bar = this.jqObject;
- this.html = bar.html();
+ notifyBarNS.jqObject = settings.jqObject;
+
+ //Set up own class
+ notifyBarNS.class = settings.class || "";
+ if( notifyBarNS.jqObject) {
+ bar = notifyBarNS.jqObject;
+ notifyBarNS.html = bar.html();
} else {
bar = $("<div></div>")
- //basic css rules
- .attr("id", "__notifyBar")
- .css("width", "100%")
- .css("position", "fixed")
- .css("top", "0px")
- .css("left", "0px")
- .css("z-index", "32768")
- //additional css rules, which you can modify as you wish.
- .css("background-color", "#efefef")
- .css("font-size", "18px")
- .css("color", "#000")
- .css("text-align", "center")
- .css("font-family", "Arial, Helvetica, serif")
- .css("padding", "20px 0px")
- .css("border-bottom", "1px solid #bbb");
+ .addClass("jquery-notify-bar")
+ .addClass(notifyBarNS.class)
+ .attr("id", "__notifyBar");
+
}
- bar.html(this.html).hide();
+ bar.html(notifyBarNS.html).hide();
var id = bar.attr("id");
- switch (this.animationSpeed) {
+ switch (notifyBarNS.animationSpeed) {
case "slow":
asTime = 600;
break;
@@ -71,7 +61,7 @@ $.notifyBar = function(settings)
asTime = 200;
break;
default:
- asTime = this.animationSpeed;
+ asTime = notifyBarNS.animationSpeed;
}
if( bar != 'object'); {
$("body").prepend(bar);
@@ -80,9 +70,9 @@ $.notifyBar = function(settings)
// If taken from DOM dot not remove just hide
if( bar.attr("id") == "__notifyBar") {
- setTimeout("$('#" + id + "').slideUp(" + asTime +", function() {$('#" + id + "').remove()});", this.delay + asTime);
+ setTimeout("$('#" + id + "').slideUp(" + asTime +", function() {$('#" + id + "').remove()});", notifyBarNS.delay + asTime);
} else {
- setTimeout("$('#" + id + "').slideUp(" + asTime +", function() {$('#" + id + "')});", this.delay + asTime);
+ setTimeout("$('#" + id + "').slideUp(" + asTime +", function() {$('#" + id + "')});", notifyBarNS.delay + asTime);
}
};
Please sign in to comment.
Something went wrong with that request. Please try again.