If you’re using an earlier version of Impromptu you should look at downloading this new version(it should be backwards compatible unless you’ve made changes). Previously Impromptu worked great in all browsers except IE6. Why IE6? Because of its lack of support for position: fixed; After beating my head on my desk for hours it finally come together.
Previously in IE6 it would fade out the screen but the prompt would stay put, sometimes causing it to be scrolled out of view. Now that is all fixed. Be sure to check the css on the project page. A previous IE css hack has been removed and Impromptu takes care of all cross-browser issues just like it should :)
Download Impromptu 1.2
62 Responses
Miguel
Nov 26, 2007Hello,
Is it possible to simulate the following:
1. Make the message opacity by 80%
2. Do not make the rest of the page to seem faded?
3. Fade out the message after 3 seconds or when the user moves the mouse or presses a key, instead of having a button in the message.
I think this would be great options to have on Impromptu.
Is this possible or will be possible soon?
Thanks
Miguel
trent
Nov 26, 2007Hey Miguel:
Some of this is already possible:
1. you can easily do this with your css theme
2. set the opacity option to 1 or .99
(see example 3: http://trentrichardson.com/Impromptu/)
3. I don’t forsee this feature being added soon. It can easily be accomplished however by not supplying an empty buttons options {}, and in the loaded function option creating a keyUp event listener, removing the prompt then.
Hope that helps!
Trent
klemen
Nov 26, 2007Hi!
First of all – realy great plugin ;)
I found out that whenever
$.prompt() is called from JS, every flash (swf) file is reloaded.
Someone knows how to fix this?
I am using Firefox browser.
Thanks in advance!
klemen
Nov 26, 2007I would also say that it would be great if I could open two prompts – one after another (like I can with alert function in JS).
function bug(){
$.prompt(“prompt1″);
$.prompt(“prompt2″); //causes problems
}
function noBug(){
alert(“prompt1″);
alert(“prompt2″);
}
trent
Nov 27, 2007Hey Klemen,
Your first problem with the flash I’m not too sure about, I will have to look further into this.
Your second problem doesn’t work because there’s no way to pause all running scripts like the traditional alert() does, so for it to work you need to use the callback option:
$.prompt(‘hello’,{
callback: function(){ $.prompt(‘hello again’); }
});
Hope that helps!
Harry
Nov 27, 2007Love the plugin, but it is not working in IE 6 or 7. The modal window does not appear properly placed, or enabled. Works great in FireFox. Any ideas? (The Sales Manager link at the bottom of the page activates the LogIn Impromptu window) Any insight would be greatly apprciated.
trent
Nov 28, 2007Hey Harry,
A few times before users had a problem with not having strict xhtml doctypes. Not sure if this would cure your problem or not, but it worked for other fade problems. (it could screw up your html though. Also try changing the css for the fade and prompt to just position: absolute (remove !important), that may be preventing js from changing it. Hope this helps!
Harry
Nov 28, 2007Thanks Trent!
With out the !important on the “div.jpi”, IE wigs out. It would not position the message box.
Also, the fade area only does a portion of the screen in IE,if I scroll down, it’s un-faded.
I have not tried the strict XHTML, and and a bit hesitant to do so.
Thanks-
trent
Dec 03, 2007Not sure why it would be doing that. Those are the only two problems I’ve had in the past causing such. I will try out some examples and see if I can duplicate this.
Dan
Dec 03, 2007Trent, you rock!
Also, thanks Harry. I had the same problem but “!important” after the position worked!
Dan
nev
Dec 07, 2007Not sure if this is the right place to post this, but I wondered if this really nice effect could contain scrollable text? In my web app I have several “information” links in a page: at the moment the user clicks any of these and is given a blank browser window with the relevant information – which contains quite a lot of text. But really I ‘d prefer the user not to leave the page. So I wondered if a jquery effect like this one could allow the user to view the text in a ‘back-faded’ central window – which allows scrolling, then an ‘OK’ button. Sorry if I’ve got the wrong place, but any pointers would be useful. Thank you.
trent
Dec 07, 2007hey Nev,
I see no reason why that wouldn’t work. In your CSS you would need to set your overflow to auto and a set height and width(so it will scroll if the contents is larger than the container).
nev
Dec 08, 2007Hey that works a treat! Really nice effect!
All I have to do now is work out why the fade only gets to half way down the page (css…) and why it doesn’t appear at all in IE6/Win! :(
But the scrolling text looks great! Nice coding!
trent
Dec 10, 2007Hey Nev,
The two most common problems I’ve seen from this is no doctype, or somehow the body tag gets a position: static. Also keep in mind that if its ie6 it may use an iframe to cover up select boxes. Do you have an example code?
Chris
Dec 13, 2007Trent this is fantastic plugin..!!
However I too get issues only in IE6 with the alert box appearing in the top left corner and the ok button diabled.
Also, on pressing enter, the box just reappers and the background remains faded even after i press the ok button. Any idea on how to fix that?
trent
Dec 13, 2007Do you have a link? I haven’t had any problems like this one yet. Maybe I can take a look and look narrow it down?
Chris
Dec 13, 2007Hi Trent,
For the second part of my question, you can try out with the examples, on the demo page itself. I guess its just an issue on how to handle the “enter” key as opposed to the button click. Once the prompt box opens, and you press enter key, you would expect the prompt to go (like the default alert box). Instead it is overlaid by another box, and the background fades progressively. Now if you press the ok button, the prompt goes, but the background remains faded and the ui blocked.
I dont want to be a nitpicker, though, but this small issue is just a minor irritant, as far as users’ accessibility is concerned :-) . But on a whole, this plugin works really well.
trent
Dec 13, 2007Ok, I see! Truthfully I should have changed the code to work with a form, that way if enter is hit it will submit the form and catch the onsubmit with js, like it is now I just have buttons with click events. For this version you might have to do a listener for keydown on the prompt, then if its the enter key trigger click on the Ok button(or whatever you named it).
Next version I am improving accessibility by adding a close function and try to use a form this time!
Anna
Dec 15, 2007Just stumbled upon your plugin and it looks great – just what i was looking for.
However, I am also having trouble using this with a form onsubmit validation alert. It works on all browsers expect IE6. It gets positioned incorrectly and the buttons also dont work. Any ideas ?
stewart
Dec 16, 2007First. Thanks for your great work!
BTW, I am using IE7 but the pop-up window always show at the left-top corner. why?
trent
Dec 16, 2007A couple people have mentioned this lately. I’ve not had such a problem but just to check if its the latest version can you try a previous version?
http://www.trentrichardson.com/Impromptu/scripts/jquery-impromptu.1.0.js
If so I will try to rework my changes. Not sure where else to start. Doctype has solved many problems in the past but this sounds more like css getting overridden.. Do you have a link I can view?
Richard
Dec 22, 2007just a quick question, im kind of new to reading some of this javascript, but ive created a style sheet switcher, and was wondering how would you you the impromptu ans stick a link in the popup, when i do a classic link with Blue theme and so on
trent
Dec 23, 2007You could use a select drop down as the text for the impromptu, and a function to use your style sheet switcher as the callback.
$.prompt(‘[select name="sscolor"][option value="blue"]Blue Theme[/option]….[/select]‘,
{ callback:function(v,m){
color = m.find(‘select[name='sscolor']‘).val();
//now call your stylesheet switcher
//switchStyleSheets(color);
}});
Richard
Dec 24, 2007hmm, i tried but no matter how i re-worded it, the page came up with an error saying Error: expected “[”
so idk if the way you had written the select and option thing cant have “[” but that seems to be where it wont work.
i really appreciate this in advanced.
do you have AIM or msn by any chance?
trent
Dec 24, 2007Yes, sorry, I used “[” but they should be “<” accordingly. The message text should be standard html. Also if you copied and pasted it from the blog here be sure the ‘ and ” didn’t get converted to weird characters. I do have aim, but will be away from the computer for Christmas the next couple days. If you are still having trouble when I get back we can chat! Good Luck!
Dan
Dec 24, 2007Trent,
I just wanted to follow up on my comment from the 3rd of December. Despite your constant suggestions to use the strict doctype, I implemented the !important css modification to fix two issues: message centering and long page fades/scrolling issues.
At first the “important” fix seemed to resolve the issues. I’ve learned since then that it only resolved the issue with the message not centering properly.
On a recent project, one with long pages and buttons that implement your code, I found the problem with the entire page not fading and although the message would center, it did so at the top of the page. I took another look here and implemented the strict doctype and it resolved both problems.
Thanks again for your hard work. I’ll work on getting my boss to make a donation! ;)
Dan
trent
Dec 24, 2007Hey Dan,
Glad that helped and best of luck with your project!
Trent
Richard
Dec 25, 2007well i tried again.
i went from making sure i had “
Richard
Dec 25, 2007um i guess my comment didnt show.
ill reword it.
i tried everything that you said and got 2 errors always.
either the sscolor was unable to be terminated or it wanted the sscolor in the select to be in its own tags.
my AIM is speacialcookies
i spelt it wrong like that on purpose
stewart
Jan 05, 2008trent, i found out that if there is “div” with float = left or right(css) in the page, then the impromptu cannot hide the containers in the page in IE6 and firefox 2
trent
Jan 06, 2008Container option seemed to be a bit buggy to me I do admit, but I only had problems in ie6.. But it seems to work fine using the default (body). I will see if I can’t come up with a quick fix for this.
senthil
Jan 08, 2008Hi,
I tried your plugin for first time. But, the css is not applied to the dialog window. Was clueless on this ..
senthil
Jan 08, 2008I am just providing the code that i used here..
$('#save').bind("click", function(){
var brown_theme_text = 'Example 13Save these settings?';
$.prompt(brown_theme_text,{
buttons:{Ok:true,Cancel:false},
prefix:'brownJqi'
});
return false;
});
trent
Jan 08, 2008Did you copy the ‘brownJqi’ theme to your CSS?
http://www.trentrichardson.com/Impromptu/css/examples.css
The js doesn’t do any styling as far as color or backgrounds, only positioning.
trent
Jan 08, 2008btw that theme is near the bottom of that css file. Also be sure to get the background-image for that theme included within the css.
KAB
Jan 10, 2008Nice plugin. I got all your examples to work easily. But being a newbie I wonder if you could help just a bit more.
I have a form which works just fine with an onSubmit does some validation to see if you have checked the top selection of a multiple select dropdown list of years
[code]
[/code]
[code]
function CheckThis(form) {
var year = form.elements['year[]'];
var numyearSelected = 0;
for (var i = 0; i
trent
Jan 10, 2008I think your code got chopped off before you got to your question. Watch our for the greater than/less than symbols.
Julien
Jan 27, 2008Hello,
first thanks for your nice plugin.
I got an issue having with the fade background on IE6.
I’m using the latest version of impromptu (1.2) and have set a dark grey background on the following div => div.jqifade{ background-color: #333333;position: absolute;}
It works fine in Firefox, but in IE6, the background fades but is white and not “#333333″.
Any clue ?
trent
Jan 27, 2008That sounds very strange, are you sure ie isn’t caching? Also I like to place impromptu styles near the end of my css so nothing else overwrites it(might not be the case here though..).
julien
Jan 28, 2008It’s not cached in ie, I’ve juste tested it again after cleaning the cache folder.
I’ve tried putting the style part at the end of the stylesheet but got the same problem.
Here is the style definitions I use :
/*————-impromptu———- */
div.jqifade{ background-color: #333333;position: absolute;}
div.jqi{ position: absolute; background-color: #FFF; padding: 10px; width: 350px; text-align: center; }
div.jqi .jqicontainer{ background-color: #FFF; padding: 0px; color: #ffffff; font-weight: bold; }
div.jqi .jqimessage{ background-color: #FFF; padding: 10px; }
div.jqi .jqibuttons{ text-align: center; padding: 5px 0 0 0; }
div.jqi button{ padding: 3px 10px 3px 10px; margin: 0 10px; color: #333333; font-size: 10px; background: url(images/button.gif) repeat-x #f0f0f0; color:#666; border: 1px solid #a4a4a4;}
/*——————————– */
Julien
Jan 30, 2008Hi again,
could you may be update the CSS used for your examples to set a background of #333333 for div.jqifade ?
This way I would be able to tell you if it also happens on your site on which each settings are normally ok.
trent
Jan 30, 2008Julien,
I changed the background-color to #333333. It works for me, and looks pretty good so I might just leave it :)
Julien
Feb 01, 2008Hi Trent,
thanks for the update on your examples page.
I’ve tried “example 2″ in firefox and it works fine but via IE it shows a white faded background, not a dark-grey one.
So this means first that I’ve setup your plugin correctly on my website, but secondly, that the plugin is not working with my IE version or that I’m missing a IE 6 patch or something.
My IE version under xp sp2 (french) is : 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
What’s yours ?
Julien
trent
Feb 01, 2008I generally run IE7, I had to find a computer with 6, but you’re right, it appears to be ffffff in ie6. Not sure what is causing this problem as the only styles I change with javascript is the position, height, width, and opacity. Its likely the opacity causing the issue???
Julien
Feb 01, 2008Hi
it’s not a problem with opacity but another one. Test adding “border: 5px solid green;” to the “jqifade” div an you’ll see that actually the div doesn’t even appear in IE6.
Julien
Julien
Feb 01, 2008I’ve found the bug !!!!
I’ve commented the iframe part in your js script and it works !
/*
if((jQuery.browser.msie && jQuery(‘object, applet’).length > 0) || ie6)
fade = ”;
*/
trent
Feb 01, 2008Makes perfect sense. Please be aware of the nasty select/z-index issue with ie6(a drop down will show through everything). That is what the iframe was for or if there is a flash object or applet so they don’t bleed through the fade.
Julien
Feb 02, 2008Hi again,
I guess I’ll give up with the fade effect because I got another visual glitch with IE6.
The page I’ve setup is long and so have a scrollbar. The problem is that in IE6 the fade div is 100% width – the scrolllbar size. So on the right I got an unfaded part.
elemental
Feb 08, 2008I’m having a problem with the .fade not covering the whole page. I have xhtml strict doctype, and have experimented with placing position: absolute !important; in several places in the css.
Problem exists across all browsers after clearing cache. I’m testing in Opera9, FF2+, IE7+.
My site is internal so I can not link to it, but have given you a paste2.org link to my code.
trent
Feb 08, 2008I believe the problem is that it it is only as tall as the body element? so if it doesn’t fill up the entire height of the screen it leaves open space. I need to correct this very badly to be the height of the browser and not the height of the document. My Appologies, I will try and change this as soon as possible. The reason for doing it this way to begin with was to use the container option, but after using it I think that option could be removed and always use a full screen modal.
If you need a solution faster than I can provide one it should be fairly trivial. First you need to get the height/width of the browser window, the following code should accomplish this(Add it inside of the prompt function):
var getClientXY = function(w) {
var width, height;
w = w ? w : window;
width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
return { width: width, height: height };
}
Next, within the prompt function you need to set height and width inside of the jqif.css(…) to these values. Also within that statement you would change position to fixed. If anyone gets this before I do code donations are happily accepted :).
elemental
Feb 11, 2008Thanks, I wasn’t sure where to put that function or alter your jqif.css block to avoid breakage in other browsers so I set css on the body block to position:absolute; top:0px; left:0px; height:100%; width:100%; margin:0px;
Now everything is working fine in FF2+, Opera9, IE7, Safari3b(Win). Since I don’t have to worry about older browsers this works out fine for me.
trent
Feb 11, 2008Excellent! Thanks for posting your fix!
Patrick Wolf
Feb 13, 2008Hi Trent,
if you want to do IE6 testing, have a look at the following posting.
http://technology.amis.nl/blog/?p=2835
I have already used the free Virtual PC 2004 with an image containing IE6. Works quite well.
Patrick
trent
Feb 14, 2008Hey Patrick,
That looks very useful and I’m sure I’ll give it a shot in the upcoming week! Thanks!
Anup
Feb 14, 2008Hi,
I like your plugin. It is quite nice and versatile. One question though. I know you have said that
“This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.”
However, because the fade effect attempts to make it look like it is modal, I find I can still tab into the page below the prompt.
Are there any quick ways to prevent this via this plugin itself?
essai bébé
Feb 14, 2008Hi,
first, very goog job, this plugin is very nice and usefull, however i still have probleme working with ie6, but i ll work on it!!
Do you have a solution for the press enter issue?
trent
Feb 14, 2008@Anup,
I don’t know of a way to stop the keyboard from tabbing through the page unless you create an event listener for the tab key and always set focus back to your prompt if the focused object is not within the prompt.
@essai bébé,
Are you refering to submitting/closing the prompt when the user hits enter? Todo so you should be able to automatically focus that element as soon as the prompt is fully open, that way hitting enter on the focused button will submit the prompt.
Anup
Feb 15, 2008Trent,
Thanks for replying. Shortly after posting, I had a thought that an IFrame shim might do the trick. The iframe would take on the dimensions of the fade div.
I think this would be needed for IE6 so that drop downs do not show through, as well, which is currently what I am seeing.
I will see if I can find a moment to implement this, and if I do, I will let you know.
Anup
Feb 15, 2008Trent, just looked at your code, and you have indeed provided an iframe (for IE6). However, the reason I was getting the scroll bars come through was that there was no height. It might have been some interaction with some other styles on my page, not sure, but in your code, where you had this:
height: (ie6)? “100%”:b.height()
I just changed it to
height: b.height()
That seemed to work for me for IE6…
(The IFrame doesn’t stop tabbing into the controls behind though. I might follow your idea of handling the tab key on the prompt…)
trent
Feb 15, 2008Thank you Anup! I forget why I had that line in there, possibly before I added the iframe to it. I will make note of this and next version of Impromptu will include this fix!
Anup
Feb 15, 2008Thanks Trent. (I also made the zindex a value that can be overridden, with the default of 999 (and the overlay zindex = the default minus one.) The reason for this is that I actually needed a higher zindex, as 999 was taken up by something else on my page :)
Making that configurable might be quite useful for others, perhaps?
Paul Huntsberger
Jul 16, 2008Hi, I have been using this awesome extension for a few days, and I ran into an IE problem with the nasty “Can’t move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.” (AND things where not centering corectly.)
This error is always such a pain, but I found this blog on a solution that worked!
http://siderite.blogspot.com/2007/02/ie-annoying-message-and-bug.html
All I did was remove the display:none (Line 93 && 94), but I wanted to suggest maybe using this gentleman’s workaround and adding the .style into everything.
Just a suggestion thanks for the great extension!