thecodeholic / lobibox Goto Github PK

View Code? Open in Web Editor NEW

200.0 26.0 87.0 7.13 MB

Responsive jQuery notification plugin

License: MIT License

CSS 12.15% JavaScript 79.35% HTML 8.50%

lobibox's Introduction

Lobibox

Responsive jQuery notification plugin written from scratch.

View Demo

Description

Lobibox is divided into two parts

Messageboxes
Notifications

Messageboxes

Lobibox messagesboxes can be modal and not modal
Possibility to show multiple messages
Use any available animation class for showing and hiding messageboxes
Every message can be draggable (On small screens dragging is disabled)
You can show
- messagesboxes in different colors and icons
- confirm message
- one line prompt (Any HTML5 input type can be used in prompt window. Such as: text, color, date, datetime, email, number, range etc)
- multiline prompt
- Progress messagebox. Lobibox comes with default progress style but you can use bootstrap or any other style progress bar.
- custom content window with ajax support with custom action buttons
Every message is an instance of plugin. You can easily grab the instance and attach events or call methods directly on the instance.

Notifications

Different color support
Possibility to show in any corners of the screen
Delay
Show delay indicator
Show with image
Sound support
Size support. You can show notifications of different size

Installation and dependecies

Lobibox is only depended on jQuery. But for best visual result and icons it's highly recommended to include bootstrap.css

1. Include necessary css/js files

<!DOCTYPE html>
<html>
   <head>
      <!--Include this css file in the <head> tag -->
      <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>
      <link rel="stylesheet" href="dist/css/Lobibox.min.css"/>
   </head>
   
   <body>
      ...
      <!--Include these script files in the <head> or <body> tag-->
      <script src="lib/jquery.1.11.min.js"></script>
      <script src="dist/js/Lobibox.min.js"></script>
      <!-- If you do not need both (messageboxes and notifications) you can inclue only one of them -->
      <!-- <script src="dist/js/messageboxes.min.js"></script> -->
      <!-- <script src="dist/js/notifications.min.js"></script> -->
   </body>
</html>

2. Call plugin method to show messageboxes or notifications

...

For documentation and examples visit the plugin's home page

lobibox's People

Contributors

Stargazers

Watchers

lobibox's Issues

Can't edit lobibox prompt while bootstrap modal is open

I can't seem to edit the lobibox prompt while bootstrap modal is open. Any fix for this?

When click on button, pop up will opened but the key focus is still on the button, so if i press enter or space key another box is pop up. Multiple pop up box is opened.

Here you can see the 3 box lobibox are created for confirm.

When set value to "onClickUrl" then it redirect to the url when click on the close button (top right corner of the notification).

Hi,

When set value to "onClickUrl" then it redirect to the url when click on the close button (top right corner of the notification). I will be nice if you could fix this bug.

Thank you.

Large Notification - Replace image with icon

Hi,

Is it possible to set the image as the icon in a Large Notification. Please see image bellow to get what I mean:

Thanks,
Carl

Adding Bower support

Can you add the bower support ?

Great plugin BTW

sounds

hi frist of all thanks for making lobibox, i want to inform you that sounds are not working in imac safari 10.0.3, i have a question i noticed you use lib/jquery.1.11 in lobibox but my website that im coding im using jquery-3.2.0 latest version, i tryed lobibox using latest jquery but it does not work, i wonder if you have a solution to this or tel me why you using a very old jquery thanks

Add option to show notification after next page reload.

Large Notification - add image link?

Hi,

I read the documentation and understand that it's possible to add a link to the notification popup, but is it possible to link only the image in a large notification?, and also the possibility of opening in a new tab on click?

Thanks,
Carl

Website not reachable

I tried to access your website as I am using your plugin for my website. But lobianijs.com has expired.

Font Awesome support?

I'm not using Bootstrap in every project. (This seems to a requirement in order to use icons.)

Have you considered adding Font Awesome support so that any of their 585 icons could be used in place of the Bootstrap icon?
http://fontawesome.io/icons/

Delay works only if the windows remain focused

Hello,
delayoption in Lobibox works only if our focus remain on the page. I mean if we click on other tabs of the browser, delay will stop till we focus again on the windows/tab. It is not a problem by itself but if we use ajax or any other methods with a timer to show notification for example every 15 seconds and set their delays to 10 seconds, we'll face a lot of boxes and it will annoy users.
By the way, your projects are awesome 👍

Default Font

If Bootstrap isn't used, the font defaults to whatever the browser has for a default. Could you set the default font (in the absence of Bootstrap) to Helvetica,Arial,etc?

can support chinese language?

I want use chinese ,but I don't know how to fix it?

Fix notification when tab is inactive

        var _addDelay = function ($el) {
            if (!me.$options.delay) {
                return;
            }
            if (me.$options.delayIndicator) {
                var delay = $('<div class="lobibox-delay-indicator"><div></div></div>');
                $el.append(delay);
            }
            var time = 0;
            var interval = 1000 / 30;
            var date_end = new Date().getTime()+me.$options.delay;
            var timer = setInterval(function () {
                var elapsedTime = date_end-new Date().getTime();

                time += interval;
                var width = 100 * time / me.$options.delay;
                if (width >= 100 || elapsedTime<0) {
                    width = 100;
                    me.remove();
                    timer = clearInterval(timer);
                }
                if (me.$options.delayIndicator) {
                    delay.find('div').css('width', width + "%");
                }

            }, interval);
        };

Thanks for plugin!

Notification not vertically aligned

After upgrading to a recent version, I found a regression, in notifications the icon is no longer vertically aligned:

With the old version it was properly aligned:

I did a git bisect and ironically it was caused by a commit named "Align icon/image vertically center":

git bisect start
# bad: [4f7a51543127fff6b661af1710b84a82fda6779f] Update version in package.json
git bisect bad 4f7a51543127fff6b661af1710b84a82fda6779f
# good: [d2b81f5eef87156f8a09b2d3499241f953ec1153] my first commit
git bisect good d2b81f5eef87156f8a09b2d3499241f953ec1153
# good: [790ea176ca1d3e877f90ec7002c78d12dc1fd661] fixed bugs for lobibox
git bisect good 790ea176ca1d3e877f90ec7002c78d12dc1fd661
# good: [a8ee1ca01c99e5c008e6157e4914e3b5631cd17c] Working on to make large notifications independent from bootstrap
git bisect good a8ee1ca01c99e5c008e6157e4914e3b5631cd17c
# bad: [1735632c1c608ab2562eedb6e1fa7b7026a408d7] Added option to show notification at any place
git bisect bad 1735632c1c608ab2562eedb6e1fa7b7026a408d7
# good: [0c4e63b995e99138a7aae85247450a3df57de87c] Merge pull request #13 from trestini/master
git bisect good 0c4e63b995e99138a7aae85247450a3df57de87c
# bad: [b7e61891eb9e23b683fecc67e45d77b7cc30517f] Align icon/image vertically center
git bisect bad b7e61891eb9e23b683fecc67e45d77b7cc30517f
# good: [b282a73fefffb1306d6e721c69e800072b9715ed] Added dependency with jquery ^1.11
git bisect good b282a73fefffb1306d6e721c69e800072b9715ed
# good: [c01234ae4e224bcea40237cb581c4c3488a0029b] Changed default animation on notifications. Added black color notification.
git bisect good c01234ae4e224bcea40237cb581c4c3488a0029b
# first bad commit: [b7e61891eb9e23b683fecc67e45d77b7cc30517f] Align icon/image vertically center

My testcode is quite short:
Lobibox.notify("error", { size: "normal", msg: "Test", delay: false, icon: "warning icon" });

Can't determine if cancel button have been click in a prompt box

Following this example http://jsfiddle.net/8vdvo13m/10/
I'm enable to determine if the cancel button have been clicked.
Usually null is returned when you click cancel in a prompt but here the text in the input is returned.

delay between 2 messages, 2 notifications

Hello,
I use Lobibox to display all errors back from a form validation. For each notification disappears after the previous, I had to increase the 'delay' value each time.
Would it be possible to set up a delays between the display of each message or notification, to act as if it manages a print queue?

Question: Is there a way to prevent page refresh to close the message?

Hi,
I have a form, the page refresh every 60 seconds the data is temporary saved in localstorage.
When the form is submit the success message box appear but may disappear quickly if a refresh arrive at the same time, so is there anything that can prevent this.

Let say I set a delay before hiding the message box and keep the message box open even if there is a page refresh?

desktop notifications based on the Web Notifications spec

Thanks for your great effort!!
I am requesting a new feature to provide desktop notifications based on the Web Notifications spec.
Please see PNotify for a reference.

Lobibox is dependent upon Bootstrap too, right?

If you don't include the Bootstrap library, the icons are not displayed and the width of the pop-up is not consistent.

Prevent the Duplicate Notification

Hi all,

here how can we prevent the duplicate notification i.e i want show only one notification untill it's getting close.
I have used this option "showAfterPrevious" but it displays one after another

undefined:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

I use fontawesome，but the icon cann't display, and throw an error:undefined:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Lobibox.notify('success', {
    size: 'mini',
    position:'center top',
    delay:false,
    delayIndicator: false,
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

it make some html，but i do not use bootstrap. please help.

<div class="icon-el"><i class="glyphicon glyphicon-ok-sign"></i></div>

onClick for notifications?

Is there a way to use onClick events on notifications?
Like opening a url when clicking that notification

"Large" Class = uncloseable

When not using bootstrap, the "large sticky notifications" can't be closed manually by clicking the "x". There's no way to dismiss the notification unless the page is reloaded/refreshed.

Sounds defaults to /src/sounds/

I was trying to figure out why sounds weren't working and it's because the the libraries are hard configured with the path "src/sounds" which won't exist in most cases if only the distribution (dist) files are used. The .ogg audio files should be copied to the "dist" sub-directory. Is it possible to use a relative path from the "js" sub-directory (ie "../sounds/")?

Alerts don't align to center on window resize

Hi,

The alerts don't align to center when window is resized. Is there any fix that I can apply to make this happen

Prevent notification from closing when mouse is over it

Large Notification - Delay

Hi,

Nice plugin! Is it possible to set a delay for large notifications? I understand that the documentation says I have to click the close button manually, but I really like the way the Large Notifications are grouped together and it's necessary in my use case to close them after 1 minute delay.

Looking forward to your response.

Thanks,
Carl

lobibox support jquery 3?

lobibox support jquery 3?
I finded supported jquery version 1.9.1 - 2 in bower.json.
my project using jquery 3.
lobibox has any issue on jquery 3?

Uncaught (in promise) DOMException

Lobibox version: 1.2.7

Follow Code:

Lobibox.notify('success', {
    sound: true,
    pauseDelayOnHover: true,
    continueDelayOnInactiveTab: false,
    title: 'Title',
    size: 'mini',
    msg: 'message',
    iconSource: "fontAwesome",
    soundPath: '/lib/lobibox/dist/sounds/',
});

Sometimes this mistake happens. The sound rings and does not ring. What he did not touch, he made an exception below:

Uncaught (in promise) DOMException notifications.min.js:1

Lobibox on Mobile

Has anyone gotten lobibox to work on mobile browsers?

When visiting the demo page link, it seems to work great on mobile.

But if I download all the files and upload it to a web server I run into some issues.
When opening the index.html (demo page), it works fine on my computer.
But when I try a mobile browser (iPhone or iPad, Chrome or Safari), it doesn't work at all.

Does anyone know how to resolve this?
Thanks,

Notifications close callback

Thanks for the super, easy to use piece of software.

Is there by any chance a callback that is fired when a notification box is clicked?

Window innerHeight Calculation uses incorrect DOM value due to timing issue

In setHeight(), when used for a WINDOW
setHeight: function (height) {
var me = this;
me.$el.css('height', me._calculateHeight(height))
.find('.lobibox-body')
.css('height', me._calculateBodyHeight(me.$el.innerHeight()));
return me;
},

When using a specific 'height', The call to me.calculatBodyHeight occurs before the change to $el.height just above has taken effect resulting in an incorrect value for $el.innerHeight(). You need to allow the element to render it seems before you can read the $el.innerHeight correctly.

As a simply work around I've only managed to use window.setTimeout. Its not pretty. Perhaps you could work out a better way....

maybe... just set the height to '100%'. I just tried it and it works. Its an inner height after all

Lobibox and vue2.js

i need to use lobibox notification but i am using vue2 js for real time notification in laravel5.5. Can we use it with vue2.js?

add a type of spin to messagbox

Just like jquery.spin to freeze UI for long time operation.

Does this library has angular directive

Do you have angularjs directive for this library. or is there any fork for angularjs

“action.devices.EXECUTE", "payload": { "commands": [ { "devices": [ { "customData": { "region": "CN", "model": "yeelink-mono1" }, "id": "M1GAxtaW9A0LXNwZWMtdjIVgoAFGA15ZWVsaW5rLW1vbm8xFRQYCDQ1MTAyMzgwFWYA" } ], "execution": [ { "command": "action.devices.commands.OnOff", "params": { "on": true } } ] } ] } } ], "requestId": "6529877997918554205" }

when hover the notification ，how to prevent it from closing？？？？

help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！help！

Not found sound4.ogg cakephp

Hi, it always shows me the error 404 http://localhost/cakephp/ecertscsmx/sounds/sound4.ogg.

I create the file and it doesnt work!!!

Notify soundPath is not changing.

When I try to change notify options I do this :

Lobibox.notify.OPTIONS = {
    'class': 'animated-fast',
    soundPath: 'sounds/',

    // You can override options for large notifications from here
    large: {
        width: 500
    },

    // You can override options for small notifications from here
    mini: {
        'class': 'notify-mini'
    },

    // Default options of different style notifications
    success: {
        'class': 'lobibox-notify-success',
        'title': 'Success',
        'icon': 'glyphicon glyphicon-ok-sign',
        sound: 'sound2'
    },
    error: {
        'class': 'lobibox-notify-error',
        'title': 'Error',
        'icon': 'glyphicon glyphicon-remove-sign',
        sound: 'sound3'
    },
    warning: {
        'class': 'lobibox-notify-warning',
        'title': 'Warning',
        'icon': 'glyphicon glyphicon-exclamation-sign',
        sound: 'sound5'
    },
    info: {
        'class': 'lobibox-notify-info',
        'title': 'Information',
        'icon': 'glyphicon glyphicon-info-sign',
        sound: 'sound2'
    }
};

This works but, soundPath is not changing. I get the same default 'src/sounds/' soundPath.

I managed to fix this by placing soundPath directly in Lobibox.notify like this:

      Lobibox.notify(

        // 'warning', 'info', 'success', 'error'
        arguments.type,
        {
            title:true,
             ... 
            soundPath: 'sounds/',
            sound: true,
            position: 'bottom right'
        }

      );

thecodeholic / lobibox Goto Github PK

lobibox's Introduction

Lobibox

Description

Lobibox is divided into two parts

Messageboxes

Notifications

Installation and dependecies

1. Include necessary css/js files

2. Call plugin method to show messageboxes or notifications

For documentation and examples visit the plugin's home page

lobibox's People

Contributors

Stargazers

Watchers

Forkers

lobibox's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs