Pnotify

Question

I found this cool little thing called pnotify, which provides really nice notifying alerts via javascript and bootstrap or jquery css but particulary css is not working for me.

I have this code:

<head>

    <title>pNotify test</title>

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<!-- jQuery UI -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
<!-- Bootstrap -->
<link href="includes/bootstrap/css/bootstrap.css" id="bootstrap-css" rel="stylesheet" type="text/css" />
<link href="includes/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script>
<!-- Pnotify -->
<script type="text/javascript" src="jquery.pnotify.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.pnotify.default.css">

function show_stack_info() {
var modal_overlay;
if (typeof info_box != "undefined") {
    info_box.pnotify_display();
    return;
}
info_box = $.pnotify({
    title: "Pines Notify Stacks",
    text: "Stacks are used to position notices and determine where new notices will go when they're created. Each notice that's placed into a stack will be positioned related to the other notices in that stack. There is no limit to the number of stacks, and no limit to the number of notices in each stack.",
    type: "info",
    icon: "picon picon-object-order-raise",
    delay: 20000,
    history: false,
    stack: false,
    before_open: function(pnotify) {
        // Position this notice in the center of the screen.
        pnotify.css({
            "top": ($(window).height() / 2) - (pnotify.height() / 2),
            "left": ($(window).width() / 2) - (pnotify.width() / 2)
        });
        // Make a modal screen overlay.
        if (modal_overlay) modal_overlay.fadeIn("fast");
        else modal_overlay = $("<div />", {
            "class": "ui-widget-overlay",
            "css": {
                "display": "none",
                "position": "fixed",
                "top": "0",
                "bottom": "0",
                "right": "0",
                "left": "0"
            }
        }).appendTo("body").fadeIn("fast");
    },
    before_close: function() {
        modal_overlay.fadeOut("fast");
    }
});

</head>

<body>

<button class="btn source" onclick="$.pnotify({
                    title: 'Oh No!',
                    text: 'Something terrible happened.',
                    type: 'error'
                });">Regular Error</button> 

<button class="btn source" style="margin-left: 10px;" onclick="show_stack_info();">What are stacks?</button>                

</body>

I really have no idea why the javascript is working but no css at all is working. Can someone help?

Neto · Accepted Answer

You need to set the style. If you are using jquery do this:

 delay: 20000,
 history: false,
 stack: false,
 styling: 'jqueryui'

Pnotify - javascript is working, css not

Tags:

javascript

html

css

javascript-framework

Mythago

1 Answers

Neto

Recent Activity

Donate For Us