htmlguyllc / jalert Goto Github PK

In firefox v51.0.1 64 bits (windows 10) while the jAlert is showing from bottom to top, then vertical scrollbar of document is showed,
later,
jAlert is loaded and the scrollbar is hidden.

I found how to fix this problem:
Original:

L95:            centerAlert: function()
L96:            {
L97:                var viewportHeight = $(window).height(),
L98:                alertHeight = alert.instance.height(),
L99:                diff = viewportHeight - alertHeight;

Fixed:

L95:            centerAlert: function()
L96:            {   // fix next line: add *0.75
L97:                var viewportHeight = $(window).height()*0.75,
L98:                    alertHeight = alert.instance.height(),
L99:                    diff = viewportHeight - alertHeight;

I hope this it will be useful for someone.

Hello,
What happens to the #id Selector which are located in the div that are included in jAlert?
Let me explain: if in a div, such as the one with id = "fromDiv" you find in the sample file test.html, insert the following lines:

<div id="test1">test1</div>
<form name="edit"><input type="text" name="test2" value="test2" size="5"></form>
<input type="button" onClick="document.getElementById('test1').innerHTML='ok'; document.edit['test2'].value='ok'" value="test">`

Then if I press the "test" button should appear "ok" in the div "test1" and in the textbox, instead seems that these elements do not exist, and I get an error in the JavaScript console.

Note that if I remove the "display: none" from "fromdiv", and so this is always visible, the test is working properly.

When the "fromdiv" is included in jalert, the selectors "disappear" ...

Can it be solved? Thank you.

body > *:not(.ja_wrap) {
-webkit-filter: blur(5px) grayscale(.7);
filter: blur(5px) grayscale(.7);
}

Is there a way to disable the override of the default Javascript alert? I would like to keep the default alert box, but use jAlert for other scenarios.

i'm struggling to have a confirmation , based on ok and cancel

Buttons that have an event handler will occur more and more as you trigger that same alert and click the same button.

I'm trying to get this to work in the lynx browser but all it does is a whole lot of words on the page, can you help?

Hello,
if I display an iframe with jalert, how can i programmatically close the jalert box with a command in the page displayed by jalert?
In short, in the page displayed in the iframe, there must be a button that executes a command like
window.parent.jAlert.closeAlert()
or something like that: what is the exact syntax?
Thank you.

i wonder what causes this..

Hi I was using old version and there was jPrompt functionality.
What happened here?

this is my actual confirm using build in browser

function lol(){
                        var r = confirm ("Do you want to add this?");
                         if (r == true){
                             return true;
                         } else {
                             return false;
                         }

                    }

and then I do if (confirm() == true)
how to make this with jAlert?

I've been testing this plugin successfully for a couple of days, and just found a problem - but I don't know in which plugin:

If you add jAlert v4.5.1 along with jQuery validator (https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0) the ajax option does not load any content.

So far, I tested it with jQuery 1.7.2 and 3.3.1, with no success so far. Personally, I intend to change the validator plugin for another one, but this information could save someone a few hours testing.

Thanks!

ToDo:
~ Create a function to easily customize the confirmation question

How to add an custom class on X button depending on the alert type?You should add that is good for css customization

As title,Is it possible to accept an dom object as content?
It is because I need to add event handler for the content objects.

Besides that, an issue for noPadContent:true found, my code as the following:

$.jAlert({ noPadContent:true, 'title': "Select a Directory", 'content':msg, 'theme': 'red', closeBtn:false, 'btns': { 'text': 'Ok',class:"w3-red"} });

where msg=<div style="border:1px solid black;padding-top: 0px; margin-top: 0px;">
<ul style="padding: 0px; margin: 0px;">
<li style="margin-left: 10px; list-style: none;"><i class="fa fa-hdd-o"></i>&nbsp;<a rel="C:&quot; style="cursor: pointer;">C:&lt;/a></li>
<li style="margin-left: 10px; list-style: none;"><i class="fa fa-hdd-o"></i>&nbsp;<a rel="D:&quot; style="cursor: pointer;">D:&lt;/a></li>
<li style="margin-left: 10px; list-style: none;"><i class="fa fa-hdd-o"></i>&nbsp;<a rel="E:&quot; style="cursor: pointer;">E:&lt;/a></li>
<li style="margin-left: 10px; list-style: none;"><i class="fa fa-hdd-o"></i>&nbsp;<a rel="F:&quot; style="cursor: pointer;">F:&lt;/a></li>
<li style="margin-left: 10px; list-style: none;"><i class="fa fa-hdd-o"></i>&nbsp;<a rel="G:&quot; style="cursor: pointer;">G:&lt;/a></li>
</ul>
</div>

The ok button row wider than bother content and title row.

browser: Microsoft Edge 38.14393.0.0
issue1: edge freeze when i resize to small win browser (you need to try dif small sizes some time it works depens on the size)
issue2: chrome version: 56.0.2924.87 chrome modal does not apper at top when very small window
my code:
$.jAlert({
'ajax' : 'index.php?page=live&at=' + data.t,
'title': 'Reservation',
'content': 'Reservation',
'theme': 'black',
'size': 'auto',
'showAnimation': 'fadeInUp',
'hideAnimation': 'fadeOutDown',
'closeBtn' : false,
'closeOnEsc' : true,
fullscreen : false,
onclose : function(alert){$
clearInterval(refreshId);
refreshId = setInterval(rotate, 5000);
return false; },
});

... the same message shows in a new jAlert. This new jAlert was showing over the first jAlert. Why? In the demo version don't happend this...

Hi, first of all thanks a lot for the plugin, I use it often

But I realised that the CSS file has more than 500 W3C validation errors.

I know that on the W3C they are very strict with the rules, but what do you think about removing all the non-standard CSS properties? Or creating another "clean" CSS file

Try to parse the jAlert.css file into here: https://jigsaw.w3.org/css-validator/#validate_by_input

The issue remains mainly with the @-webkit-keyframes all over the place in the CSS file.
How needed and relevant is that tag?

thanks

This issue happens after click a link that opens up a jAlert box and then press ENTER key will open up another instance. It will keep creating an instance as you press ENTER key. The reason for this is because the focus on the link remains active, so if you press enter, its like you clicked the link again.

I made a fix, I hope I done it right but it works for me. I thought you might consider fixing this issue on your next release.

What did was to remove the focus on the active element:

At line 556, I added document.activeElement.blur(); //this is to prevent same link to trigger another instance.

/* If the alert has an element that should be focused by default */

        if(alert.options.autofocus )
        {
            alert.instance.find(alert.options.autofocus).focus();
        } else {
            document.activeElement.blur(); //this is to prevent same link to trigger another instance
        }

when I open jAlert with iframe then the page behind the jAlert scrolls to the top, is there a way to prevent this?

In Firefox, jAlert is working, but after click on close button, I can't scroll my page for next 10 seconds....in chrome work well...

I can't use line breaks in a alert. Thats sad :c

infoAlert("\""+ username +"\"s Info","Name: "+username+"\\n"+"\n"+"ID: " + id);

Is it possible to change the size of the buttons for tablets? Currently on some devices the buttons appear small and it's really hard for the user to tap the button.
I tried creating my own HTML button but 'confirmAutofocus' doesn't work. When I press the enter/return key the alert closes and the page is reloaded.

Hi,

the iframe option of jAlert doesn't seem to work in Internet Explorer 10.
I also tried the example at http://flwebsites.biz/jAlert/.

Opening jAlert with iframe, the height is always 100% of the viewport height, i would like to have it sized according to the content within the iframe.

I would like to pop a dialog up with a string of

red text, "YOU FAILED TO DO BLAH BLAH"

yellow text, "Im warning you to do blah blah"

green text, "you did this perfectly."

Can you add this enhancement?

Hi , for our function we have the following code :

$('.lb-video').alertOnClick({ 'video': 'https://www.youtube.com/embed/aVO2SKs9BK8', 'size': 'lg' });

But want to use the direct link ( https://www.youtube.com/watch?v=aVO2SKs9BK8 ) without embed, is that possible?

Thanks !

I tried to use the jAlert-functions.js's own test page and I'm getting the error alert.each is not a function in line 30 of jAlert-v3.js. How to proceed? Thank you!

closeOnClick does not work in IOS. On android and browser no problem...

for green we have succesAlert for red errorAlert for yellow it could be dangerAlert or infoAlert but I think danger is better you chose

How to disable the override feature of the default alert box and confirmation box?
Edit: I found it thanks

It would be cool if we had a list of public sites that use jAlert. Share yours below!

I have included scripts and added confirmation as per document like below:

function delete_confirm(form)
{
    confirm(function(e,btn){ //event + button clicked
        e.preventDefault();
        form.submit();
    }, function(e,btn){
        e.preventDefault();
        return false;
    });
} 

But I don't see any example explaining how I can I add other parameters like title, theme, size, etc. in above confirm method, like below alert:

$.jAlert({
            'title': 'Set It',
            'content': 'Set',
            'theme': 'green',
            'size': 'md',
            'showAnimation': 'fadeInUp',
            'hideAnimation': 'fadeOutDown'
        });

Hi, do you have any plan to use it with Bootstrap?

When the jAlert window is displayed the vertical scrollbar disapear then when the jAlert window is closed the scrollbar doesn't appear again... is this the expected behavior?

If you open an alert with closeOnClick: false (the default setting), then open another one with closeOnClick: true....both alerts will close when you click twice.

Is this pluging waits until user action or it just execute the next line code in javascript ?

Hi. I' m using jAlert-functions.js wich redefines the -alert- native function. But if I hit Enter or Spacebar when the alert is on screen, it fires the alert again and I need to press Escape key many times to close them. I' ve made a few modification to the jAlert.js and could solve the "Enter key problem". This are my modifications:

Line 157 approximately:
closeAlert: function(remove, onClose) {
if( remove != false ) {
remove = true;
}
/* add this */
$(document).off('keydown', $.fn.jAlert.onEnter);

Line 277
if( alert.video && alert.video.indexOf('youtube.com/watch?v=') > -1 && alert.video.indexOf('embed') === -1 ) {
alert.video = alert.video.replace('watch?v=', 'embed/');
}
/* add this */
if( alert.type == 'modal' )
$(document).on('keydown', $.fn.jAlert.onEnter);

if( alert.type == 'confirm' ){
      .........rest of original code here

Line 860:
/* Keydown on document (escape key) */
$.fn.jAlert.onEscKeyDown = function(e){
,,,,original code here
}

/* Keydown on document (enter key) */
$.fn.jAlert.onEnter = function(e){
	/* Enter = 13 */
	if(e.keyCode === 13) {
		e.preventDefault();
		var lastVisibleAlert = $('.jAlert:visible:last');
		if( lastVisibleAlert.length > 0 )
			lastVisibleAlert.jAlert().closeAlert();
	}
};

i've tried to do the same with the spacebar key but I could not do it.
Any ideas ? Thanks in advance

hello, I encountered a strange problem.
my IE version is IE11, the jAlert is working well.
but if i use the simulator to simulate other version(IE10 or above)
the jAlert will work, but the window will exchange to the other window.
but...when i use alt+tab to check the order.
The IE is still the first pick.
Can you please check this! Thank you very much!

----------------------------------Here is my code ----------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="ServerTest.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<title>Test</title>
<link href="Content/jAlert.css" rel="stylesheet" />
<script src="Scripts/jquery-1.11.3.min.js"></script>
<script src="Scripts/jAlert-functions.min.js"></script>
<script src="Scripts/jAlert.min.js"></script>
<script>
function test(event) {
event.preventDefault();
$.jAlert({
'title': '123',
'content': 'test',
'theme': 'red',
'btns': {
'text': '確定',
'theme': 'red',
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button2" runat="server" Text="Button1" OnClientClick="test(event)" />
</form>
</body>
</html>

Nice plugin keep it up.
How about an yellow alert ?

the confirmation box doesn't close on click anywhere

Nice job with the videoAlert 👍 . It's posible to add an open in new tab alert link?
Like this in html

<a href="http://google.ro" target="_blank"></a>

Hi,

by using the closeOnEsc option (which is true by default) previous keydown functions from all keys are removed. I think this is caused by

$(document).off('keydown');

jAlert-v3.js - Line 533

IMHO only the function itself should be unregistered.

alert("hi"); in console gives me the default alert and undefined in the console output.Everything else works.

The first line of the source page are those

NULL
<!DOCTYPE html>

<html class="no-js" lang="en-US">
<head>

null is from the php code
If I delete that null everything is centered but with that null before the doctype is not centered anymore

The problem occurs when I load an external file (using .load ()) to index and try to use an alert or any Jalert-function

sorry if my English is bad

I have been unable to create buttons with working links. When the user clicks a button, the jAlert modal simply closes. I am using the btn href property as described in the documentation. Perhaps you could provide an example of a working btn href in Codepen?

Hello! When an alert pops-up, the vertical scrollbar is hidden and page body is no longer scrollable. Any way to prevent this behaviour? In the plugin options have found nothing related... Thank you!