Jquery Gritter set position

Question

is it possible to change the possition of gritter? Or even better bind it to an element such as a span or a div?

Ive tried:

        $.gritter.add({
            title: 'Dashboard',
            text: 'Field updated!',
            time: 2000,
            position: 'center'
       });

(also tried with buttom, top ect) but the position remain unchanged

Answer 1

By reading the documentation, it seems you can't centered the gritter like this, only ths'bottom-left', 'bottom-right', 'top-left', 'top-right'

$.extend($.gritter.options, { 
    position: 'bottom-left', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1)
    fade_in_speed: 'medium', // how fast notifications fade in (string or int)
    fade_out_speed: 2000, // how fast the notices fade out
    time: 6000 // hang on the screen for...
});

What if you change the position with css ?

Answer 2

You can try...

//css

.gritter-center{
position:fixed;
left:33%;
right:33%;
top:33%
}

//Javascript

$.gritter.add({
 title: 'This is a centered notification',
 text: 'Just add a "gritter-center" class_name to your $.gritter.add or globally to   $.gritter.options.class_name',
 class_name: 'gritter-info gritter-center'  
});