|
Demos
Demo code
Featured SummaryHere you can find some demo code. For live demo you can check my blog (spanish) or Demo site. Using default configuration
// First of all I create a Notimoo instance with default configuration
var notimooManager = new Notimoo();
// Showing a simple notification
notimooManager.show({
title: 'Testing notification',
message: 'This is a sample notitication showing how easy is to use Notimoo.'
});
// Showing a notification that does not disappear.
notimooManager.show({
title: 'Testing notification',
message: 'This notification will not disapper on its own. ' +
'You must click on it to close.',
sticky: true
});
// Notification with large text.
notimooManager.show({
title: 'Testing notification',
message: 'This is a notification with a long text. If the message ' +
'you provide does not fit into the notification size, ' +
'Notimoo auto resize its height.'
});
Using custom configuration
// Now I create the manager so it will display notifications from the left bottom corner
var notimooManager = new Notimoo({
locationVType: 'bottom',
locationHType: 'left'
});
// Showing a notification with no title and custom classes
notimooManager.show({
message: 'This is a simple notification message that has no title. ' +
'This can be useful in some situation when you do not need ' +
'to label your notification',
customClass: 'customClassA, customClassB'
});
// Showing a notification with custom width and for a shorter period of time
notimooManager.show({
title: 'Custom notification',
message: 'I override some manager properties for this notification so I ' +
'can show how you can configure a single one',
width: 200,
visibleTime: 2500
});
|
► Sign in to add a comment
Nice :)
how can i add this code to HTML page and make it work, i tried many times, not working, what is the code to make it works on HTML Page !?
You just need to add the code above to your initilize function. With Mootools you could do it like this:
window.addEvent('domready', function(event) { // Put the example code in here };I Really Would Love To Use It On My Website But I Don't Know How To Start It, I Did what You Just Told Me , I Uploaded These Files To Folder :
mootools-1.2-core.js notimoo-documented-1.1.css notimoo-documented-1.1.js notimoo-v1.1.css notimoo-v1.1.js
And I Put In My Page This Code Into HTML :
// Now I create the manager so it will display notifications from the left bottom corner var notimooManager = new Notimoo({
});// Showing a notification with no title notimooManager.show({
});// Showing a notification with custom width and for a shorter period of time notimooManager.show({
});NOT WORKING !!! WHY ? i even tried many other ways not working :
http://arabianmetal.com/Test2009/preview.html
And I Would Like it To Run Automatic When Visitor Visit My Website, But First how To Make It Run On My HTML, Is There HTML To Add Or What ?!
My Files :
http://arabianmetal.com/Test2009/mootools-1.2-core.js http://arabianmetal.com/Test2009/notimoo-documented-1.1.css http://arabianmetal.com/Test2009/notimoo-documented-1.1.js http://arabianmetal.com/Test2009/notimoo-v1.1.css http://arabianmetal.com/Test2009/notimoo-v1.1.js
Is There Ant Html Code To Make It Works Automatically !!??
I Tried The Above Code, Not Working !
Ok, maybe you should try to read just a little about Javascript before trying to use it. I've checked yout link http://arabianmetal.com/Test2009/preview.html and you're writing the Javascript code right directly into the body of the page. Javascript code must be inside a HTML tag called <script> so the browser know how to deal with it. So, your web page should be something like this:
<html> <head> <title>Testing Notimoo</title> <script type="text/javascript"> window.addEvent('domready', function(event){ var manager = new Notimoo(); manager.show({ title: 'Welcome message', message: 'This message will be shown to your users every time they load the page' }); }); </script> </head> <body> <h1>Testing Notimoo</h1> </body> </html>Still Not Working, I'm Sorry That I'm Bothering You, But It's Not Working !! I Copy Past The Last Code Into My Page , Still Not Working !! I Tried <scrip> And Java Everything !!
http://arabianmetal.com/Test2009/preview.html >http://arabianmetal.com/Test2009/preview2.html >http://arabianmetal.com/Test2009/preview3.html
Why It's Not Working , Is It That Possible !!
Maybe I Have To Link It To One Of Files Uploaded like : >http://arabianmetal.com/Test2009/notimoo-v1.1.js
Dunno What To Do !!
And I Wanna It To Run Alone Without Clicking On Anything !!
I wrote a snippet before thinking that you could be able to fill the rest. This is what my 6-year old sister has written for you:
<html> <head> <title>Testing Notimoo</title> <script type="text/javascript" src="js/mootools-1.2.1-core.js"></script> <script type="text/javascript" src="js/notimoo/notimoo-v1.1.js"></script> <link rel="stylesheet" type="text/css" href="js/notimoo/notimoo-v1.1.css" /> <script type="text/javascript"> window.addEvent('domready', function(event){ var manager = new Notimoo(); manager.show({ title: 'Welcome message', message: 'This message will be shown to your users every time they load the page' }); }); </script> </head> <body> <h1>Testing Notimoo</h1> </body> </html>By the way! She also says that you must remember to put Mootools file into a folder named js side by side with the html file and to place Notimoo files into the folder js/notimoo.
Merry Christmas.
Thank You, Now Working XD
Excelente!!!