Trent Richardson
Well now its officially available. Check it out for yourself. No real big new features just some of the ones we talked about before. Now you can optionally declare global settings so you dont have to declare them every time:
$.SetImpromptuDefaults({ opacity:0.9, prefix:’myclass’ });
Don’t worry, there is more to come, I just felt this was an important feature that needed to be added asap. I’m not leaving anyone out!
Related posts:
68 Responses
Marc
08|Sep|2007Great plugin, but I have a bug. See http://athena.sus.mcgill.ca/impromptu_bug.php and make sure that your browser’s (FF2/IE7) window is small enough so that the page can scroll. When you click on “Clear” to clear the contact form, the white background does not cover the entire page.
I think having the height of my HTML and BODY elements set to 100% with CSS is causing the problem.
trent
09|Sep|2007Hey Marc,
I took a look at your code with firebug for firefox. Some reason the html and body element isn’t as tall as your #wrapper element. The default is to fill the body if container option isn’t declared. Not sure why those elements arn’t as tall as the #wrapper? You might try(just to see if this is the issue) setting the container option to #wrapper. Let me know if this doesn’t work and I will see if I can help you out.
Ole Laursen
10|Sep|2007Marc: I had the same problem with HTML and BODY height set to 100%. Removing the 100% height statements fixed the problem.
Trent: The download link in the upper right corner points to the 0.4 release?
Also I have another problem. I use the plugin on a long page where the IE-6-does-not-support-fixed-positioning hack breaks down because the prompt appears in an off-screen portion of the page.
I’ve worked around it by passing in a “source” parameter with the jQuery DOM object that launches the prompt. I then use the dimensions plugin to optionally calculate the vertical offset with
‘o.source.offset().top + “px”;’ right after the options parsing and use this offset to position the prompt. Works like a charm.
It has the side effect of popping up the prompt right next to where you clicked, so it reduces mouse movement.
Great plugin, otherwise!
trent
10|Sep|2007Hey Ole,
Thanks for the help. I will look to make these changes. Only thing is I hate to require another plugin to use this one, so I will look to efficiently make this work. Do you by any chance have a link to an example of this?
Marc
10|Sep|2007@Trent: I tried what you said, but now the problem occurs oddly enough in the horizontal direction instead. I tried to fix this with CSS by applying width:740px; and margin:0 auto; to my HTML and/or BODY elements, but this breaks my page in IE7.
However, I was able to correct the problem in FF2 by applying overflow:auto; to HTML and BODY, but this produces some weird rendering effects while scrolling with IE7.
@Ole Laursen: I cannot remove that statement because it will change the layout.
Any other ideas?
trent
10|Sep|2007Hey Marc,
I’ve got two ideas, first try setting the the container element(#wrapper) to position: relative; I think the fade is the right width and height, just against the left side and not centered inside #wrapper(firebug shows wrapper as getting position: static from somewhere.
If that doesn’t work you might have to try using the dimension plugin as Ole was saying. To set the width and height of the fade. If you need help with this let me know and I’ll be glad to help. Sorry for your troubles.
Marc
10|Sep|2007Hi Trent,
Hey, that did the trick! Thanks!
You have absolutely no reason to apologize; you are kind enough to develop and share this amazing plugin with us, and even kinder to help me with correct my CSS. Thanks again for all of your hard work :)
Marc
12|Sep|2007Hi Trent,
I found another [actual] bug, which is evident even on your examples page. When the prompt appears in FF2/IE7, a height, equal to the height of the prompt, gets added to the bottom of the page.
trent
13|Sep|2007You absolutely right. Thanks for noticing this. I haven’t noticed that before. Might just have to check the height of the prompt, then subtract that from the container’s marginBottom? I will make this change in my next release in a few days(do you need it fixed sooner?)
bryan
13|Sep|2007Maybe I’m having trouble just getting my head around this, but I want try to use this as a simple confirm for someone wanting to delete an entry.
Is impromptu usable for this, and is it so simple that i’m just not seeing it?
Marc
13|Sep|2007@Trent:
There’s no rush :)
@Bryan:
See Trent’s Example 8. Your function my look like this:
function mycallbackfunc(v,m){
if (v) {
….
} else {
….
}
}
Marc
13|Sep|2007Actually Trent, I think I found a fix via CSS by applying position:absolute; to div.jqi. Try it out.
trent
13|Sep|2007Marc: Will that effect the position: fixed for the scrolling? I will definitely give it a shot!
Marc
13|Sep|2007Trent: It’s good in FF/IE7 but fails miserably in IE6.
Marc
13|Sep|2007Actually, in IE6, my first issue occurs.
trent
13|Sep|2007hmm.. thats weird, well I guess back to the drawing board. Might have to change it with the margin unfortunately.
bryan
13|Sep|2007@marc
I tried that but as soon as i click the button that it’s set to act from (ie delete), the delete proceeds before you even get a chance to click ‘ok’ or ‘cancel’
here’s the code I tried:
function mycallbackfunc(v,m){
var answer = v
if (answer)
return true ;
else
return false ;
}
$(“.deleterecord”).click(function(){
$.prompt(‘Are you sure you want to delete this?’,{ callback: mycallbackfunc });
});
trent
14|Sep|2007I notice you only have one button option in your $.prompt(). The default button is Ok(true), so since thats your only button it will always return true. You need two buttons in your case so the user has the option to cancel or proceed:
$(”.deleterecord”).click(function(){
$.prompt(’Are you sure you want to delete this?’,{
buttons:{Ok:true, Cancel:false},
callback: mycallbackfunc });
});
Now your if(answer)..else.. functionality should work
Felix
19|Sep|2007Nice job! Can “msg” be a jQuery object? Like this:
var dialog = $(‘#dialog’);
$.prompt(dialog);
trent
19|Sep|2007Thanks Felix, As of now it can’t be. That is a very interesting approach though, I haven’t thought of that. $(‘#dialog’).html() would work for retrieving the inner html for that element, but not the element itself. I have been thinking on how to make it optional todo this:
$(‘#mycontainer’).prompt(‘hello world’)
where #mycontainer would be used as the container, or still keep the same way of just saying:
$.prompt(‘hello world’,{container:’#mycontainer’});
What do you think?
raptor
24|Sep|2007hi Trent,
I just played abit yesterday with your plugin, very nice thanx ;).
I had one annoying problem which is probably connected with what Marc says at (8).
It happens when you are not using the browser on full screen (as I use it all the time).
When the dialog opens a vertical scroll bar appears on the right and shrinks my whole page, when I close the dialog the vertical scroll bar disappears again. Visually is very annoying ;).
FF2/Linux
If you have idea how to solve this and want me to test something!
About the idea of using jquery id as ‘txt’ parameter I have even better one allow the use of URL, so it get the dialog with ajax query.
PS> I had another small problem which probably not related with your plugin but anyway, here is it, if I have :
…
it doesn’t display anything in the dialog except the OK button. When I rearrange it like this :
…
it works.
raptor
24|Sep|2007oops,
i mean this (think html tags, seem html tags are not displayed):
open-table,open-form
…
close-form , close-table
it doesn’t display anything in the dialog except the OK button. When I rearrange it like this :
open-form, open-table
…
close-table, close-form
it works.
trent
24|Sep|2007Hey Raptor,
I guess those examples are still getting chopped off.. the other problem you have with the scroll bars was due to the height of the prompt being added to the container element. The “hack” for now is to get the height of the prompt and subtract that from the height of the container. I havn’t done this but that is what we discussed before.
Unfortunately I wont have time tonight to try this out, but tomorrow I should. Also your other problem.. if you want to email me my email is [firstname]d[lastname] at gmail dot com
Jyrki
27|Sep|2007Hello!
Thanks for a great jQuery plugin!
I’m trying to use this for a confirmation. The link looks like … onclick=”if (confirm(‘Do you really want to delete /testi/testi1?’)) { var f = document.createElement(‘form’); document.body.appendChild(f); f.method = ‘POST’; f.action = this.href; f.submit(); };return false;” …
My problem is how to make a confirm() replacement. I’ve tried the following:
function confirm(msg) {
$.prompt(msg, {buttons:{Cancel:false, Ok:true}, callback:check_confirmation}).corner();
}
function check_confirmation(v, m) {
if(v) {
return true;
} else {
return false;
}
}
Thanks for your answers!
-jyrki
trent
27|Sep|2007Hi Jyrki,
one thing that may be a little missleading is that this plugin can’t stall all javascript from processing until you answer its request. So just returning true or false will not send the onclick event… you will have to do something like this:
..onclick=”$.prompt(…);return false;”
now we always stop that onclick from returning true. Then in the callback function you will have to manually submit your form:
function check_confirmation(v,m{
if(v){
$(‘#myform’).submit();
}
else{
//do nothing
}
}
Does that help? Let me know if you need more help.
Rabbit
01|Oct|2007Hi Trent — awesome plugin. I have, however an issue in IE7 whereby I have to click a Cancel button twice in order to hide the prompt.
I’ve noticed the opacity is twice what it’s set at, so my guess is it’s being thrown up twice. My invocation looks like:
jQuery(‘#create_new_part_size’).click(function() {
jQuery.prompt(jQuery(‘#part_size_form’).html(), { buttons: { ‘Cancel’: false } });
return false;
});
But it still does it. Any ideas?
Roger
02|Oct|2007Hi Trent. Great work with Impromptu! I’ve been playing with it for a few days now and have decided to start using it for some basic information dialog windows. I’ve started with a simple login window and it all works well with the exception of getting the account name input box to take the focus so input can begin without further mouse involvement. So far I have this: -
$.prompt($(‘#login-dialog’).html(), { callback: processLogin, buttons: { Login: true, Cancel: false }}).focus();
This causes the main window to become focused so a single press of tab moves the focus to the input box I want it to be in. Without the focus() call, there was many tabs to be pressed. However, I’m having trouble selecting specific elements within the created impromptu window to focus further on that. Any pointers on how I might best achieve this using impromptu?
Thanks!!!
trent
03|Oct|2007-Rabbit, It definitely sounds like you’re looping somewhere and creating two prompts like you said. Just for process of elimination have you tried temporarily commenting out the .prompt and use an alert instead just to see if the problem is within $.prompt? If it is within $.prompt I would try a very basic one with minimal functionality:
$.prompt(‘testing’);
I would start there. If that doesn’t work and you could supply a short sample of your code that would help on this end.
trent
03|Oct|2007-Roger, If I understand you correctly you want to focus on a certain input box within the $.prompt? have you tried something like this:
$.prompt(….).find(‘#myInput’).focus()
You could also assign $.prompt jQuery object to a variable and then access it whenever you need to while the prompt is open..
var myPrompt = $.prompt(…);
myPrompt.find(‘#myInput’).focus();
Does this help?
Roger
03|Oct|2007-Trent: $.prompt(….).find(’#myInput’).focus() works well. The input gets the focus so I can just start typing away.
Functionally it’s exactly what I was after so thanks!! There is something that’s not quite right as although the input box has the focus and keyboard strokes are applied to it, the cursor isn’t visible.
If I alt-tab away and come back the cursor works fine. Not sure if this is an impromptu thing or a browser issue though – and not really a big deal anyway. Just thought I’d mention it in case it’s impromptu related.
Thanks again!!
trent
04|Oct|2007I updated documentation a bit and added some new examples! Example 12 is a nice little change, only css and one little image for the buttons!
test
12|Oct|2007How can I fix the bug mentioned in (8) ?
What do I have to change ? thanx
trent
12|Oct|2007Here is the solution I came up with..
Paste this line:
b.height(b.height()- (jqi.height() + (jqi.css(“paddingTop”).split(“px”)[0]*1) + (jqi.css(“paddingBottom”).split(“px”)[0]*1)) );
just after this line:
var jqif = b.prepend(fade).children(‘#’+ o.prefix +’fade’);
This worked for me in ie, safari, ff, and opera
Jesse
16|Oct|2007I have been testing this plugin with the latest version of JQuery 1.2.1 and Impromptu 1.0 and I’m having an issue with IE7 only.. IE6/FF2.0.* works great.
The issue is that the message box appears at the top left and it falls behind the opacity of the fade effect. I’m not sure what the problem is but i think this is a [bug].
I’ve added the css you’ve provided in your example and a simple $.prompt(‘test’); can anyone provide some insight here. Thanks.
Jesse
16|Oct|2007I found the answer to the pervious post. As foolish as this may sound but you need to let IE7 which DOCTYPE you are using. so fixed my problem. I hope this helps anyone with the same problem.
trent
16|Oct|2007Glad you were able to find the solution. Thanks for posting it as well so maybe It will help others! I have had trouble with forgetting the doctype before and ie7 act weird.
Jesse
25|Oct|2007I’m having another issue with impromptu, it seems that there is a problem related to IE6, and that it doesn’t keep the prompt message centered on the page when you scroll the page. Anyone else having this problem?
trent
25|Oct|2007I see your problem. Since I rely so much on css and ie6 doesn’t support position: fixed; I made it position: absolute; and disabled scrolling. Sorry about this. Do you know of an easy “hack” with jquery to enable position: fixed; for ie6? I am researching this and will come up with a built in solution asap, for now you might want to look at this:
http://bassistance.de/2006/11/02/position-fixed-for-ie-7/
Jesse
25|Oct|2007I’m seeing another problem with IE6, and this is a strange one. When the window is visible and your window has a
Jesse
25|Oct|2007I’m seeing another problem with IE6, and this is a strange one. When the window is visible and your window has a select element in there. (notice last post picked up my html and left my post in half) I’m looking into fixing this.
Jesse
25|Oct|2007This was easier then it seemed. Here is the problem. The line that says…
if(ie6) b.css({overflow: “hidden”}).find(“select”).css({ visibility: “hidden” });
comment out:
.find(“select”).css({ visibility: “hidden” })
This should do it! I hope this helps anyone with the same problem.
trent
25|Oct|2007Awesome! Only thing is by taking that out is if there are any selects under the prompt box it will show through in ie6. This may be something to look at as well:
http://dean.edwards.name/IE7/
I’ve basically got two bugs that I’m working on. Neither really keep it from working but are annoying:
-when showing prompt the height of the prompt gets added to the container
-position: fixed; in ie6
I hope to get these two fixed for the next release. I hope to achieve this without requiring any extra plugins so it will be completely backwards compatible.
Moe
26|Oct|2007Hi Trent,
Awesome plugin.
I have a problem setting the buttonnames dynamically with the inputparameters.
this.confirmdialog = function (Msg, yesButton, noButton){
$.prompt(sendOrder,{submit: Msg, buttons: { yesButton : true, noButton: false } });
}
I’ve tried yesButton.toString() and yesButton.valueOf() but it doesn’t work.
Do you have any idea how to solve this?
I appreciate your help.
Thanx
trent
26|Oct|2007Hey Moe,
I think the problem is coming in where you use a variable for the button name. Javascript can’t tell the difference between the name and the variable. However, we can achieve the same thing by treating it like an array.
this.confirmdialog = function (Msg, yesButton, noButton){
var btns = {};
btns[yesButton] = true;
btns[noButton] = false;
$.prompt(sendOrder,
{submit: Msg, buttons: btns }
);
}
Hope that helps!
Jesse
26|Oct|2007QUOTE:
-when showing prompt the height of the prompt gets added to the container
I had this problem till i added position:absolute to the div.jqi class.
This issue i believe was already addressed in the previous posts. Is there any obvious problems related to doing this?
Moe
26|Oct|2007Thanx Trent for the quick response.
It works gr8.
=)
trent
26|Oct|2007Jesse, excellent catch! that works great for me as well. Beats the heck out of writing a complicated js fix I think. Now just an ie6 fix for the lack of position: fixed; !
Jesse
08|Nov|2007Well, It has been bugging me since i last posted about it, for the IE6 bug. Well i played around with css and that page you sent me trent. I have the fix for IE6 and its all in css. just add this to your css and it should work great.
@media screen
{
div.jqi
{
position: fixed;
}
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 100%;
font-size: 100%;
}
* html div.jqi
{
position: absolute;
}
}
One thing is that you can’t scroll the page like other browsers, but it does allow the message to apear in the correct place! So for those of you looking here it is! Enjoy!
Jesse
08|Nov|2007After a little more playing i was able to actually strip a lot of that out… it turns out all you really need to add to your css are these two lines.
* html{overflow-y: hidden;}
* html body{overflow-y: auto; height: 100%;}
trent
08|Nov|2007Excellent! Thanks for the fix. Sorry I havn’t gotten this worked out sooner.
Chinchih
09|Nov|2007This is a great plugin. However, I observed several problems trying it in a web application which uses applets and embedded object (ActiveX plugins).
(1) In Firefox 2.x, the main page does not fade smoothly — the applets “flashes” several times before the “prompt box” is displayed, giving the page kind of “jittering.”
(2) In IE6 and IE7, the prompt box gets “masked” by the embedded object (see a partial screen shot at http://mywebpages.comcast.net/cclu/tmp/improptu-screenshot.png), making the buttons inaccessible.
Could you please provide some tips on how to fix these problems (with css hacks, perhaps)?
Thanks,
Chinchih
trent
09|Nov|2007Hey Chinchih,
I’m thinking the ie problem can be fixed by using an iframe as the overlay instead of the div. I don’t like this solution at all but that’s the only way I know to hide that embedded object. I might do a condition to check for any objects in my next version and use the iframe if there are any.. such fix might look like this:
if($(‘object, applet’).length > 0)
fade = ‘<iframe src=”" class=”‘+ o.prefix +’fade” id=”‘+ o.prefix +’fade”></iframe>’;
place this in the Impromptu file just under the “var fade = ….” line. Then tweak your css to div.jqifade, iframe.jqifade{…}
This might fix the issue as well with the applet, but I’m pretty sure it will fix the object. I don’t have access to a flash object or an applet at this time, but I will test this over the weekend.
benneb
09|Nov|2007hi everybody
i would like to put javascript, it works with firefox, but not with IE, no javascript works with IE :( , my test code :
var html = “alert(‘test’);”;
$.prompt(html,
{
submit: submitfunc,
buttons: { Cancel:false, OK:true }
}
).corner();
thx for help
Chinchih
09|Nov|2007The iframe trick in #52 worked! Thank you so much!!
Chinchih
Chinchih
09|Nov|2007I just wanted to note that the trick in #52 causes problems in Firefox 2.x. This can be avoided by adding a browser check:
if(jQuery.browser.msie && $(‘object, applet’).length > 0)
trent
09|Nov|2007Chinchih, Thats great! Glad it worked! This will be something I include in the next release!
Benneb, Are you wanting to execute the javascript within the prompt message? If so I would recommend not putting the javascript within the text itself unless it is an element’s event(onClick, onKeyUp, etc..) to run javascript when it prompts simply place it after the $.prompt() like so:
$.prompt(‘my message’);
alert(‘hello world’);
Since the loading of the prompt is not asyncronous it will work the same.
That being said I think I will add another function to the options for onLoad or loadComplete for times like this just so everything is more consistant.
benneb
09|Nov|2007thx for your help
yes i want to execute js in prompt message, for exemple in my prompt message, i have a jquery jcalendar plugin ^^ and jquery tabbed plugin ^^ , but it works only with firefox :/
if 1 javascript success with IE ( like an alert ) , my problem will be finish.
have you ever sucess to execute one js in prompt message ?
sorry for my english, i am french :P
trent
11|Nov|2007I see your problem now, I havn’t ever tried this. I am currently developing version 1.1. In there I will have an “load complete” function as an option to execute javascript. It should be ready today, and I will try a few examples of your issue and maybe I can help you out.
Bar Code Activex For Access
06|Feb|2008Postal code Bar
A ZIP Code is the postal code used by the United States Postal Service, zip code maps free which always writes it with capital letters.
bootZ
13|Jan|2009Very nice tool!! But also wanted the ability to show images on the button, so here are the changes I have done to allow this:
jQuery.each(o.buttons,function(k,v){ var itm={};itm=(v+’:'+k).split(‘:’);msgbox += ”+ itm[1] +”});
… and
//Events
jQuery(‘#’+ o.prefix +’buttons’).children(‘button’).click(function(){
var msg = jqi.children(‘.’+ o.prefix +’container’).children(‘.’+ o.prefix +’message’);
var clicked = ((o.buttons[this.name.substr((o.prefix+'button').length)]+’:').split(‘:’))[0];
if(o.submit(clicked,msg))
removePrompt(true,clicked,msg);
});
So you pass the contents in the sae field as the value seperated by the ‘:’ – of course goes without saying that you may need to substitute ‘:’ to another character to be parsed on if using the ‘:’ within your image/html code. Here is my example:
buttons:{Y:”true: Yes”, N:”false: No”},
and I get the correct result back in the callback.
Hope this helps.
bootZ
13|Jan|2009Looks like the comment box has removed the image tags, so this is what you need to define each button entry as:
{Confirm:’true: img src= Confirm’,
Cancel:’false: img src= Cancel’},
I have remove html formatting
bootZ
13|Jan|2009Same has happened with the button definition, will try posting it again:
jQuery.each(o.buttons,function(k,v){ var itm={};itm=(v+’:'+k).split(‘:’);msgbox += ‘ button name=”‘+ o.prefix +’button’+ k +’” id=”‘+ o.prefix +’button’+ k +’” value=”‘+ itm[0] +’” ‘+ itm[1] +’ button ‘});
removed html tags around the ‘button’
jennifer
16|Jan|2009Jquery Impromptu is Amazing,, To the fullest..
However, i have a few problems in integrating this with forms or sumbits..
Hope i can find great ideas in this blog..
Ved
19|Jan|2009Hey Trent,
I have discovered a bug, that Impromptu doesn’t work well with thickbox in IE. When you use it with thickbox the prompt come behind the thickbox, where it should come infront of thickbox screen.
trent
19|Jan|2009I can see this being an issue that may vary from browser to browser. I wouldn’t recommend using these two at the same time as more than one modal both trying to do the same thing(cover up everything else)will cause issues. You can try changing the zIndex option for your case to place it on top.
nicky
10|Dec|2009Found a bug with multiple checkbox when 3 or more checkbox checked in Firefox 3 and IE.
when a, b, c, d is checked the array is supposed to look like [ a, b, c, d] instead its coming out as [[[ a, b ],c ], d]
did a fix for it too on line 84
Original :
} else if (typeof forminputs[obj.name] == Array) {
modified :
} else if (typeof forminputs[obj.name] == Array || typeof forminputs[obj.name] == ‘object’)
everything else is AWESOME !!!! =)
hope this helps.
wad
19|Oct|2011how do i get the buttons to be at the top instead?
editing default.css does not work
trent
19|Oct|2011Another way is around line 64 in the latest source on Github, just move the jqimessage div after the jqibuttons.
Or in the css you can make the buttons div position absolute to the state div, and set martin top on the message high enough to allow the buttons to show above it.