3

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?

Improve this question
3
  • Could you link to an example page?
    – Subtlebot
    Commented Aug 13, 2013 at 19:47
  • This is the framework example page if that is what you meant :pinesframework.org/pnotify , otherwise I don't have my test test hosted, only on localhost. I can sure upload it somewhere if necessary..
    – Mythago
    Commented Aug 14, 2013 at 7:59
  • I am also having a similar issue, I am unable to change the width of the pnotify. Any solution guys?
    – Faizan
    Commented Sep 16, 2013 at 14:17

2 Answers 2

Reset to default
1

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

 delay: 20000,
 history: false,
 stack: false,
 styling: 'jqueryui'
Improve this answer
0

You cannot use space in the name of your class (if it's a single class). Try renaming btn source to btn_source. See Which characters are valid in CSS class names/selectors?

However, as Nimoi pointed out in the comment, it's fine if it's two classes. See How to assign multiple classes to an HTML container?.

Improve this answer
1
  • 1
    I assumed .btn and .source were different classes, but you could be correct. Since we don't get to see his CSS code it's difficult to determine where the problem is.
    – Subtlebot
    Commented Aug 14, 2013 at 19:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.