How to use Gritters in WebPages with jQuery

Question

I want to use gritters but they don't work, they are going to the bottom of the page with no style. I call it from a function in jquery using this:

$.gritter.add({
    title: "Sucesso",
    text: "O Administrador  " + $nome + "  foi adicionado com sucesso.",
    fade: true,
    speed: "fast"
});

Am I doing it wrong, I've tried other stuff, but didn't work. I'm using this template http://www.eakroko.de/flat/components-elements.html, and I have called the js script.

Answer 1

You must be forgetting to include the gritter.css file. I'd have to see your full page to help more but this is how I use it and it works fine for me...

include jQuery and jQuery UI first (jQuery UI is not required for gritter but I use it for other stuff)

<script type="text/javascript" src="javascript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.9.1.custom.min.js"></script>
<link type="text/css" href="css/jquery/[yourThemeOfChoice]/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" />

then include gritter css and jss

<link rel="stylesheet" type="text/css" href="javascript/gritter/gritter.css" />
<script type="text/javascript" src="javascript/gritter/jquery.gritter.min.js"></script>

then you can use gritter.

If that doesn't work then double check your css and make sure you don't have conflicting style definitions. To do that, set your gritter to NOT fade away, then in Chrome you can right-click on the gritter message, then select inspect element, then you will be able to view all its applied styles.