Thanks to Users, Impromptu 1.5 Available

52 Responses

1. 1

   Endijs Lisovskis

   01|Apr|2008

   Thanks! Works great.

2. 2

   Ahmad

   08|Apr|2008

   I’m having positioning problems with your script and was wondering if you could help.

   It pops up centered horizontally but not vertically. In 1.4 it pops up with top: 0; and in 1.5 it pops up within the screen, but not centered, it’s like on the top 1/2 of the screen. Is it possible to modify/adjust this via css?

   Thank you

3. 3

   trent

   08|Apr|2008

   The positioning is done mostly via javascript, and then use CSS for everything else. Is this problem only in one browser or all? Some changes did occur to the css in the last couple versions. Might want to be sure you have the latest.

4. 4

   Ahmad

   08|Apr|2008

   Thanks trent,

   I tried the CSS, and that wasn’t the case… I looked at your js, on line 89, you have a top: 100px, i changed it to 40% and it works like what I wanted :)

5. 5

   trent

   08|Apr|2008

   Excellent, sorry I couldn’t be of more help, but glad you got it to work correctly!

6. 6

   JohnE

   08|Apr|2008

   All of the examples work with form buttons. I would find this helpful to be able to place this on a link as well. We use a link with a graphics icon instead of form buttons for looks. It would be nice to have a “delete” icon but still have a confirm box work.

   Do you have an example of how that might work?

7. 7

   trent

   08|Apr|2008

   Hey John,

   Impromptu does not do that, however it should be very easy to swap buttons for links.. with the plugin just change the html to links(its near the top of prompt function). Then also make sure anywhere that references jQuery(‘button’) or similar is changed accordingly. I’ve not done this though so I’m not sure what else you may run into..

8. 8

   JohnE

   10|Apr|2008

   Thank you for your response. I have moved to buttons, but I have a bit of a different problem now.

   When calling a function, is it possible to have more then one parameter passed to the function? If so how?

   ‘
   onclick=”$.prompt(‘Confirm form deletion.’, {
   callback: deleteSqf,
   buttons: { Delete:”:”, Cancel:’cancel’:'noUrl’ }})”
   >

   Note how I tried to put a second parameter in each with a ‘:’, but I am not sure is this is valid or what the real syntax should be.

9. 9

   JohnE

   10|Apr|2008

   Well…some of that last post got cut off, but you can kinda see from the “Cancel” button idea.

10. 10

    trent

    10|Apr|2008

    Hey JohnE,

    Unfortunately that won’t work. the { Cancel:’cancel’ } is an associative array, there is only a key and a value {key:value} If you need other values you will have to embed them within your html you pass to the prompt in hidden input fields or use some sort of scheme for your button values…

    { Ok: “val1_val2_val3″, Cancel: “val4_val_5″ }

    but then you will have to come up with some way to parse that string.. Hope that helps!

11. 11

    JohnE

    10|Apr|2008

    Yeah!!! I did what you mentioned and it works fine. I combined, then split the parameters.

    On Firefox 2.* the prompt looks great.

    Our company has to have many people stuck on IE 6.0 browser, however. In that browser, the pop-up sometimes appears high on the screen and is half covered by another element on a Liferay page we have here. If I scroll down, I can get the pop-up to appear.

    It might work if I could position pop-up, but I don’t think that is an option to do so.

    In Liferay it looks like it get stuck half under Liferay’s header part.

    Thanks for all the help by the way.

12. 12

    JohnE

    11|Apr|2008

    To try to solve the IE6 issue in Liferay, I have been messing with the z-index property in both the CSS and JavaScript properties. For some reason, even if I set the value to very high, it still shows up half under the Liferay banner and high on the screen. The notes surrounding z-index says that it only works with positioned items, but I’m not sure exactly what is going on. There are no JavaScript errors at this stage.

    http://www.w3schools.com/htmldom/prop_style_zindex.asp

13. 13

    JohnE

    11|Apr|2008

    Apparently this is a common problem. I have not solved it yet here, but these links are telling:

    http://www.last-child.com/conflicting-z-index-in-ie6/

    http://aplus.co.yu/lab/z-pos/index7.php

14. 14

    trent

    11|Apr|2008

    Is it being hidden under a flash element?

15. 15

    JohnE

    11|Apr|2008

    No flash on the page. It is just the Liferay portal header it hang partially under, and only in IE6.

    It does appear high on the screen in IE6, IE7, and Firefox.

    It may be something with its interaction with the Liferay header, but I had not seen that happen before with other items.

    I am still trying to figure it out here, but I am much better with Java then JavaScript/CSS oddities.

16. 16

    trent

    11|Apr|2008

    ie6 is a major pain,so many bugs there’s no telling.. have you tried the useiframe option?

    $.prompt(‘hello world’,{ useiframe: true });

    This option was added for ie6 mainly, so if thats your companies main browser you may want to set that. To set the default to true so you don’t have to declare it every time:

    $.SetImpromptuDefaults({ useiframe: true });

    Hopefully that will help

17. 17

    JohnE

    14|Apr|2008

    Sorry for hogging up this blog, but not sure where else to post. Thank you so much for helping though.

    The fix you mentioned didn’t place the pop-up on top above the Liferay header. I had tried BlockUI, before using this one. I had to hack it a bit to get it to work with my code and the resulting output was very harsh for what I needed to do (dynamically creating the fields). It did, however, not have the high position or behind the frame issues. Maybe there is something different they are doing. I would much prefer to use this widget because its API integrates much better.

    The code I am using currently looks like:

    $.SetImpromptuDefaults({ useiframe: true, show: ‘fadeIn’ });

    onclick=”$.prompt(‘Are you sure you want to delete the saved form?’, {
    callback: deleteSqf,
    prefix: ‘colsJqi’,
    focus: 1,
    buttons: { Delete:’delete’, Cancel:’cancel’ } })”

18. 18

    trent

    14|Apr|2008

    Hey JohnE,

    Thats quite alright, its what this blog is here for. Sounds like you may have some broken html somewhere. Have you tried validating your page just to see if there are any broken tags??

    http://validator.w3.org/

    Also you may want to take your exact impromptu css and create a very simple page just to see that everything lines up correctly. That may atleast indicate whether its within impromptu or you page.

19. 19

    trent

    14|Apr|2008

    Also may want to validate your css just to check for missing semicolons or brackets:

    http://jigsaw.w3.org/css-validator/

20. 20

    Geo

    15|Apr|2008

    Thanks :) This is great script!

21. 21

    JohnE

    15|Apr|2008

    I am using your examples.css without changes. It validated correctly using the link you gave me. I understand this is an edge case maybe.

22. 22

    JP

    18|Apr|2008

    example 13 does not always show the close “X” which seems to oddly float above the dialog box. (firefox2, win-xp)

    also rounded corners do not show in example 12 and do not work if added to example 13 either…..

    onclick=”$.prompt(brown_theme_text,{buttons:{Ok:true,Cancel:false}, prefix:’brownJqi’}).corner();”

    seems to need a way to display a form for like login so it can capture values and send them back to the page..

23. 23

    trent

    19|Apr|2008

    Hey JP,

    Example 13 is just in the design that was submitted. The rounded corners should now be fixed as I forgot to update that example. As with the form it captures the entire prompt when a button is clicked, and passes that jQuery object to the callback functions. Any form fields you need can be accessed from that object passed using the jQuery .children() or .find() functions.. example 9 and 10 are examples of this.

24. 24

    Ketil

    24|Apr|2008

    Thanks for a great package! I am really looking forward to get rid of my old confirm boxes.

    I have on problems which also is a security issue. Either I am doing something wrong or this is a bug. I am passing encoded HTML to msg but in the popup this appears as HTML, not text, making it wide open for XSS. The code I’m using:

    function confirmBox(text,confirmLocation){
    $.prompt(text,{ buttons: { Ja: true, Nei: false }, focus: 1,callback: function(v,m){if(v)window.location=confirmLocation} })
    }

    
    

25. 25

    Ketil

    24|Apr|2008

    That example didn’t work well in your blog either. Here is a link:

    http://test.akkreditering.net/example.txt

26. 26

    trent

    24|Apr|2008

    Hey Ketil,

    Unfortunately it does have to be html, not encoded. Not sure if you’re forced to set the text within the onclick attribute, but you could always assign the click event with javascript if you’re having trouble with quotes:

    $(‘#el’).click(function(){});

27. 27

    Peter

    25|Apr|2008

    I really like Impromptu and was trying to get it to work in a web site I am developing. I have spent the past two days struggling with a problem in IE6. The following two URLs work in Firefox, but the NEW001 works in IE6 and the NEW003 doesn’t. I’ve had to put a try..catch around the “jqi.css” code in jquery.impromptu.js to get even this far in the NEW003 example. Any help would be appreciated.

    207.139.200.49/ormsys/new001.html
    207.139.200.49/ormsys/new003.html

28. 28

    trent

    25|Apr|2008

    IE has issues with Doctypes. I havn’t had many users report issues lately, but some previous versions of Impromptu would act like this without a Doctype. Impromptu works best with an xhtml strict. That may not be what you want to hear at this point becuase it looks like you’re pretty far along, but I would try plugging it in and see if it breaks anything. Hope that helps!

29. 29

    Dario Cortes Martinez

    25|Apr|2008

    Great Work!! Thanks

30. 30

    Store Friendly

    30|Apr|2008

    Thanks for a great package! I am really looking forward to get rid of my old confirm boxes.

31. 31

    Zev Spitz

    05|May|2008

    I really enjoy Impromptu; it serves as an excellent and flexible replacement for the alert boxes.
    3 issues:
    1) Under IE6/7, I can’t seem to set the focus to a particular button. If I pass a function that sets the focus, as the loaded option, the focus is set.
    2) Using the Tab key, I can tab to controls behind the DIV overlay.
    3) If a prompt is opened after another prompt has been opened and not dismissed, the resulting prompt doesn’t respond.
    Thanks again for an excellent plugin.

32. 32

    Kevin

    09|May|2008

    I have found that with version 1.5 in Safari/Windows, I was seeing really weird behavior in a textbox — kind of like Example 10 but more complex — where the text floated above the box.

    Anyway, comment out the final focus in the js or set the focus to some high number like 27, and the problem goes away. Took me a long time to track down, so I hope this comment helps somebody else.

33. 33

    trent

    09|May|2008

    Hey Kevin,

    Ironically enough I just tried my contact form for this site and does the same thing! I never noticed it. Thanks for the tip! I will look in to why its happening as well, sounds like a safari bug to me tho.

34. 34

    Kyrre Nygård

    16|May|2008

    dude this script looks awesome.. so much simpler than ANYTHING else out there. “perfection is reached not when there is nothing left to add, but when there is nothing left to take away”.. oh btw, how about adding this thing to github.com?

35. 35

    Kyrre Nygård

    16|May|2008

    maybe jqmodal is a bit better though

36. 36

    trent

    16|May|2008

    kyrre, thanks for the complement. No way jqmodal is better! ;) I think you have to accept Impromptu for what it is. For an multipurpose modal jqmodal may have an advantage. You can of course create alerts and prompts with jqmodal, but that is what Impromptu is designed for as it handles all of your buttons and creating sort of a validation method for you.

37. 37

    Tchup

    26|May|2008

    Hello,

    Is it possible to close the prompt in programming (without click buttons) ?
    Thanks.

38. 38

    trent

    26|May|2008

    Closing the prompt should be very easy with jQuery. It might work like the following:

    var p = $.prompt(‘hello world’);

    //remove it quickly
    p.remove();

    //remove it prettily with hide
    p.hide(‘slow’,function(){ $(this).remove(); });

39. 39

    Tchup

    27|May|2008

    Merci beaucoup Trent ! ça fonctionne… :)
    Je suis encore débutant avec jQuery.

    Bonne continuation

    (sorry for french)

40. 40

    trent

    27|May|2008

    Merci, j’espÚre que vous apprécierez

    (Hope thats right, I don’t know french.. Im hoping google translate does :)

41. 41

    rob

    29|May|2008

    Hi Trent,
    Nice plugin. however I ran into some memory problems using it. I’m using IE6 If you repeatably call the plugin the memory keeps building up and building up (approx 6mb each time). You have to refresh the page before it is relinquished. This maybe caused by the underlying jQuery. I have experiences similiar problems with jQuery when using its append() and html() methods

    Rob.

42. 42

    trent

    03|Jun|2008

    I def use append(), I will have to do some research on that. Sounds like a jQuery/ie6 bug. I sure will be glad when ie6 fades out, its a real pain!

43. 43

    Nathan

    06|Jun|2008

    Just wanted to say that I think this is a great plugin. Nice and lightweight, and does wht it’s supposed to do very well. It’s also nicely written and easy to modify/extend. My hats off to you!

44. 44

    Oskar

    12|Jun|2008

    Hello Trent,
    let me thank you first for your plugin.

    I wonder if you could suggest me how to make following behaviour with your plugin:

    I want to be able to display html form in inpromptu, then after submitting, send it by mean of ajax to server and then display response in inpromptu. I managed to do it. The only problem is following:

    When somebody is presented with a form there should be 2 buttons: ‘Submit’ and ‘Cancel’. However when the form is submitted and user get confirmation then I would like the two original buttons to be removed and in exchange to display ‘Close’ button.

    Can you suggest how this can be achieved in inpromptu?

    Here is what i have done so far: http://nieruchomoscibulgaria.pl/index3.php

    thank you very much again

45. 45

    trent

    12|Jun|2008

    Hey Oskar,

    Thank you for using Impromptu! I have to say it has made my life a lot easier.

    What you are trying to do is very similar to this example (except you are sending an email where I was updating the database)
    http://trentrichardson.com/Impromptu/demos/demo2.html

    Instead of trying to remove buttons and add them back I would allow the first prompt to close, then pop open another Impromtu box saying successfully sent or error has occured. There are event handlers and such involved with add and removing buttons and I have not found a clean solution for this yet.

    Sorry if this isn’t the exact solution you’re looking for, but doing such would take a good example to show you, I don’t have one on had.

46. 46

    Oskar

    13|Jun|2008

    Hey Trent,
    thanx for the suggestion, however i decided to push my idea and managed to insert working ‘Close’ button :).
    On the site that i am builiding in drupal i am using very extensively two jquery plugins:
    it is impromptu and tabs by Klaus Hartl.
    I experience one strange behaviour (in Opera only) that impromptu is not displayed above tabs.
    Basically the default tab is displaying through impromptu and even through impromptu fullpage background (I do not know how to describe it better, English is my limitation).
    Do you know what is the reason and how that can be corrected?
    I am displaying forms in impromptu and hanging tab is giving really bad feeling :).

    Here is example: http://nieruchomoscibulgaria.pl/offers/list .
    You can click on ‘save search’ link in left column to see the effect (again Opera only, at least in 9.21 on Windows)

    thank you again
    Oskar

47. 47

    trent

    13|Jun|2008

    You’ve probably created the best looking Impromptu I’ve seen so far! nice work. This is a strange problem.. you might want to try getting zIndex of that tab button and then assigning increasing the zIndex by one for Impromptu. zIndex is a strange animal and doesn’t work very often, but it appears to be the problem, whether that fixes it or not..

48. 48

    Oskar

    18|Jun|2008

    yes,the first thing i have done was to set zIndex.The active tab has zIndex of 2, set programatically. It is a pitty that probably there is no tool like Firebug for Opera that I could try on fly to set different properties and see which one works. Anyway thank you for suggestion. I will try somehow to overcome this behaviour, probably by setting some simple test page. thanx for the plugin again

49. 49

    trent

    18|Jun|2008

    The new version of Opera now has developer tools, which in my opinion are atleast as good as firebug:

    http://trentrichardson.com/2008/06/12/opera-95-is-here-woohoo/

50. 50

    HarryDang

    01|Dec|2008

    Hi!
    The escape key is still not working, can you help me?

51. 51

    trent

    01|Dec|2008

    I just noticed the latest version escape key is not working, I will provide a fix asap!

52. 52

    trent

    01|Dec|2008

    If you feel comfortable enough with editing the source you can replace the escapeKeyClosePrompt function with the following:

    var escapeKeyClosePrompt = function(e){
    var key = (window.event) ? event.keyCode : e.keyCode; // MSIE or Firefox?
    if(key == 27) removePrompt();
    };

    I ran tests for this in Firefox 3, Opera, Safari, IE 6 and 7. I will officially post an official version soon