jQuery Tikslus Notirious Examples

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

Parameter Default value Allowed Value Description
skin default default,hera,hades,titan,zeus,apollo,demeter Theme/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
position right right,left or center position of message on screen
message null valid Notification message notification message
sticky true true or false if true message will stick to screen and you have to manually close it
buttons it'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
stayInterval 10000 time in miliseconds before the message disappears this will only work if sticky is set to true
picture null valid path of an image