Comments on: jQuery Impromptu 2.8 – A Couple Tweaks

By: Irakli

Irakli — Fri, 18 Feb 2011 09:07:20 +0000

hello!
Can you help me with Mootools Impromptu.
How can i set callback function when “X”-clicked?
In “callback” – window is empty
Somthing like this:
close: function (v, m, f) {…}

By: Gareth

Gareth — Tue, 16 Feb 2010 17:02:42 +0000

Yes! Certainly adding a class the top-most container would be perfect. For me a single class is all that’s required, and I guess we culd just space-separate multiple classes if required.

By: trent

trent — Mon, 15 Feb 2010 15:32:50 +0000

Would a solution possibly be adding an option for classes, and for this you can pass a string or an array of classes to append. This way you can keep the jqi prefixes, and add a class the container (container being the div which holds the fade and the prompt itself). So then if you wanted to change the fade color for classes: ‘jqidark’ just make one line after your default jqi classes instead of a new theme:

.jqiwide .jqi{ width: 600px; }

Is that more like what you’re looking for? I’ve encountered similar problems with needing to adjust the width, so this will help me also.

By: Gareth

Gareth — Mon, 15 Feb 2010 13:21:47 +0000

Hi Trent. I was using the id attribute as an example – a class would do just as well.
It is the CSS prefix that I’m referring to. Consider I’ve got styles for a prompt that’s intended to replace the typical alert box. I’ve set up styles on the default “jqi” prefix for the fade, borders and background, close gadget, buttons, text and so on. These are of course on classes prefixed by “jqi”.

If I want to create a prompt for something like an image lightbox or feedback form, I’d probably want to differentiate it from an alert but it may share a lot of the existing styles.

To do this currently I’d set a different prefix, say “litebox”, but that would lose any “jqi” prefix-based styles, so I’d have to go through all the common style in the CSS and insert selectors for ‘litebox” alongside “jqi”. Soon the CSS starts to get a cumbersome. E.g.

div.jqi {background:#fff; border:solid #000 2px; width: 400px;}
div.jqibuttons {background-color:#eee; font-weight:bold;}
div.jqi .jqiclose {position:absolute;top:0;right:0}
div.jqi .jqimessage {color:#000; padding:10px 5px;}

…becomes…

div.jqi, div.litebox {background:#fff; border:solid #000 2px; width: 400px;}
div.jqibuttons, div.liteboxbuttons {background-color:#eee; font-weight:bold;}
div.jqi .jqiclose, div.litebox .liteboxclose {position:absolute;top:0;right:0}
div.jqi .jqimessage, div.litebox .liteboxclose {color:#000; padding:10px 5px;}

div.litebox {border:dotted #999 2px;}
div.liteboxbuttons {background-color:#fff;}
div.litebox .liteboxclose {left:0}

Obviously this is a hugely simplified version of real CSS, which quickly gets difficult to manage, especially if you add another style of prompt. However if there was a way to set a unique selector “handle” (class or id) on the top-most container, all my prompts could use the same existing prefix and associated CSS but I could override a select few by adding CSS entries to change only the properties that apply to the new prompt. E.g.

.litebox div.jqi {border:dotted #999 2px;}
.litebox div.jqibuttons {background-color:#fff;}
.litebox .jqiclose {left:0}

Hope that demonstrates what I was referring to! :)

By: trent

trent — Fri, 12 Feb 2010 19:56:25 +0000

Hey Gareth, prefix is mainly for the css, in case you have more than one layout or theme, its easy to toggle between the two by just changing prefix. As far as id goes there should never be more than one prompt at the time on a page, so not sure how that would harm anything. Could you shed a little more light on your situation?

By: Gareth

Gareth — Fri, 12 Feb 2010 18:13:59 +0000

I’ve been using Impromptu for a couple of year and one thing that keeps niggling at me is the “prefix” option; because it prefixes the id and all class attributes, it means the CSS for subtly different prompts is pretty much mass duplication.

Any chance an future update could have an additional “idprefix”? That way I can ensure the classes are distinct with the regular prefix option, and change the “idprefix” to switch different types of prompt without having to dupe my CSS

Cheers, G

By: trent

trent — Thu, 04 Feb 2010 18:29:49 +0000

Thanks liz! And glad you got it working!

By: liz

liz — Thu, 04 Feb 2010 16:32:28 +0000

Thanks a million Trent – the external load worked like a charm and makes everything alot cleaner. Talk about callbacks: I used the impromptu loaded callback to do a jq .load of my html form which specified a callback to load my fields and bind the data validation.

Life is good – thank you for your help! Coffee/beer on me!

By: trent

trent — Wed, 03 Feb 2010 21:16:50 +0000

Is your code sort of copying the form into impromptu? so there are technically two elements with the same ID? What you might try doing is place the form in an external html file and load it with ajax (I have an impromptu example of doing this: http://trentrichardson.com/Impromptu/demos/demoajax.php ) Otherwise you could try destroying the old form before tying the events to the new one you’re placing in Impromptu.

By: liz

liz — Wed, 03 Feb 2010 20:24:37 +0000

Hi Trent -

Love Impromptu and you have done a great job documenting it! I was wondering if I could impose and ask a question (more js related than Impromptu) that you would know off the top of your head as to my not having any luck googling anything for this so far….

I want to have a form (which I’m using jquery validator plug in) loaded by Impromptu that I have defined in my html file (not dynamically constructed in my js). I am setting the visibility via jq, calling my validation init fn, then using the $(‘#myForm’).html() for my impromptu html parameter. It displays the form correctly, but none of my validation, any events binded nor field values that I’ve loaded are carried through.

Are there any hints that you can see right off as to what I as a ‘not-expert’ js person isn’t seeing? I know this isn’t specifically Impromptu – Greatly appreciated!