Wed 21 Nov 2007
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
November 26th, 2007 at 10:28 am
Hello,
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
November 26th, 2007 at 3:05 pm
Hey 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
November 26th, 2007 at 8:30 pm
Hi!
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!
November 26th, 2007 at 8:35 pm
I 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″);
}
November 27th, 2007 at 8:06 am
Hey 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!
November 27th, 2007 at 12:05 pm
Love 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.
November 28th, 2007 at 8:10 am
Hey 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!
November 28th, 2007 at 3:47 pm
Thanks 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-
December 3rd, 2007 at 1:15 pm
Not 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.
December 3rd, 2007 at 5:28 pm
Trent, you rock!
Also, thanks Harry. I had the same problem but “!important” after the position worked!
Dan
December 7th, 2007 at 12:35 pm
Not 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.
December 7th, 2007 at 1:09 pm
hey 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).
December 8th, 2007 at 11:23 am
Hey 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!
December 10th, 2007 at 1:35 pm
Hey 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?
December 13th, 2007 at 2:12 pm
Trent 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?
December 13th, 2007 at 4:33 pm
Do 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?
December 13th, 2007 at 4:55 pm
Hi 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.
December 13th, 2007 at 5:06 pm
Ok, 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!
December 15th, 2007 at 1:26 pm
Just 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 ?
December 16th, 2007 at 12:11 pm
First. Thanks for your great work!
BTW, I am using IE7 but the pop-up window always show at the left-top corner. why?
December 16th, 2007 at 11:15 pm
A 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?
December 22nd, 2007 at 3:23 am
just 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
December 23rd, 2007 at 1:55 pm
You 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);
}});
December 24th, 2007 at 2:30 am
hmm, 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?
December 24th, 2007 at 10:31 am
Yes, 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!
December 24th, 2007 at 6:16 pm
Trent,
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
December 24th, 2007 at 11:59 pm
Hey Dan,
Glad that helped and best of luck with your project!
Trent
December 25th, 2007 at 6:22 pm
well i tried again.
i went from making sure i had “
December 25th, 2007 at 6:25 pm
um 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
January 5th, 2008 at 10:26 pm
trent, 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
January 6th, 2008 at 11:29 pm
Container 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.
January 8th, 2008 at 12:17 pm
Hi,
I tried your plugin for first time. But, the css is not applied to the dialog window. Was clueless on this ..
January 8th, 2008 at 12:19 pm
I 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;
});
January 8th, 2008 at 1:09 pm
Did 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.
January 8th, 2008 at 1:16 pm
btw 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.
January 10th, 2008 at 6:22 am
Nice 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
January 10th, 2008 at 8:00 am
I think your code got chopped off before you got to your question. Watch our for the greater than/less than symbols.
January 27th, 2008 at 5:19 am
Hello,
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 ?
January 27th, 2008 at 1:40 pm
That 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..).
January 28th, 2008 at 10:54 am
It’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;}
/*——————————– */
January 30th, 2008 at 1:54 pm
Hi 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.
January 30th, 2008 at 6:40 pm
Julien,
I changed the background-color to #333333. It works for me, and looks pretty good so I might just leave it
February 1st, 2008 at 3:45 am
Hi 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
February 1st, 2008 at 9:31 am
I 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???
February 1st, 2008 at 12:49 pm
Hi
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
February 1st, 2008 at 1:02 pm
I’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 = ”;
*/
February 1st, 2008 at 4:32 pm
Makes 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.
February 2nd, 2008 at 5:57 am
Hi 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.
February 8th, 2008 at 4:16 pm
I’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.
February 8th, 2008 at 4:42 pm
I 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 :).
February 11th, 2008 at 9:48 am
Thanks, 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.
February 11th, 2008 at 2:17 pm
Excellent! Thanks for posting your fix!
February 13th, 2008 at 8:23 am
Hi 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
February 14th, 2008 at 7:56 am
Hey Patrick,
That looks very useful and I’m sure I’ll give it a shot in the upcoming week! Thanks!
February 14th, 2008 at 12:38 pm
Hi,
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?
February 14th, 2008 at 1:11 pm
Hi,
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?
February 14th, 2008 at 2:20 pm
@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.
February 15th, 2008 at 3:59 am
Trent,
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.
February 15th, 2008 at 5:43 am
Trent, 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…)
February 15th, 2008 at 8:12 am
Thank 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!
February 15th, 2008 at 11:06 am
Thanks 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?
July 16th, 2008 at 10:50 am
Hi, 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!