jQuery Floating Message Plugin

jQuery Floating Message Plugin is display the messages easily.

Dual licensed under the MIT or GPL Version 2 licenses.

Requires jQuery , jQuery UI.

Supported Browser : IE 7.x , IE 8.x , Firefox 3.x , Google Chrome2.x

Bugs : Animation bug was occured when customize position. occur browsers are IE 7.x , IE 8.x , Google Chrome2.x

Tutorial

Normal Message

Normal floating message.

$("input#demo_normal").click(function(){
    $.floatingMessage("Respect jQuery.\nwrite less , do more.");
});
                    

Width , Height

Customize width and height.

$("input#demo_width1").click(function(){
    $.floatingMessage("Looong width.",{
        width : 500
    });
});
$("input#demo_height1").click(function(){
    $.floatingMessage("Looong height.",{
        height : 500
    });
});
                    

Position

Setting display position.

align : "left" or "right"

verticalAlign : "top" or "bottom"

$("input#demo_position1").click(function(){
    $.floatingMessage("Left-Top Message.",{
        position : "top-left"
    });
});
$("input#demo_position2").click(function(){
    $.floatingMessage("Left-Bottom Message.",{
        position : "bottom-left"
    });
});
$("input#demo_position3").click(function(){
    $.floatingMessage("Right-Top Message.",{
        position : "top-right"
    });
});
$("input#demo_position4").click(function(){
    $.floatingMessage("Right-Bottom Message.",{
        position : "bottom-right"
    });
});
                    

Timer

Auto remove after the time.

time : display time[msec]

$("input#demo_timer1").click(function(){
    $.floatingMessage("Display message with timer.",{
        time:3000
    });
});
$("input#demo_timer2").click(function(){
    $.floatingMessage("Display message with timer.",{
        time:6000
    });
});
                    

Effects

Customize effects.

show : show Effect.

hide : hide Effect.

stuffEaseTime : stuff easing duration.

stuffEaseing : stuff easing.

moveEaseTime : move easing duration.

moveEasing : move easing.

$("input#demo_effect1").click(function(){
    $.floatingMessage("Effect1.",{
        show : "fold",
        hide : "explode",
        stuffEaseTime : 500,
        stuffEasing : "swing",
        moveEaseTime : 200,
        moveEasing   : "easeInExpo"
    });
});
$("input#demo_effect2").click(function(){
    $.floatingMessage("Effect2.",{
        show : "blind",
        hide : "puff",
        stuffEaseTime : 100,
        stuffEasing : "easeInExpo",
        moveEaseTime : 200,
        moveEasing   : "easeOutBounce"
    });
});
                    

jQuery object

jQuery object to message.

$("input#demo_object1").click(function(){
    $('
Link:sideroad.secret.jp
').floatingMessage(); }); $("input#demo_object2").click(function(){ $('
Image:Image
').floatingMessage(); });

Download