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
Javascript
$("#example2").click(function(e){
e.preventDefault();
$.fn.tikslusnotyrious({title:'new message',
message:"Light travels faster than sound",
sticky:false,
skinPath:''
});
});
Run Example 2
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
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
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 leftYou 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:''
});
});
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 7Javascript
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 8Parameter | 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 |
|
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 |