sideroad

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.

Normal Message

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

Width , Height

Customize width and height.

Long WidthLong 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"

Left TopLeft BottomRight TopRight 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]

Display 3secDisplay 6sec

$("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.

Effect1Effect2

$("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.

jQuery Object1jQuery Object2

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

Download

Downloadgithub

Comment