Change position by css like left and top position:
$("#gritter").css('left',"100px");
$("#gritter").css('top',"20px");
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
Solution 4
Change position by css like left and top position:
$("#gritter").css('left',"100px");
$("#gritter").css('top',"20px");
OTHER TIPS
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 ?
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'
});
Add a custom class 'center' into your specific css file
#gritter-notice-wrapper.center {
position:fixed;
left:33%;
right:33%;
top:33%;
}
Tweak css params to adjust the gritter notification position.
Replace the line
position = $.gritter.options.position,
with
position = params.position || $.gritter.options.position,
Finally call your add gritter function
$.gritter.add({
title: 'Dashboard',
text: 'Field updated!',
time: 2000,
position: 'center'
});
instead of doing 33%, which will position the gritter near center but almost always slightly off, I would suggest the following. This should work if you customize the gritter to a different/non fixed width as well.
#gritter-notice-wrapper.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
then, (as mentioned by bech) to allow the position to be configurable as originally requested, instead of only in the options in the js file:
in jquery.gritter.js, replace
position = $.gritter.options.position,
with
position = params.position || $.gritter.options.position,