Inner-page Messages
Hover the mouse here
createMessage full syntax
You can specify
- the html content of the message (ex after an AJAX call)
- The position of the message (same as align & limit parameters)
- the width of the message
- The classes of the message
- The lifetime of the message : nb of milisecond before it dies if no mouse over him
Except the content all parameters are optionals
$("#myElement").createMessage({
- content :"The content of the message", //Can contain any HTML tag
- messageClass: "CSS Classes Of The Message", // if not specified : "margin bkgDarker edit"
- lifetime: Value, //the number of milliseconds befor it dies if no mouse hover (default never dies : null)
- width: "XXXpx", //width given to the message, default 200px
- position: { //Same as align or limit, check there for more information
},
- top: anySelector | "this" | {my:XX, at:XX, offset:XX, selector:anySelector},
- right: anySelector | "this" | {my:XX, at:XX, offset:XX, selector:anySelector},
- bottom: anySelector | "this" | {my:XX, at:XX, offset:XX, selector:anySelector},
- left: anySelector | "this" | {my:XX, at:XX, offset:XX, selector:anySelector}
});
Messages : Examples
Ex : You want to create a message if you hover an element.
Code
$("#someDiv").hover(function(){$(this).createMessage("This is a message");},
function(){$(this).deleteMessage();
});
Result
Hover the mouse here
Ex : specify the position of the message on the top right corner of the element.
- Default width : rightIsLeftOf the element
- "this" is to specify the element that called the message and will adapt to each calling element
- Otherwise like align or limit : specify any id of the page.
Code
$("#someDiv1, #someDiv2, #someDiv3").hover(
function(){
$(this).createMessage({
},
content : "message of"+$(this).attr("id"),
position : {left : {at:1, selector:"this"}, bottom : {at:1, selector:"this"}}
});
function(){$(this).deleteMessage();
});
Result
Hover the mouse
Hover the mouse
Hover the mouse
Ex : specify the width of the message.
for the position parameters :- Default width : 200px
Code
$("#someDiv").hover(
function(){
$(this).createMessage({
},
content : "this is message",
position : {
right : {at:1, selector:"this"},
top : {at:1, selector:"this", offset:20}
},
width : '500px'
});
function(){$(this).deleteMessage();
});
Result
Hover the mouse here
Add messageClass : customize your message.
- Default messageClass : "margin bkgDarker edit"
Code
$("#someDiv").hover(
function(){
$(this).createMessage({
},
content : "this is message",
messageClass : "bkgDark tWhite height30 tCenter"
});
function(){$(this).deleteMessage();
});
Result
Hover the mouse here
Add a lifeTime to your message: how many milliseconds without mouseover before it dies
- Default value : infinite lifetime
Code
$("#someDiv").hover(
function(){
$(this).createMessage({
},
content : "this is message",
lifeTime : 2000
});
function(){$(this).deleteMessage();
});
Result
Hover the mouse here, 2sec lifetime