Tikslus Notyrious - Jquery notification plugin

Usage

Include jquery,tikslus_notyroious.min.js and tikslus_notyrious.css files






                
                    
                    
                

Example 1: sticky notification

Javascript

		
                    $("#example1").click(function(e){
                    e.preventDefault();
                  $.fn.tikslusnotyrious({"title":'example 1',
                  "message":"Light travels faster than sound. This is why some people appear bright until you hear them speak.",
                  sticky:true,
				  skinPath:'../'
                  
                  });
                  });
                
                
Run Example 1

Example 2: Non Sticy notification

Javascript

		
                      $("#example2").click(function(e){
                    e.preventDefault();  
                 $.fn.tikslusnotyrious({title:'new message',
                 message:"Light travels faster than sound",
                sticky:false,
				skinPath:'../'
			});
                    });
                
                
Run Example 2

Example 3: use of image/picture

Javascript

		
                         $("#example3").click(function(e){
                    e.preventDefault();   
           $.fn.tikslusnotyrious({title:'new message',
                 message:"Light travels faster than sound",
                sticky:false,
                picture:"image.jpg",
				skinPath:'../'
           });
                    });
                
                
Run Example 3

Example 4: Custom Buttons

Javascript

		
                            $("#example4").click(function(e){
                    e.preventDefault();   
           $.fn.tikslusnotyrious({title:'custom buttons',
                 message:"Light travels faster than sound. This is why some people appear bright until you hear them speak.",
                sticky:false,
				skinPath:'../',
                picture:"image.jpg",
                buttons	: {
				button1	: {
					button_class	: 'btn1',
					action: function(){
						alert('you clicked button1');
					}
				},
				button2	: {
					button_class	: 'btn2',
					action: function(){
					alert('you clicked button2');
					}	
				}
			}
                
           });
                    });
                
                
Run Example 4

Example 5: notification position

You can position message to right,left or center

Javascript

		
               
                              $("#example5").click(function(e){
                    e.preventDefault();   
           $.fn.tikslusnotyrious({title:'position left',
                 message:"Light travels faster than sound",
                sticky:true,
                picture:"image.jpg",
                position:'left',
				skinPath:'../'
           });
                    });
                
                
position left
position right
position center

Example 6: Skins

You can use 7 different predefined skins (default,apollo,demeter,hades,hera,titan,zeus)

default setting is default

Tikslus notyrious has 7 different css files for each skin.

If you move these css files elsewhere then you have to specify full path of the folder

For exampel, If you put your skin css files in skins folder, you have to specify full path in skinPath parameter

skin examples

Javascript

		
                                        $("#example6").click(function(e){
                    e.preventDefault();   
           $.fn.tikslusnotyrious({title:'Zeus skin',
                 message:"Light travels faster than sound",
                sticky:true,
                picture:"image.jpg",
                position:'left',
                skin:'zeus',
				skinPath:'../'
           });
                    });
                
                

Example 7: All default values (except message)

Please, note you can't define custom buttons with multiple messages

Javascript


$("#example7").click(function(e){
                    e.preventDefault();   
           $.fn.tikslusnotyrious({message:'hello world'.skinPath:'../'});
                    });  
                
                
Example 7

Example 8: Multiple messages at once

Javascript


    var messages = new Array();
messages[0]={message:"I asked God for a bike, but I know God does not work that way. So I stole a bike and asked for forgiveness",picture:"image.jpg"};
messages[1]={title:'message2',message:"Light travels faster than sound. This is why some people appear bright until you hear them speak."};
messages[2]={title:'message3',message:'War does not determine who is right  only who is left',picture:"image.jpg"};

$("#example8").click(function(e){
                    e.preventDefault();   
           $.fn.tikslusnotyrious({message:messages,
                  position:'right',
                skin:'titan',
				skinPath:'../'
                 
           
           });
                    });  
                
                
Run Example 8


List of parameters you can use with Tikslus Notyrious

ParameterDefault valueAllowed ValueDescription
skindefaultdefault,hera,hades,titan,zeus,apollo,demeterTheme/skin to be used
skinPath''If you chose to put your all skin css files in seperate folder. You provide full path of the directory with a trailing '/'Defines the path of skins directory
positionrightright,left or centerposition of message on screen
messagenullvalid Notification messagenotification message
stickytruetrue or falseif true message will stick to screen and you have to manually close it
buttonsit's a javascript object
                        
    $.fn.tikslusnotyrious({title:'custom buttons',
                 message:"Light travels faster than sound. This is why some people appear bright until you hear them speak.",
                sticky:false,
                picture:"image.jpg",
                buttons	: {
				button1	: {
					button_class	: 'btn1',
					action: function(){
						alert('you clicked button1');
					}
				},
				button2	: {
					button_class	: 'btn2',
					action: function(){
					alert('you clicked button2');
					}	
				}
			}
                
           });
                        
                        
defines custom buttons
stayInterval10000time in miliseconds before the message disappearsthis will only work if sticky is set to true
picturenullvalid path of an image