Impromptu 3.1 is Here

40 Responses

1. 1

   Mike

   07|Apr|2010

   Hi Trent, I really appreciate the work that you’ve put into Impromptu. I am having a slight issue however. The page on which I launch the popup is wider than the screen (there are scroll bars). if I’m scrolled over to the right and launch the pop up, only the left part of the screen is grayed out, and the modal pop-up is in the center of that section, not the center of the screen. I hope that makes sense. How can I fix this?

2. 2

   Mike

   07|Apr|2010

   Note: Works fine in Firefox, but not in IE7

3. 3

   trent

   07|Apr|2010

   Hey Mike. You might try positioning the prompt center of the window. You should be able to get the window width by $(window).width(); The position is set in the source as positionPrompt function on the $jqi.css();. left is currently sets to 100%

4. 4

   Xtrex

   12|Apr|2010

   I love this extension, you re fantastic!

   I am trying to use a form inside impromptu that use the state function next. How can I do it? Its only possible to use the default buttons bar?

5. 5

   Xtrex

   12|Apr|2010

   I need that a button inside my form do the same that the default button “next”. How can I do it?

   I have this code:

   var formularioRestock = ”

6. 6

   trent

   13|Apr|2010

   Impromptu has built in functions to navigate to different states, use these on your click events:

   jQuery.prompt.goToState(stateName)
   jQuery.prompt.nextState()
   jQuery.prompt.prevState()

7. 7

   f0ul

   03|May|2010

   Hi
   First thanks to Trent that amazing plugin!
   I have a little problem… I never get the focus on my buttons… Any ideas what could be the problem?

8. 8

   trent

   03|May|2010

   do you have any spaces in your button names? If so are you using the title:value object to create the buttons?

   [ {title: 'bla bla', value: true}, {title: 'foo bar', value:false} ]

   or just { title:value }.

   Also be sure you have some css for your default button (the one with focus):
   div.jqi button.jqidefaultbutton{ background-color: #00ff00; }

   and another trick might be to use a :focus pseudo selector in your css;
   div.jqi button:focus{ background-color: #ff0000; }

9. 9

   f0ul

   04|May|2010

   No still don’t work!
   Maybe is it because i call it from a submit button in a form?

   Here’s my button:

   Then the ajaxSubmitVerif will call the imPromptu:
   $.prompt(txtPrompt, { show: ‘slideDown’, buttons: { Ok: true }}) ;

   And now i could not only click on Enter button to close it…

10. 10

    trent

    04|May|2010

    Oh so you can’t click the impromptu button at all to close the prompt? Do you have any js or html errors?

11. 11

    f0ul

    04|May|2010

    Sorry i made a mistake in my last comment, I meant the Enter key on keyboard, not the Enter button.

    I can click the button to close the prompt, but:
    – using my mouse
    – or using the Tab key and the Enter key

    What I want is to set the button active, so I can directly close the prompt after opening only clicking on Enter key…

12. 12

    Colin

    06|May|2010

    Is there a simple way to load a modal box on page load without a user having to click a link or button?

13. 13

    trent

    07|May|2010

    Yes, just call it inside jquery’s load event $(function(){ });

14. 14

    Mehmet

    17|May|2010

    How can i start it automatically when page opened?

15. 15

    Richard

    18|May|2010

    Am using your fabulous extension extensively on my site.

    Problem with timeout?

    In some situations I use the timeout and other situations on the same page I want the dialog to stay up using timeout:0. However, if a dialog has been displayed with a time-out and the dialog is closed BEFORE the time-out and then another dialog opened within the first time-out period, then the dialog gets closed when the first prompts time-out timesout, which in some situations means the dialog flashes up momentarily.

    Richard

16. 16

    trent

    18|May|2010

    Since there is more than one prompt going you may have to use your own timeout and use $.prompt.close(); then kill the timeout, then open the new prompt. I guess Impromptu doesn’t take into consideration there could be a follow up prompt. You may also look to use the ‘classes’ option for each different plugin, and at the end of each timeout check to see if that specific prompt exists. not sure if that makes sense:

    $.prompt(‘hello world’, {classes: ‘p1′});

    //inside your timeout…
    if($(‘.p1′).length > 0);
    $.prompt.close(); //may need to do a remove instead.. close is async.

    $.prompt(‘hello world 2′);

17. 17

    Richard

    19|May|2010

    Hi Trent

    I have modified the code as follows (to solve my specific problem)

    if ($.prompt.defaults.tid != 0) { clearTimeout($.prompt.defaults.tid); $.prompt.defaults.tid = 0; };

    if (options.timeout > 0) { $.prompt.defaults.tid = setTimeout($.prompt.close, options.timeout); }

    and …

    $.prompt.defaults = { tid: 0, …..

    There is probably a better way!
    Thanks again
    Richard

18. 18

    Ben K

    20|May|2010

    Hi Trent,
    I was wondering if you had plans to integrate impromptu with jquery ui styles?
    the jquery ui dialog they are using is pretty crap compared to impromptu

    Also i can’t remember if i mentioned to you about the “scrolled” option i implemented to let the prompt scroll with the page instead of staying fixed.

    Anyhow keep up the great work!

19. 19

    trent

    21|May|2010

    I do remember you mentioning that addition for the scrolled option.. I just haven’t had a chance to get to it, and I appologize. I’ve also had a couple others submit changes dealing with sizing and positioning, but just havent had a chance to put them all together yet.

    As of now I have no plans of integrating it with jQuery UI styles.. I guess it would just be a matter of adding some class names..? Maybe check for an option ‘uistyle’ right before the prompt is shown, if true, add the class names to those elements..

    Which part of UI styles do you have in mind of adding? I myself am not a big fan of any of them, but I do understand they make everything look uniform :) (not to take credit away from jQuery UI.. it is a wonderful library)

20. 20

    Ben K

    23|May|2010

    Yeah it’s just the uniform-ness that i was after (because im using the datepicker and autocomplete in forms)
    also the ability to change all the styles.
    to your credit i showed a prototype of a jquery ui dialog and the comment was “the other one looked much better/slicker” (i happen to agree) so kudos to your styles!

21. 21

    theo

    09|Jun|2010

    hi Trent,
    Here i have a problem when using ‘timeout’,as you said,callback is A function to be called when the prompt is submitted and removed.i think it should also be called when the prompt is removed by setting timeout value

    example:
    $.prompt(‘demo’, { prefix: ‘jqismooth’, buttons: { OK: true }, callback:function(){ self.location.reload();}, timeout: 3000 });

    but it can not reload the page when timeout

    please give some help ,thanks

22. 22

    Peter

    07|Jul|2010

    Hi Trent

    Quick question. Would it be possible to create the button labels dynamically? Let’s say that the button should say good morning or good evening depending on the time of the day?

    eg: morning = buttons: { morning: true }
    afternoon = buttons: { afternoon: true }

    Thanks!

23. 23

    Vitor De Mario

    12|Jul|2010

    Hi Trent,

    I’ve been successfully using impromptu, but I’m getting a weird behavior when I have a js error somewhere. If my callback function issues an error (visible with firebug or firefox console), it gets called again, immediately, issuing that same error and entering a loop.

    When I fix the error and the function completes as expected, there’s no loop and everything works fine, so it isn’t that big a deal. Any ideas on why this is happening?

    Thanks.

24. 24

    Pavel

    20|Jul|2010

    Below is the improvement of your library. This solution helps if library used to run slideshow. It allows to start slideshow from any state.

    source: http://www.trentrichardson.com/Impromptu/scripts/jquery-impromptu.3.1.js
    line 73:

    //insert the states…
    $jqi.find(‘#’+ options.prefix +’states’).html(states);
    // enable one of states
    if (options.startFrom && $jqi.find(‘#’+ options.prefix +’_state_’+options.startFrom).length) { // if start state option is defined and the state exists
    $jqi.find(‘#’+ options.prefix +’_state_’+options.startFrom).css(‘display’,'block’);
    } else { // enable first state by default
    $jqi.find(‘#’+ options.prefix +’states’).children(‘.’+ options.prefix +’_state:first’).css(‘display’,'block’);
    }
    $jqi.find(‘.’+ options.prefix +’buttons:empty’).css(‘display’,'none’);

    Now you can use option ‘startFrom’ to open popup with some state visible.

    example:

    var statesdemo = {
    state0: {
    html:’slide 1′
    },
    state1: {
    html:’slide 2′
    },
    state2: {
    html:’slide 3′
    }
    };
    $.prompt(statesdemo, { startFrom: ‘state1′});

    This example will open popup with text ‘slide 2′ (second slide named ‘state1′).
    Sorry if text is not well formated. Open http://copist.ru/wiki/1323/1119 to read the same.
    Thanks a lot for library!

25. 25

    Michael Hjulskov

    06|Sep|2010

    Hi and thanks for this great solution. Keep improving thanks.

    My suggestion is to add a setting

    hideflash: true, /* true/false – jides all flash elements at popup moment, and show them again on close */

    I can suggest using this (copied from prettePhoto)

    on opening
    if(settings.hideflash) $(‘object,embed’).css(‘visibility’,'hidden’); // Hide the flash

    on closing
    if(settings.hideflash) $(‘object,embed’).css(‘visibility’,'visible’); // Show the flash

    I would really appressiate if you will tell me where to put these things in the file? please mail it to me, thanks :o)

26. 26

    pclion

    02|Nov|2010

    how to use impromptu in frameset page?
    i writen impromptu code in topframe, but i hope it display in mainframe, how i to do it?

27. 27

    Tim

    05|Nov|2010

    Is there a way to have an input box have focus instead of a button by default? I’d really like to use this for a little mobile webapp but I’d prefer if when the user clicks (taps) to activate impromptu, the input box has focus so their keyboard appears, rather than having the user have to click/tap on the input before they can start typing.

28. 28

    trent

    08|Nov|2010

    Tim,

    Yes you should be able to do that.. something similar to this:

    var p = $.prompt(‘…’);
    p.find(‘#my_input’).focus();

29. 29

    Isaac Cen

    14|Nov|2010

    Hi Trent, I really appreciate Impromptu.Now I am using it to prompt a simple message box,I noticed that almost every message box it poped up must include a button,if I don’t want to show any button,just make it a message panel without any interaction,could you tell me what can I do?

30. 30

    Isaac Cen

    14|Nov|2010

    I am sorry for my former question,just make the bottons as a empty array…and,may I remove the ‘X’ button on the right-up corner?

31. 31

    Tim D

    22|Nov|2010

    Hi Trent. Impromptu is fantastic, thanks for making it. Just a question. One of my Impromptu boxes is fairly long and sometimes extends beyond the bottom of the browser window, when this occurs there is no vertical scroll bat to scroll down and access the buttons. How do I get the browser vertical scroll bar to appear for long messages?

32. 32

    Raul

    22|Jan|2011

    Hi, Trent,

    I’m using it extensively, with and without states, embedding forms… It’s Fantastic!!

    But I would like to know if there are any way to “catch” the “Close” and “Open” Actions (or events), or declare “open” and “close” functions (as submit or callback options).

    I need to assure Applets/Flash are hiding and showing correctly, and I tried to strategically locate jQuery(“#applet”).hide() and .show() in to js code, but the “x” close button makes all efforts good-for-nothing.

    I’ll appreciate any hint,

    Best Regards,

33. 33

    Eugene

    02|Feb|2011

    Hi, Trent.

    Thank you very much for Promptu, but can I ask you some about it?
    Can I use event-handlers in text-definition of prompt-content?
    I have the

    var txt = ‘Щоб визначити своє положення на мапі, можно скористатися двома способами: вкажіть свою адресу ‘+
    ”+
    ‘або, можливо, вам відомі ваші координати з GPS-пристрою – телефона чи навігатора?’+
    ‘Широта  Довгота ‘ ;

    There is ukrainian text, it doesn’t matter – there I have two radio and pair of disabled texts. I’d like to click on radio these texts getting up enabled. To do it, I write

    ‘

    but seems to be, it doesn’t work. So, Can I use event-handlers in text-definition of prompt-content?

34. 34

    Eugene

    02|Feb|2011

    Hi, Trent.

    Thank you very much for Promptu, but can I ask you some about it?
    Can I use event-handlers in text-definition of prompt-content?
    I have the

    var txt = ‘Щоб визначити своє положення на мапі, можно скористатися двома способами:&ltbr /&gt &ltinput type=”radio” id=”radio1″ name=”radioSelector” checked=”true”&gtвкажіть свою адресу ‘+
    ‘&ltinput type=”text” size=”55″ id=”userGeocodedAddress” name=”userGeocodedAddress”&gt&ltbr/&gt&lthr&gt’+
    ‘&ltinput type=”radio” id=”radio2″ name=”radioSelector” onclick=”document.getElementById(“userB”).disabled=false;”&gtабо, можливо, вам відомі ваші координати з GPS-пристрою – телефона чи навігатора?’+
    ‘&ltbr/&gtШирота  &ltinput type=”text” id=”userB” size=”20″ name=”userB” disabled=”true”&gt&ltbr&gtДовгота &ltinput type=”text” id=”userL” size=”20″ name=”userL” disabled=”true”&gt &ltbr/&gt’ ;

    There is ukrainian text, it doesn’t matter – there I have two radio and pair of disabled texts. I’d like to click on radio these texts getting up enabled. To do it, I write

    ‘&ltinput type=”radio” id=”radio2″ name=”radioSelector” onclick=”document.getElementById(“userB”).disabled=false;”&gt

    but seems to be, it doesn’t work. So, Can I use event-handlers in text-definition of prompt-content?

    (First message has HTML-code)

35. 35

    trent

    02|Feb|2011

    Hey Eugene,

    I would recommend binding the events with jQuery, and they should work fine:

    $.prompt(…you stuff here…);
    $(‘#userB’).click(function(){
    // $(‘#userL’).attr(‘disabled’,'disabled’);
    // $(‘#userL’).removeAttr(‘disabled’);
    });

36. 36

    Dobiatowski!

    04|Feb|2011

    Hello, I’m using Impromptu for a while and it’s great!
    But there is one drawback – you can’t submit input inside prompt using just enter key.
    So I did my extension, which additionally fix some things.

    What you find in extension:

    - Support for enter key event inside prompt, you can use as many forms as you want, it returns the name of submitted form.

    - When zoom in IE8 is set, all animations of prompt slow down dramatically. My patch detect zoom and turn off animations, so user don’t need to wait for prompt open.

    - Prompt reopen problem – fix prevents situations when you could open several the same prompts, one overlapping other. If there is already prompt with the same ID, it close it and open new one.

    Go and check it: http://dobiatowski.blogspot.com/p/impromptu-extension.html

    Trent, if you find my solution useful, don’t hesitate to implement it in next version of Impromptu.

37. 37

    Glenn

    14|Feb|2011

    Hi Trent,

    This is a great plugin and very easy to use compared to others I’ve seen.

    I made one enhancement that’s useful and very simple, which you might consider adding. When calling the submit function, I needed to pass an additional parameter to it. So I created a new option called custom_data, initialized to an empty string, and changed the function call to this:
    var close = stateobj.submit(clicked,msg,forminputs,options.custom_data);

38. 38

    Marc

    11|Apr|2011

    Anyone else having issues with Impromptu in IE8? It kind of works insofar as the prompt will display, but none of the buttons work.

39. 39

    Marc

    11|Apr|2011

    Hmph. The problem was a missing h2 tag on some text.

40. 40

    Ulianov

    08|May|2011

    Hello, Trent.

    If you want to support easydrag, that the impromptu has become possible to move across the screen, you must change the code

    184: left: “50%”,
    185: marginLeft: (($jqi.outerWidth()/2)*-1)

    to

    left: 50 – Math.round(100 * ($jqi.outerWidth()/2)/$window.width()) + ‘%’