fabien-d / alertify.js Goto Github PK

The build implementation is currently quite hacky so I'm looking for a cleaner way to remove RequireJS as a dependency on concat/minification of alertify.js.

Current

Options

1. Find a cleaner method (more flexible) that doesn't rely on including a third party library.
2. almond.js - I initially wanted to keep alertify.js as a stand alone utility, but at ~1KB (min/gzip) it may be worth while and it's made to replace require.js.

I use the alertify.alert(...) to display a form submission error. By default it displays with a green OK button. I would love to be able to override that so it could be a red button instead since that will have a better visual indication.

I've only confirmed this with IE9, though I imagine it applies in older IE versions as well.

There's a item-specific screen in my application with the following expected flow:

1. Click button to start processing (firing Backbone.js route)
2. Alertify.js pops up a confirmation (alertify.confirm)
3. If "OK", a loading gif is shown
4. When processing finishes, a results page is shown

I ran into trouble in IE because the hash link (href="#") is being followed, which means the flow looks like this:

1. Click button
2. Confirm box
3. If OK, fire default Backbone.js route and return to top page (this is the problem)
4. When processing finishes, show the results page

I noticed that you're using preventDefault if it exists, but it doesn't in IE9. I was able to get the expected behavior by adding the following line to my click handler:

if (event) event.returnValue = false;

Hello,

This is the code im using to create a simple alert that is prompted automatically when a visitor gives a page hit.

can this be automatically called and ran when someone navigates to the web page?

how can that be done?

It would be nice if we could set the input's type and some of its attributes, you can make use of HTML5's new input attributes and types:

Attributes:

1. autocomplete: for turning autocomplete on or off.
2. pattern: for restricting input, for examle, to only numbers or letters.

Types:

1. email
2. number
3. url
   or other types.

https://developer.mozilla.org/en-US/docs/HTML/Element/Input

Thanks for great library.

I want to show my alert notification in the top, not in the bottom.
Do you have configuration for that? I could not find it in the documentation.

when prompt is fired, put the focus in the textbox

Standard in OSs seems to be OK on the left, Cancel on the right. alertify.js has it the other way around.

Unless I'm missing something...?

In 100% of the cases I use a confirm dialog, I am making double sure the user wants to take the action they just indicated, because the action is dangerous or has big consequences. In these cases it's dangerous to have the OK button focused by default, as I want the user to do extra work to complete the action.

Can alertify get a new property, say focusOn, that allows one to set whether the focus should be on ok, cancel or none?

OK, so I have some alerts that appear after a user types in some text, and presses submit.

However, if rather than click submit, they press enter, the keydown event is captured by Alertify, and then processed.

The effect is like enter is pressed twice. Once to bring up the alert, and then to "OK" it.

This only happens once the alert html has been created (ie. setup has been actioned), and alertify has bound the keydown event. Hence, it will only occur after the second attempt of trying.

First off, I have to say that I really like alertify. It provides a great baseline of functionality and is easy to use. However, during the course of a project, I found myself wanting to add additional functionality to alertify -- such as rendering different HTML in some cases, or adding a "close" button in the upper right. This sort of stuff is definitely outside the scope of alertify's core usage. So, what's a guy to do? Subclass and overload! It would be awesome to simply inherit from alertify, overload the build method, and do whatever I wanted.

Unfortunately, the architecture of alertify does not allow that. Everything inside the constructor is a private method or property (http://javascript.crockford.com/private.html), so it's impossible to access these in inheriting classes. I know it's a big job to refactor alertify into a inheritance-friendly structure, but I thought I'd put it out there all the same.

Change the "OK" button into an input button and allow for enter key (submission) from the input textfield

Would be nice if this were setup as a Bootstrap.js extension, using the base theming in bootstrap as a jQuery/bootstrap extension.. the theming is likely to be pretty alien to a lot of configs out of the box, and this would at least bring it closer to something more common.. even if only as a css/less option.

I have code that looks like
alertify.log( data.name + ' has disconnected!', 'error', 5000 )

The problem is, it is not disappearing after 5 seconds.
It just sits there forever.

Also, if I click on the log, it will not disappear either.

No JavaScript errors in console.

Running Alertify 0.3.6 on Chrome 23.0.1271.101 on Mac OS X

it would be great if your library could be loaded at any time; i would prefer to have it loaded in the head section. it looks like the way it's currently written, it must be included only after the body is loaded, e.g. in the body section. would it be possible to supply a method call which does your initialization, so i can call it later, such as with jquery's ready callback?

other than tracking down this one issue, this library was extremely easy for me to get running and customized. looks great. thanks!

Performance reason: based on Chris Coyier's tale of animation performance and Paul Irish's why moving elements with translate() is better than pos:abs top/left

First tests didn't show much hit (from repaint) and was still well under the 60 fps, but since there is no non-CSS animation fallback, moving to translate seems to make sense.

http://semver.org/

The reset method in the addListeners method needs to take the buttonReverse property into account when resetting the focus. If button are reversed, btnOK and btnCancel should be reversed.

reset = function (event) {
    if (hasInput) input.focus();
    else if (hasCancel) btnCancel.focus();
    else btnOK.focus();
};

Hello, i need to create an Background Opacity effect with alertify,
but i don't have any idea.

How we can do it ?

Thanks

When I use alert dialog, the "ok" button appears to be clicked, but does not trigger the click event. On mouseclick down, i see the button itself disappear, revealing a small ok text link. On mouseclick up, the button reappears. Clicking the button doesn't register the dismiss event, only clicking the button exactly where the underneath text link is will register the dismiss event. I don't see this behaviour in the sample page :-(. I get the same issue with FF 16 and IE 8/9 on windows xp (i know ... its a work machine)

All JS disabled (except as below). Issue still present in:
*FF16, IE8 on WinXP
*FF17, IE10 on Win7
Works in Chrome on Win7.

My Code:

<html>
<body>
...
</body>
<script language="javascript">

function gotoButtonClick() {
    /* validate the mandatory fields */
    alertify.alert("Please enter Phone # and SIM Serial #", function () { 
        //after clicking OK
    });

}

</script>
<!-- JavaScripts -->
<script src="./js/alertify.min.js"></script>
</html>

Pics show what happened after alert slides in.
*First pic shows mouse click-down on button - reveals small 'ok' text link.
*Second pic shows mouse click-up - shows the button again, dialog is not dismissed
*ONLY when the button is clicked why hovering EXACTLY over the hidden 'ok' text link, is the alert dialog dismissed

UPDATE

It was a clash with some custom css :-(

I should be able to see which button is "active" by default, press it with my keyboard, and tab over to the other one

basically -- mimic keyboard navigation usage of the native prompt/alert/etc as much as possible

Hi,
I've been fiddling with the

alertify.delay = n; 

property, without success. Please, can you show me a real working example about how to modify the default delay value (and include it in the docs)?.

Thanks!

In Chrome Version 24.0.1312.14 beta on Ubuntu, if I click very near the edge of a button like OK or Cancel, I get visual feedback as if I'd clicked the button, but the modal isn't dismissed.

Nice library! I added the JS file at the end of body. When I run alertify.success("Deleted"), I get this error in firebug:

TypeError: logElement is undefined
logElement.insertBefore(log, logElement.firstChild);

Looking through the source, I see logElement = document.createElement("section") but the section element is not created anywhere in the body.

Any ideas why?

if the callback throws an error, prevent default is never called and the browser navigates

Setting custom labels as one object no longer works. Setting them individually still does...

// doesn't work
alertify.labels = { ok: "Go", cancel: "Stop" };

// works
alertify.labels.ok = "Go";
alertify.labels.cancel = "Stop";

After a dialog is closed, reset the focus to the element that previously had it.

User submit form, it shows alert. If the user quickly re submit, currently, it will show other alerts over the first.

Can I stop new alert's display during the first alert's display?

Alerts are currently a box that pops up above the main text. Users can still interact with the main page (and do so by default). However, focus is set to the underlying page.

If possible, can the dialog boxes be modal where focus to the dialog box is stronger or enforced? E.g. In chrome, hitting space when looking at a dialog box scrolls down instead of dismissing the box. Hitting enter works as expected and dismisses the dialog box.

The design I applied to the log list, contains paddings and it appears even when the log list is empty, I think i would be usefull to add a class for when the list is empty so that people can hide the log list and show when needed. Thank you

prompt(message, defaultText);

message Required. The message to display in the dialog box
defaultText Optional. The default input value

Hello,

I try to override Javascript basic dialog boxes.
It works fine for the alert function.
But for the prompt function it doesn't work.

Here is my code :

var _oldprompt = window.prompt;
window.prompt = function()
{
    var _message ;
    var _position ;

    _message = arguments[0] ;
    alertify.prompt(_message, function(e, str)
    {
        if (e)
            return str ;
        else
            return null ;
    });
};

Then, I just call something like this elsewhere :

_answer = prompt("What's your favorite color ?")

In debug mode, I check that I return from this call before the prompt is displayed and, of course, _anwer is always null.
But the prompt is then well displayed and I can type a string and validate the dialog.

It is true with jQuery 1.4.2 and IE 8 or Firefox 17

Am I wrong somewhere ? Or is it a true issue ? Or just maybe a jQuery version issue (but currently, I can't upgrade) ?

Thanks.

Obiwan

Update "a" -> "alertify"

e.g. id="aOK" -> id="alertifyOK"

Need to do more research on how to properly handle all aspects of this. Logging to keep track and hopefully get some insight from other developers.

Useful resource:

The Open Web Application Security Project

When I trigger a prompt dialog at the bottom of a long page the document jumps to the very top. I'm using the default theme and (the rather old Chrome 18, cannot update on this machine will try with a newer chrome)

Also when the dialog opens and the page scrolls, the entire page flashes black for a split second.

I don't see why this is happening, given that position fixed is used on the container element for the dialog.
Firefox behaves as expected (no flash, no page scroll)

If you click e.g. the button "Promt Dialog" alertify injects the DOM section#alertify. After clicking "Ok", the section persists in the DOM (just classes change to hidden). You are not able to click the button again, if its position is exactly underneath this section.

Reproduce: Open http://fabien-d.github.com/alertify.js/ , scroll the page so "Customizable Dialog Box" with those three buttons is quite below the header of the page. Click "Promt Dialog" and click "Ok" to close the popup. Be sure that the width of the browser meets a condition so that the "Promt Dialog" button is underneath the section#alertify. You can't click the button again.

I'd like to be able to have a spinner on an alertify message, but I need the DOM element in order to be able to attach things to it. There's no way to get the element that is created.

confirm/prompt dialogs can trigger the callback twice - it happens when the Enter key is pressed twice in a row or the OK/Cancel buttons get double-clicked.

I love that it works on Safari iOS. However, when the log, error, message dialogs appear I'm inclined to click it so that it goes away.
I know it will disappear after a little while but the real estate on iphones is precious.

alertify's CSS is split to easily support themes. I'd love to get a few more out of the box options.

• themes are located in the themes folder
• follow naming convention of alertify.THEME_NAME.css
• progressive enhancement is encouraged (no images should be used)
• must work in the browser supported list

Google Chrome Canary Version 26.0.1370.0 canary.

When I go to http://fabien-d.github.com/alertify.js/ and click Notification in Customizable Log Messages multiple times then few messages pop-up (expected behaviour).

After messages disappear from screen they are still inside DOM (checked with Inspect element) and when I click Notification again then new message shows in the middle, not bottom (because it stacks on top of not removed invisible messages).

How do I create an external alertify.js using tools provided in the web.

I was looking to have an ok button, and the prompt reading as follows:

You have reached the WW Network.
The WW Network uses state-of-art tracking from our private domain tracker.ww.com.
We are only accepting ten new affiliates for December, so join today!

Write all test to avoid (as much as possible) any regressions

The log messages are currently just being removed from the DOM after they're displayed for the wait time, but there is no animation. But it looks as if the CSS has an alertify-hide class which would do the opposite of alertify-show class using CSS transitions, but it doesn't seem to be used right now.

function confirmDelete() {
alert('Starting.......');
alertify.confirm("This is a confirm box.", function (e) {
if (e) {
alert('test .. ' + e);
alertify.success("You've clicked '" + alertify.labels.ok + "'");
return true;
} else {
alertify.error("You've clicked '" + alertify.labels.cancel + "'");
//$('#hdnDelete').val('false');
return false;
}
});
}

Hi fabien-d, amazing plugin :)

Just want to let you know it works nice on Blackberry 6 OS (Torch 9800) but there is a common problem on Windows Phone 7.5 and Android 2.3 for me.

It seems vertical position of the window is not properly tracked, so when you scroll and launch an alert it just appears on the top of the page, needing you to scroll upwards.

Hi Fabien,

I tested your alertify in Safari for Windows 7 (Safari version 5.1.7). The popups are not shown (you can reproduce that with your own demo page). I can see them in the DOM, but they don't appear on the screen.
The funny thing is, that when I set the body to display:none and remove that property again, the popup comes up.

There has been a few requests for custom functionality. (e.g. #39, #70, #86). So I'm considering three possible scenarios (open to more).

1. Stick to the Basics

The intention of alertify from the beginning was simply to be able to replace native dialogs with customizable ones. The plan all along was to mimic the behaviour and stop. Currently, it's very close and with a few tweaks and optimization, version 1.0 could be just around the corner.

2. Core Library + Extensions

Still sticking with the basics of what alertify was meant for but adding extension that could be added as dependencies to provide additional and more customized options. This would solve the problem about whether a certain feature is useful and generic enough to fit in the core and allow anyone to write extensions without touching the core. This would give greater flexibility and could be extremely useful for advanced users and allow personalization to the library.

3. Custom Build

This would be very similar to option 2, where the code would be split into stand alone features that could be hand picked and then used to generate a custom build.

I'm leaning heavily towards #2 or #3. This would need to be properly scoped out but would love to get feedback on whether this would be useful...