Nitro Notifier
The Nitro Notifier can be used to show custom styled popups alerting a user that something has happened. They can be created by inserting some javascript on your page. Here are several examples:
The default notification in action: http://assets.bunchball.com/scripts/notifier/1.0/testNotifier2.html.
A fully custom styled set of notifications: http://assets.bunchball.com/scripts/notifier/1.0/testNotifier.html. If you view the source, you will see that this style is similar to, but different from the default style. In particular, it uses a different background image, a different layout for the icon and label, has different dimensions, and appears on the left side of the containing web page.
A very simple example that uses a minimum of HTML code and style tags: http://assets.bunchball.com/scripts/notifier/1.0/testNotifier3.html This example does not include dynamic height-scaling or dynamic images, so it does not need most of the style tags (like nitro_notice_top, nitro_notice_middle, etc...). It only has the top-level nitro_notice DIV, and the nitro_notice_text DIV within the nitro_notice_content DIV for the dynamic message.
An example of changing the style without reloading the page: http://assets.bunchball.com/scripts/notifier/1.0/testChangeStyle.html. The second notification has white text instead of blue. To do this, you have to set nitroNotification.stylesSet to false after changing the custom style.
An example of using the Notifier with user.getResponses can be found at JS Connector.
Javascript
To show a notification via Javascript, insert the following code on your page:
<script src="http://assets.bunchball.com/scripts/notifier/1.0/nitroNotifications.js" type="text/javascript"></script>
<script type="text/javascript">
var nitroNotificationVars={};
nitroNotificationVars.message = message;
nitroNotificationVars.imgPath = imgPath;
nitroNotificationVars.showDelay = showDelay;
nitroNotificationVars.showDuration = showDuration;
nitroNotificationVars.height = height;
nitroNotificationVars.midHeight = height-35;
nitroNotifier.create(nitroNotificationVars);
</script> |
IMPORTANT: The call to nitroNotifier.create must be within a <script> tag this is a direct child of the <body> tag, or comes after the </body> tag. You cannot nest this script under another element, like a <div>. The notifier creation code appends a new <div> to the <body> tag, which cannot happen from within a nested element. This web site provides a good explanation of where you can include this code: http://weblogs.asp.net/infinitiesloop/archive/2006/11/02/Dealing-with-IE-_2600_quot_3B00_Operation-Aborted_2600_quot_3B002E00_-Or_2C00_-how-to-Crash-IE.aspx
You can call nitroNotifier.create as many times as you want after including nitroNotifications.js. Each time you call it, a new popup will be shown. It takes a single parameter which is an object with several creation attributes. All of the attributes are optional:
message - The message to be shown in the popup (more specifically, the HTML that will go into any DIVs with the class nitro_notice_text)
imgPath - The url of the image to show in the popup (more specifically, the src of all img's that have a class of nitro_notice_img)
showDelay - the delay before the popup is shown (in milliseconds)
showDuration - the duration to show the popup before hiding it (in milliseconds)
height - the total height of the popup (optional, but will default to 65, so pass this in if you have a custom popup of a different height)
midHeight - the height of the nitro_notice_mid DIV, which is the only part of the popup that can have its own dynamic height.
Warning About Styles
The notifications have a default set of styles, but will also be subject to whatever styles you have on the containing page. So if you have type selectors for types like <table>, <tr>, <td>, <div> or <img>, these may interfere with the notifier style and cause it to show up incorrectly. You can either avoid using type selectors (and use class selectors or id selectors instead), or you can custom style the popups to work with your page's style. In most cases, you will probably want to custom style the popup anyways, if for no other reason than to change the background image and dimensions.
Custom Styling the Popup
You can custom style the popup, but certain rules have to be followed. To style the popup you can specify custom HTML for the popup and/or a custom stylesheet for the popup. Use the default HTML and style (see below) as a starting point.
The custom HTML must follow a certain DOM structure:
- There must be one top level DIV with the class nitro_notice.
- This top level DIV should have the following style tags at least: position: fixed; and top: 100%; (because the notifications comes up from the bottom of the page).
The following is optional:
- The top level nitro_notice DIV can optionally contain 3 children with class names nitro_notice_top, nitro_notice_mid, and nitro_notice_bottom which can have background images assigned to them. the nitro_notice_mid DIV will automatically scaled to the midHeight of each notification. If you don't plan to have notifications with differeing heights or don't need a resizable background image, then you don't need these DIV's.
- The top level DIV can also have a DIV with the class name nitro_notice_content. This DIV will contain the content of the popup. You can put whatever you want in this DIV, but specifically any IMG's that have a class name of nitro_content_img will automatically get assigned the imgPath of the notification as their source, and any DIV's with a class name of nitro_notice_text will get assigned the notification's message as their innerHTML. if you don't need dynamic images or dynamic messages, then you don't need to have these special DIVs or class names.
To specify your own custom HTML, assign it to a property of nitroNotifier called nitroNotificationHTML prior to calling nitroNotifier.create. Here is an example (this is the default popup HTML):
| nitroNotifier.nitroNotificationHTML = "<div class='nitro_notice_top'></div><div class='nitro_notice_mid'></div><div class='nitro_notice_bottom'></div><div></div><div class='nitro_notice_content'><table><tr><td valign=top><img class='nitro_notice_img'/></td></tr><tr><td><div class='nitro_notice_text'></div></td></tr></table></div>"; |
To specify your own custom styles for the popup, assign them to a property of nitroNotifier called nitroNotificationStyles prior to calling nitroNotifier.create. Here is an example (this is the default style):
|
nitroNotifier.nitroNotificationStyles = "<style>.nitro_notice {
position: fixed;
top: 100%;
left: 10px;
width: 200px;
height: 60px;
color: #ffffff;
z-index: 10;
font-family: Arial, Verdana, 'Lucida Sans Unicode', Helvetica, Sans-serif;
font-size: 0.8em;
}
.nitro_notices {
}
* html .nitro_notice {
position: absolute;
}
.nitro_notice .nitro_notice_top {
background: transparent url(http://assets.bunchball.com/scripts/media/images/floating_notice_top_orange.png);
width: 200px;
height: 15px;
float: left;
clear: both;
}
* html .nitro_notice .nitro_notice_mid, * html .nitro_notice .nitro_notice_bottom {
position: relative;
top: -1px;
}
.nitro_notice .nitro_notice_mid {
background: transparent url(http://assets.bunchball.com/scripts/media/images/floating_notice_mid.png) repeat-y;
width: 200px;
height: 30px;
float: left;
clear: both;
}
.nitro_notice .nitro_notice_bottom {
background: transparent url(http://assets.bunchball.com/scripts/media/images/floating_notice_bottom.png);
width: 200px;
height: 20px;
float: left;
clear: both;
}
.nitro_notice_content {
}
.nitro_notice_content table {
position: absolute;
top: 0px;
left: 0px;
height:100%;
width:100%;
vertical-align:middle;
text-align: center;
float: left;
clear: both;
cellpadding: 0;
cellspacing: 0;
}
.nitro_notice_content td {
height:inherit;
width:inherit;
text-align:center;
vertical-align:middle;
}
.nitro_notice_content img {
margin-top:10px;
width: 40px;
height: 40px;
border: 2px #000 solid;
background-color:#FFFFFF;
}
.nitro_notice_content .nitro_notice_text {
margin-bottom:10px;
width: 180px;
text-align:center;
font-size:11px;
line-height:12px;
font-weight: bold;
color:#ffffff;
}</style>";
|
If you need to change the style after the page has loaded, but before the next page reload, you can do that by changing nitroNotifier.nitroNotificationStyles and then setting nitroNotifier.stylesSet to false. The next notification you create will have the new style.
Comments (0)
You don't have permission to comment on this page.