Mon 16 Jul 2007
Well I gave it a go at the jQuery plugin deal, and well.. I dont think version 0.1 turned out too darn bad. jQuery Impromptu as I’m calling it is a nice little plugin to simulate a nice css/js alert or prompt You may also add forms custom forms and elements to your prompts as well. A few of the options allows you to narrow the allert down to an html element on the page(given it is relative or absolutely positioned) and create as many buttons on your prompt as you wish! A callback function lets you process your forms. Please give it a shot on my examples page and please let me know if you have suggestions or constructive criticism or any other comments.
July 17th, 2007 at 8:34 am
Trent,
I like this. Very easy syntax. Nice work! :o)
You should add this to the plug-ins page. http://jquery.com/plugins
Cheers!
July 17th, 2007 at 8:48 pm
Thanks Chris, I added it to the plugin list, hope its of some use to someone!
July 19th, 2007 at 5:45 pm
Is there a way to make this just like a confirm box and work with just anchor links? something like return($.prompt);
July 20th, 2007 at 7:26 am
Yes and no. Unfortunately not like you are trying to since nothing is returned until a click is fired on one of the buttons, which is a completely separate function making it hard to return t/f back through the main function. The way you would have to do it is:
-onclick automatically return false and fire:
$.prompt(”proceed?”,{
buttons:{Ok:true,Cancel:false},
callback: function(v,m){
if(v) window.location = $(”a.mylink”).attr(”href”);
}
});
Does anyone know of a better way to return like confirm does?
July 30th, 2007 at 3:54 pm
Thanks for sharing your work - it’s excellent! I’m excited to see if you come up with a creative idea for a Confirm feature.
Thanks again!
July 30th, 2007 at 10:56 pm
Its name is a little misleading.. actually it already can do a confirm, prompt, or alert. just add the appropriate buttons…
$.prompt(”Do You Confirm?”,{
buttons:{Ok:true,Cancel:false}
});
July 31st, 2007 at 3:33 am
Nice work!
The plugin does not work when the jQuery $ shortcut is disabled (to avoid conflicts with other libraries like prototype). I replaced all “$” with “jQuery” in your script and everythink worked well.
July 31st, 2007 at 7:11 am
Thanks for the tip Rainer, hadn’t crossed my mind. I will make these changes to the download!
August 2nd, 2007 at 10:50 am
Great Plugin !!
Is it possible to specify the fade speed ?
August 3rd, 2007 at 1:32 pm
Is there a way to assign the “OK” button one function and the “Cancel” button a different function?
August 5th, 2007 at 4:27 pm
weepy- Thanks, as of now there is not a way, however it maybe something I should add in. If so there would be two fade speeds, one for the overlay, and one for the prompt box.
Dave McC- No, just one call back function. The way to tell which one was clicked is by the first parameter of the function. It will contain the value of the button. Keep in mind the key is the button text and the key’s value is the value of the button:
{ Yes:’yesval’, Maybe: ‘maybeval’, Never: ‘neverval’ }
From inside your callback function you could do a condition and call another function.
August 7th, 2007 at 6:48 am
I just released another version with the addition of overlayspeed, and promptspeed to the options. The documentation is also updated with a description of both.
August 7th, 2007 at 1:49 pm
Trent,
I just wanted to say “thanx” again for sharing your excellent work.
I have been playing around trying to figure out if it’s possible to use impromptu in a popup page in IE 7. When I attempt, it fades the popup window (along with the alert) and it offsets the alert to the left side of the screen.
I works great with IE 6.
Please let me know if you have any ideas. Thanks
August 7th, 2007 at 4:17 pm
Are you using the “container” option? That is the only time I noticed a slight difference in IE 6 and 7. Then all work exactly the same tho when the container is not set(”body”).
Also make sure you don’t have any css that could override the js settings for margin and positions(I doubt that is the case but you never know).
If that doesn’t help if you have a screenshot or a link I can look at it I will try to help out more.
August 8th, 2007 at 10:59 am
Great plugin, this is something I’ve been looking for for a while.
Currently you’re placing the popup at 30% of the pages height. Have you considered attempting to vertically center the popup correctly depending on the height of the popup? I’m not sure if this can be done reliably in a cross-browser fashion, but it would be a neat addition to this plugin.
Looking forward to future releases.
August 8th, 2007 at 9:44 pm
Yeah vertically centering the popup was the biggest issue I had cross browser. The other small issue was using a container other than the body. According how the parent element is position different browsers treated it differently. Hopefully I can get a good solution in the next version. Thanks for suggestions and input!
August 22nd, 2007 at 11:09 am
Hello,
I used this excellent plug in on a site I am developing for a client. All works fine in many browsers but not in IE7. In IE7, the input box does not seem to “have focus” and you can’t enter into it. I’ll look into it, but I wondered if you had any thoughts. You should be able to reproduce it by going to http://www.scrapsandtreasures.com with IE7 and, say, Firefox. Click on the Click Here and see the difference.
August 22nd, 2007 at 1:05 pm
Hey Steven,
Great looking site, I figured out the solution to your problem. In the top of your file you need to declare your doctype(I know that sounds crazy but it worked after I downloaded your page and did that).. so replace [html] with:
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml"]
changing the [] respectively of course. Most browsers will assume this doctype, however IE seems to only use the one that is specified. Good Luck!
September 2nd, 2007 at 12:34 pm
Hey Steven,
Great plugin, just want to know if it is possible to make impromptu work like a plugin from jquery called blockui. What I mean if have some selects that is hidden and some that is not on my page. When I use impromptu for a message and click on OK all my selects become visible. With blockui only the one that was originally visible becomes visible the hidden once stay hidden.
Thanks
Richardt
September 2nd, 2007 at 4:29 pm
Concerning blockui, are you talking about using impromptu like:
$(”#myobj”).prompt(’hey’);
I believe your issue with the selects becoming visible may be the ie 6 fix for select box’s showing through the overlay. Is this issue with this browser? If so the only way around it is to use an iframe instead of hiding selects. So after the declaration of “fade” you can do
if(ie6)var fade = ‘<iframe class=”‘+ o.prefix +’fade” id=”‘+ o.prefix +’fade”></iframe>’;
then remove the other ie6 hacks(they have an”//ie6″ comment after the statements). also be fire to change your css for the fade. If you need help let me know and I can send you one like this.
September 3rd, 2007 at 1:31 am
Steven
Thanks for your quick response
I will give it a try
Richardt
September 3rd, 2007 at 2:07 am
Hi Steven
Sorry looks like I need help with the css file.
I am new to javascript and css and i am trying to teach myself how to work with it.
So if you can help me with the change to the css for the fade it would be much appreciated
Richardt
September 3rd, 2007 at 3:05 am
Hi Steven
Ignore previous message
Figured it out
Thanks
Richardt
September 3rd, 2007 at 7:12 pm
Glad to hear you got it. I’m not sure how to go about avoiding this problem in ie6 in future releases. I don’t like the idea of always using an iframe since that is mis-using that element. At the same time I really don’t like hiding select elements either. I pretty much did a coin toss when releasing Impromptu. Any one have any suggestions?
January 16th, 2008 at 11:23 am
$.prompt(”Do You Confirm?”,{
buttons:{Ok:true,Cancel:false}
});
You said in a comment above that this works like a confirm box. That’s not true if you don’t put the function inside the html.
This works better:
$(’.confirm-delete’).click(function(){
var link = $(this);
$.prompt(’tekst’, {
callback: function(v,m){
if(v) window.location = link.attr(”href”);
},
buttons: { Ok: true, Cancel: false }
});
return false;
});
January 16th, 2008 at 1:29 pm
You’re right, if you don’t include the callback function it will do nothing after clicking a button(except close the prompt)
February 20th, 2008 at 9:05 am
Another problem. If you try to use an impromptu box on a submit button of a form with method ‘POST’, then you have a problem…
Redirect through the url in the action is no problem, but you can’t pass the POST values like a normal form submit.