Tue 15 Apr 2008
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!
April 22nd, 2008 at 10:17 am
A 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;
}
});
April 22nd, 2008 at 7:48 pm
Hey 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
May 2nd, 2008 at 5:09 pm
Just to warn you about a small mistake on Impromptu’s page:
“Setting Defualts”
And thanks for a great plugin
May 16th, 2008 at 9:07 am
Hey!
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
May 16th, 2008 at 10:14 am
To 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.
May 18th, 2008 at 5:45 pm
Pretty cool..
just PLEASE tell me how to use _variables_ instead of text for setting button texts!
May 18th, 2008 at 6:27 pm
Im 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!
May 18th, 2008 at 6:52 pm
ok, 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..
May 18th, 2008 at 7:37 pm
sorry for the type:
s/there/their
May 19th, 2008 at 7:16 am
Hey 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;
May 20th, 2008 at 5:21 am
Nice plugin. How about a parameter for specifying the color of the blocked background.
May 20th, 2008 at 7:20 am
As 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.