I did not put in any comments/ remarks in the script, as the script is fairly easy to understand.
If you have any feedback please feel free to drop me a message or comment, it will be appreciated.
The idea of this script is to get rid of the old alert box that sometimes I think is really annoying, and unnecessary.
In some situation, where you just want to let your user to be informed on certain thing, alert is a little bit too "hard" to me. And due to the popularity on light boxes, as well as other awesome libraries like jQuery, Prototype.js, Scriptaculous.js, I decided to have my own script to serve this very basic need.
Here is the different between LightAlert and traditional alert:
I do have some samples on the right side of this blog, take a look on those sample.
Now LightAlert.js is available for download in Google Code.
Remember to drop me some words..
30 comments:
Excellent stuff! Thanks for sharing!
Thanks, collecting feedback, hope can improve this script...
The script is great. Except one problem: It seems that it is not working when used right after a form was submit. This only occurs in Win/IE though. Every other test I have run (on Mac/FF, Mac/Opera, Mac/Safari, Win/FF, Win/Opera) worked well... Do you have any idea what could be the reason? Please see a test script at www.frankmichel.com/test.php
First of all, thanks santacruz for testing the script.
I have tested in many ways but not in your manner, yup I tested at your site, not working for IE.
But I think that's not because of LightAlert error, is the logic error on displaying the alert message you probably can try this place the php script after the form. (i can't type out the full script here, this comment area doesn't allow that..)
[php script]
if (!$_POST["text"]){
//your alert code goes here..
}
What can I say? You're a genius!!!
The problem was that the alert code was WITHIN the form tags. It needs to be outside. Then it works!
I will be using this script for a corporate website and will definitely donate you money for it. You deserve it! Big thanks!!
Oh by the way... is there a way not to provide a height? Just let the div use the height whatever is needed by the content?
Thanks for the support again.
Actually you can display the message by not defining the height, even the width you can leave the defaul value handle it, here is some tips for you:
- alert("Hello World"); //in your case the default icon will be exclaim.gif
- alert({msg:"Hello World", show:1}); //this message won't close until you click on it
- alert({msg:"Hello World", pause:5000}) //this message will show up for 5 seconds..
You can play around with the setup function, you can even customize it to your own way, change the default value and stuff...
Try in various ways, you will know the script better. Happy scripting!
Thanks for your quick reply.
You're right. I can leave the value blank and let the default value handle the height. Unfortunately this is not very useful when the content of the lightalert message comes from a database and i don't know how high the message box must be in order to display its content within the box. Is there any way to let the script create the box and then check its height after the content has been inserted with innerHtml?
Yes you can, I've updated the script, take a look on the Long Message Sample button, check the source. I did not set the height, but the height is adjusted according to the content within the div. Thanks for your constructive comment :)
What I did :
- remove the setting on h (height)
- remove the height assignment in the div
- and detect the height in the div and realign to middle, center.
Me again. Sorry for bugging you :) I have updated the test script on my page. It shows that if content for the box is added dynamically (via a form or from a database) the box is not being positioned correctly. I guess this is a little more complicated since the height of the box is measured before the content is actually being applied to it. Right?
See www.frankmichel.com/test.php
You are right, the height is not defined, therefore the top cannot be calculated accurately. Short sentence is unnoticeable, but when a long sentence applied to it, it became quite obvious.
Guess we have to use work around, set box.style.top to a static number so all will look the same.
Example: box.style.top = 200;
I have tried counting the character in the innerHTML, 42 character will fit well into 300px width div with 15px text... I can do the formula to calculate the actual height needed, but the formula will be heavy... As you need to consider the changes in the width and the font-size...
I might find out a better way, but at the moment set the top to a specific location is a better way to go. The bottom line is to let user to see the text within the box, layout issue I will find ways to solve the problem
Others, who have opinions feel free to drop me some advice...
Good news to you, santacruz. I have made some changes to the script again. I've added a line of code just after I append the div
box.style.top = (this.getBrowserHeight() - this.lightalert.clientHeight) / 2 +"px";
Now LightAlert and detect the height automatically, and you might not need the setup.h anymore..
You may copy the script again, try it and let me know. Thanks
You are the hero! :)
It's absolutely perfect now! I have only added one more thing to it in order to adjust text alignment:
obj.align = pars.align || "left";
and
box.style.textAlign = this.setting.align;
Other than that it is the best script out there for this kind of message display! Thanks for all the great work on it!
By the way, I have tested the script on all of the following platforms and it worked in every single one of them:
Mac/FF2, Mac/Safari3.1, Mac/Opera9.26, Win/IE7, Win/IE6, Win/IE5.5, Win/FF2, Win/Opera9.25
There you have it, you can do customization based on your need...
Thank you for all your testing effort, I really appreciate it..
By the way, do let me know if you are going to use it on your site.. thanks
Good tutorial
Great stuff horiyochi.
is there also a MsgOkCancel Box available?
Not at the moment, that's why is called lightalert :)
but you can always customize to the way you want..
Thanks for the cool script! I found a bug in setup() when passing in arguments of zero. It interprets the zero as false and uses the default instead.
To fix, add
[code]
parmOrDefault: function(parm, def) {
if (typeof(parm) == 'undefined')
return def;
else
return parm;
},
[/code]
and use that function to determine your settings, e.g.
[code]
obj.fade = this.parmOrDefault(pars.fade, 1);
[/code]
Also, I added an option to make the alert not dismissable, called "clickable".
Hi Lonnie,
would you like to share the "clickable" addition with us? I'd appreciate it!
Thanks!
You can pass in {msg:"message...", show:1} to allow the alert box not to destroy. A single click on it will close the message
Hey, great script. I use it as a message/warning system for mods to users. Works fine in firefox, but in IE8 (IE7 emulation mode), the darker background shows on top of the page, with the alert underneath it...
Can you help me?
erm, do not have to chance to test on IE8... I will definitely do. Do come back and check out for the updates.. cheers..
Excellent stuff!
Only one problem; The dark overlay does not "cover" the heavyweight components of IE, like the select component. To avoid this problem I've coded a little workaround that "hide" from the DOM the select tags during the popup display and re-enable them after the popup closure:
//step 1: add a local variable to hold elements hidden from the DOM on IE
//add this line below line 14 and before the call to "this.init(obj);", into the constructor function:
this.hiddenSelects = new Array();
//step 2: add this behaviour in displayOverlay
if( this.isIE() )
{
//hide native components, like SELECT elements; they are heavyweight
var elems = document.body.getElementsByTagName( "SELECT" );
for( idx = 0; idx < elems.length; idx++ )
{
//keep track of hidden elements into an array
var o = elems[idx];
if( o.style.visibility != "hidden" )
{
this.hiddenSelects.push( o );
o.style.visibility = "hidden";
}
}
}
//step 3: add this code to destroy
if( this.isIE() )
{
var elems = this.hiddenSelects;
for( idx = 0; idx < elems.length; idx++ )
{
var o = elems[idx];
o.style.visibility = "visible";
}
this.hiddenSelects = new Array();
}
Hope it helps :)
Best regards
Davide
I've added another little modification:
If you have elements with some "ordering" (zIndex) the tend to "pop-over" the overlay; In order to minimize this possible glitch, I've added 2 lines of code to put the overlay at zIndex=999 and the popup (box) to zIndex=1000 :
in createBox():
box.style.zIndex = 1000;
in displayOverlay():
overlay.style.zIndex = 999;
Best regards
Davide
Thanks Davide!!
Hi dmolin,
I updated with your code, but still its not working in IE8. Is your fix is for IE8 defect or for different issue?
Thanks.
Great script! It has helped our conversion from facebook ads! We now show a message to traffic offering them a discount.
Eg: Online Website Builder
Thank you, Thank you, Thank you!
what about confirm button?
I am also looking for a confirm button
Post a Comment