Question

95

How to use Gritters in WebPages with jQuery

rated 0 times [ 99] [ 4] / answers: 1 / hits: 5337 / 11 Years ago, thu, december 26, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karladaijahf

Add To Favorites

Follow

Total Points: 78

Total Questions: 123

Total Answers: 89

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 11 Years ago kristinsonjab · Accepted Answer

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.