Trent Richardson
To all the Impromptu users tired of the same old themes and don’t want to create one, we have a new theme option. Example 14 contains an example of using this theme. Just view the examples.css to snatch the code! This one has the look and feel of a much more traditional dialog box for all you old schoolers out there. Anyone else have any good impromptu themes let me know, i’ll gladly link to you!
Related posts:
14 Responses
manuel
22|Apr|2008A simple enhancement to make buttons more customizable with text and value:
Example:
function promptLogout(title, msg, theme, yes, no) {
jQuery.prompt(”+title+”+
”+msg+
”,
{show: ‘fadeIn’, buttons: { ok: {txt: yes, val: true}, cancel: {txt: no, val: false} }, callback: callbackLogout });
}
function callbackLogout(v, m) {
jQuery.prompt(‘i clicked ‘ + v + m);
}
Impromptu:
/*
* jQuery Impromptu
* By: Trent Richardson [http://trentrichardson.com]
* Version 1.5
* Last Modified: 3/31/2008
*
* Copyright 2008 Trent Richardson
*
* Licensed under the Apache License, Version 2.0 (the “License”);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an “AS IS” BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
jQuery.extend({
ImpromptuDefaults: { prefix:’jqi’, buttons:{ Ok:{txt:’Ok’, val:true} }, loaded:function(){}, submit:function(){return true;}, callback:function(){}, opacity:0.6, zIndex: 999, overlayspeed:’slow’, promptspeed:’fast’, show:’show’, focus:0, useiframe:false },
SetImpromptuDefaults: function(o){
jQuery.ImpromptuDefaults = jQuery.extend({},jQuery.ImpromptuDefaults,o);
},
prompt: function(m,o){
o = jQuery.extend({},jQuery.ImpromptuDefaults,o);
var ie6 = (jQuery.browser.msie && jQuery.browser.version ‘;
if(o.useiframe && ((jQuery.browser.msie && jQuery(‘object, applet’).length > 0) || ie6))//if you want to use the iframe uncomment these 3 lines
msgbox += ”;
else{
if(ie6) $(‘select’).css(‘visibility’,'hidden’);
msgbox +=”;
}
msgbox += ‘X’+ m +”;
jQuery.each(o.buttons, function(k,v) { msgbox += ”+ v.txt +”});
msgbox += ”;
var jqib =b.append(msgbox).children(‘#’+ o.prefix +’box’);
var jqi = jqib.children(‘#’+ o.prefix);
var jqif = jqib.children(‘#’+ o.prefix +’fade’);
var getWindowScrollOffset = function(){
return (document.documentElement.scrollTop || document.body.scrollTop) + ‘px’;
};
var getWindowSize = function(){
var size = {
width: window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth),
height: window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight)
};
return size;
};
var ie6scroll = function(){
jqib.css({ top: getWindowScrollOffset() });
};
var flashPrompt = function(){
var i = 0;
jqib.addClass(o.prefix +’warning’);
var intervalid = setInterval(function(){
jqib.toggleClass(o.prefix +’warning’);
if(i++ > 1){
clearInterval(intervalid);
jqib.removeClass(o.prefix +’warning’);
}
}, 100);
};
var escapeKeyClosePrompt = function(e){
var kC = (window.event) ? event.keyCode : e.keyCode; // MSIE or Firefox?
var Esc = (window.event) ? 27 : e.DOM_VK_ESCAPE; // MSIE : Firefox
if(kC==Esc) removePrompt();
};
var positionPrompt = function(){
var wsize = getWindowSize();
jqib.css({ position: (ie6)? “absolute” : “fixed”, height: wsize.height, width: “100%”, top: (ie6)? getWindowScrollOffset():0, left: 0, right: 0, bottom: 0 });
jqif.css({ position: “absolute”, height: wsize.height, width: “100%”, top: 0, left: 0, right: 0, bottom: 0 });
jqi.css({ position: “absolute”, top: “100px”, left: “50%”, marginLeft: ((((jqi.css(“paddingLeft”).split(“px”)[0]*1) + jqi.width())/2)*-1) });
};
var stylePrompt = function(){
jqif.css({ zIndex: o.zIndex, display: “none”, opacity: o.opacity });
jqi.css({ zIndex: o.zIndex+1, display: “none” });
}
var removePrompt = function(callCallback, clicked, msg){
jqi.remove();
if(ie6)b.unbind(‘scroll’,ie6scroll);//ie6, remove the scroll event
w.unbind(‘resize’,positionPrompt);
jqif.fadeOut(o.overlayspeed,function(){
jqif.unbind(‘click’,flashPrompt);
jqif.remove();
if(callCallback) o.callback(clicked,msg);
jqib.unbind(‘keypress’,escapeKeyClosePrompt);
jqib.remove();
if(ie6 && !o.useiframe) $(‘select’).css(‘visibility’,'visible’);
});
}
positionPrompt();
stylePrompt();
//Events
jQuery(‘#’+ o.prefix +’buttons’).children(‘button’).click(function(){
var msg = jQuery(this).text(); //jqi.children(‘.’+ o.prefix +’container’).children(‘.’+ o.prefix +’message’);
var clicked = jQuery(this).val(); //o.buttons[jQuery(this).text()];
if (o.submit(clicked,msg)) removePrompt(true, clicked, msg);
});
if(ie6) w.scroll(ie6scroll);//ie6, add a scroll event to fix position:fixed
jqif.click(flashPrompt);
w.resize(positionPrompt);
jqib.keypress(escapeKeyClosePrompt);
jqi.find(‘.’+ o.prefix +’close’).click(removePrompt);
//Show it
jqif.fadeIn(o.overlayspeed);
jqi[o.show](o.promptspeed,o.loaded);
jqi.find(‘#’+ o.prefix +’buttons button:eq(‘+ o.focus +’)').focus();//focus the default button
return jqib;
}
});
trent
22|Apr|2008Hey Manuel,
Thanks for the code. looks like the blog removed the html. Does this just allow you to use different text values for the buttons? If so Ok and Cancel aren’t required, it can be anything you like as the keys to the hash are the text of the button:
$.prompt(‘hello world’, {
buttons: { hola: 1, hello: 2, later: 3 }
});
if you need something more customizable this should work:
$.prompt(‘hello world’, {
buttons: { ‘button with spaces’: true }
});
Am I misunderstanding what you did? Thanks again, and to anyone looking at the code PLEASE BE AWARE THE HTML IS MISSING FROM THE CODE ABOVE
Tiago Rodrigues
02|May|2008Just to warn you about a small mistake on Impromptu’s page:
“Setting Defualts”
And thanks for a great plugin :)
R
16|May|2008Hey!
How could i get the value returned by Ok or Cancel button? I use impromptu within another function that needs to return true or false;
thx for answear
trent
16|May|2008To get the value of the button clicked you can retrieve it through the call back function:
mycallbackfunc(v,m){
alert(v); //v is the value of the button clicked
}
Also if it is called from another function, the outer function will not wait on $.prompt to complete, you must use the callback function to get the value of the button clicked.
Joe
18|May|2008Pretty cool..
just PLEASE tell me how to use _variables_ instead of text for setting button texts!
trent
18|May|2008Im a little unclear on exactly what you’re looking for, but i’ll give it a go.. The buttons are just a hash, or associative array, so you can do something like:
var btntxt = ‘foo’;
var mybtns[btntxt] = ‘bar’;
$.prompt(‘foobar’, { buttons: mybtns });
Hope that helps!
Joe
18|May|2008ok, the easiest way to descibe the prob is just to show u the method I guess:
function confirmPrompt ( item, question, okText, cancelText )
{
var myButtons = { okText: true, cancelText: false };
$.prompt(question, { buttons: myButtons,
callback: function returnPromptBool( v,m ){
if (v)
{
var link = $(item);
window.location = link.attr(“href”);
}
} });
return false;
}
so..the buttons say ‘okText’ and ‘cancelText’ instead of there real values.. :|
Joe
18|May|2008sorry for the type:
s/there/their
trent
19|May|2008Hey Joe,
The problem with hashes in javascript is they always interpret the keys as strings, with or without the quotes, so it won’t be able to tell if it is a variable name or not. The only way around it is to treat it as an array like so:
var oktxt = ‘foo’;
var canceltxt = ‘bar’;
var mybtns = {};
mybtns[oktxt] = true;
mybtns[canceltxt] = false;
PeterAce
20|May|2008Nice plugin. How about a parameter for specifying the color of the blocked background.
trent
20|May|2008As of now you can change the overlay background within the CSS. I might add this into the next version, however I have tried to completely separate design from functionality as the only styles js sets are size and position.
Paul Huntsberger
17|Sep|2008Hey Trent! Thanks so much for a great plug-in! I have most of my problems figured out with IE7 (thanks to the posts here), but I am noticing that not all of the prompts I am making are centering properly when the page loads. It seems to move over a bit too far – but – if you resize the page the prompt moves back to where it should.
So, page loads, prompt starts – moves over too far to the right.
Then, I resize or maximize and it all works – weird huh? Thanks if you have any suggestions.
Using IE7, winxp sp3.
trent
17|Sep|2008That is very weird. The same code is simply executed over again on resize, so its the exact same routine to position it. Do you have a link to the page with the problem?