Trent Richardson
I’ve just released a new version of jQueryImpromptu. This version fixes a bug dealing with 4 or more checkboxes in a prompt. Also version 2.8 changes the Escape key event to rely on the “persistent” option. So if you don’t want the prompt to close on Escape you need this option set to true. There should be no real problems with backwards compatibility but please report any issues if they come up. I also had a request for height and width options but I am still pondering how to integrate these nicely. Enjoy!
Related posts:
15 Responses
IdeasMX
22|Dec|2009If you have trouble in safari, use this line for the height:
height: $.browser.safari?document.documentElement.clientHeight : $window.height(),
simo
13|Jan|2010Hi,
I’m using impromptu v 1.5 (yes, I know … ) and when I replaced buttons values by dynamic (as in comment) I get an error : “missing : after property id”
$.prompt(msg, {
callback: getNewName,
buttons: { ‘Rename’: 1, ‘Cancel’: 0 }
//buttons: { lg.rename: 1, lg.cancel: 0 }
});
Any idea to solve that?
Many thanks for your work and eventually for the coming reply ;-)
simo
13|Jan|2010Oh sorry, I’ve just seen this : http://trentrichardson.com/2009/08/25/custom-button-text-with-impromptu/
I’ll try later! thanks
pyhoster
24|Jan|2010> If you have trouble in safari, use this line for the height:
> height: $.browser.safari?document.documentElement.clientHeight : $window.height(),
Opera >=9.50 also has problems with height, so, better to use:
height: $.browser.safari||$.browser.opera?document.documentElement.clientHeight : $window.height(),
trent
24|Jan|2010pyhoster,
Thanks for the fixes. I will be working on an update soon.
liz
03|Feb|2010Hi Trent -
Love Impromptu and you have done a great job documenting it! I was wondering if I could impose and ask a question (more js related than Impromptu) that you would know off the top of your head as to my not having any luck googling anything for this so far….
I want to have a form (which I’m using jquery validator plug in) loaded by Impromptu that I have defined in my html file (not dynamically constructed in my js). I am setting the visibility via jq, calling my validation init fn, then using the $(‘#myForm’).html() for my impromptu html parameter. It displays the form correctly, but none of my validation, any events binded nor field values that I’ve loaded are carried through.
Are there any hints that you can see right off as to what I as a ‘not-expert’ js person isn’t seeing? I know this isn’t specifically Impromptu – Greatly appreciated!
trent
03|Feb|2010Is your code sort of copying the form into impromptu? so there are technically two elements with the same ID? What you might try doing is place the form in an external html file and load it with ajax (I have an impromptu example of doing this: http://trentrichardson.com/Impromptu/demos/demoajax.php ) Otherwise you could try destroying the old form before tying the events to the new one you’re placing in Impromptu.
liz
04|Feb|2010Thanks a million Trent – the external load worked like a charm and makes everything alot cleaner. Talk about callbacks: I used the impromptu loaded callback to do a jq .load of my html form which specified a callback to load my fields and bind the data validation.
Life is good – thank you for your help! Coffee/beer on me!
trent
04|Feb|2010Thanks liz! And glad you got it working!
Gareth
12|Feb|2010I’ve been using Impromptu for a couple of year and one thing that keeps niggling at me is the “prefix” option; because it prefixes the id and all class attributes, it means the CSS for subtly different prompts is pretty much mass duplication.
Any chance an future update could have an additional “idprefix”? That way I can ensure the classes are distinct with the regular prefix option, and change the “idprefix” to switch different types of prompt without having to dupe my CSS
Cheers, G
trent
12|Feb|2010Hey Gareth, prefix is mainly for the css, in case you have more than one layout or theme, its easy to toggle between the two by just changing prefix. As far as id goes there should never be more than one prompt at the time on a page, so not sure how that would harm anything. Could you shed a little more light on your situation?
Gareth
15|Feb|2010Hi Trent. I was using the id attribute as an example – a class would do just as well.
It is the CSS prefix that I’m referring to. Consider I’ve got styles for a prompt that’s intended to replace the typical alert box. I’ve set up styles on the default “jqi” prefix for the fade, borders and background, close gadget, buttons, text and so on. These are of course on classes prefixed by “jqi”.
If I want to create a prompt for something like an image lightbox or feedback form, I’d probably want to differentiate it from an alert but it may share a lot of the existing styles.
To do this currently I’d set a different prefix, say “litebox”, but that would lose any “jqi” prefix-based styles, so I’d have to go through all the common style in the CSS and insert selectors for ‘litebox” alongside “jqi”. Soon the CSS starts to get a cumbersome. E.g.
div.jqi {background:#fff; border:solid #000 2px; width: 400px;}
div.jqibuttons {background-color:#eee; font-weight:bold;}
div.jqi .jqiclose {position:absolute;top:0;right:0}
div.jqi .jqimessage {color:#000; padding:10px 5px;}
…becomes…
div.jqi, div.litebox {background:#fff; border:solid #000 2px; width: 400px;}
div.jqibuttons, div.liteboxbuttons {background-color:#eee; font-weight:bold;}
div.jqi .jqiclose, div.litebox .liteboxclose {position:absolute;top:0;right:0}
div.jqi .jqimessage, div.litebox .liteboxclose {color:#000; padding:10px 5px;}
div.litebox {border:dotted #999 2px;}
div.liteboxbuttons {background-color:#fff;}
div.litebox .liteboxclose {left:0}
Obviously this is a hugely simplified version of real CSS, which quickly gets difficult to manage, especially if you add another style of prompt. However if there was a way to set a unique selector “handle” (class or id) on the top-most container, all my prompts could use the same existing prefix and associated CSS but I could override a select few by adding CSS entries to change only the properties that apply to the new prompt. E.g.
div.jqi {background:#fff; border:solid #000 2px; width: 400px;}
div.jqibuttons {background-color:#eee; font-weight:bold;}
div.jqi .jqiclose {position:absolute;top:0;right:0}
div.jqi .jqimessage {color:#000; padding:10px 5px;}
.litebox div.jqi {border:dotted #999 2px;}
.litebox div.jqibuttons {background-color:#fff;}
.litebox .jqiclose {left:0}
Hope that demonstrates what I was referring to! :)
trent
15|Feb|2010Would a solution possibly be adding an option for classes, and for this you can pass a string or an array of classes to append. This way you can keep the jqi prefixes, and add a class the container (container being the div which holds the fade and the prompt itself). So then if you wanted to change the fade color for classes: ‘jqidark’ just make one line after your default jqi classes instead of a new theme:
.jqiwide .jqi{ width: 600px; }
Is that more like what you’re looking for? I’ve encountered similar problems with needing to adjust the width, so this will help me also.
Gareth
16|Feb|2010Yes! Certainly adding a class the top-most container would be perfect. For me a single class is all that’s required, and I guess we culd just space-separate multiple classes if required.
Irakli
18|Feb|2011hello!
Can you help me with Mootools Impromptu.
How can i set callback function when “X”-clicked?
In “callback” – window is empty
Somthing like this:
close: function (v, m, f) {…}