German Rumm’s blog

I am working for Nitro FX, two weeks today. Tonight at midnight my first project on a new job goes live. It’s basically a very simple site with AJAX. AJAX was necessary to avoid reloading rather big flash.

Added a jQuery history plugin, so that “Back” button will work, form validation plugin for (well) form validation, tooltip plugin to display comments if there are any, flash plugin to embed flash and forms plugin to send forms with ajax. Ajax-forms work with the history plugin, so that back button behaves correctly after the form has been submitted. Almost all site is accessible with javascript turned off.

Made my best effort to secure it too. Hope it will not be hacked on the first day (nor the last) Kinda nervous, will see how it goes.

Update Several minor problems were discovered this morning, but they are fixed by now. Should have written some sort of tests. Lesson learned.

Need jQuery sIFR for a project I am currently working on. Found 2: one by Gilles van den Hoven and another by Jonathan Neal. Liked the second one – documentation, plenty of options, custom callbacks and this one is based on a wonderful flash plugin by Luke Lutman.

Unfortunately both don’t support transparency nor custom background, only background color. At least I couldn’t make it work. wMode=”transparent” didn’t help, setting bgColor to empty(“none”/”transparent”) didn’t work as expected. Will have to look into .fla file, but for that I have to boot into my Windows, and I so-o-o don’t want to do it

P.S. sIFR3 Alpha doesn’t support transparent backgound neither.

Took Mika’s advice, decided to try out Thickbox Reloaded. Still not what I was looking for. Yeah, it looks much more jquery-like, but it still doesn’t provide any extra functionality, compared to original thickbox.

It allows passing options, but unfortunately those options are of no use to me. Those options control thickbox dimensions (top, left, width/minWidth, height) and localization.

Decided to try out jqModal, now that thing is way more powerful. It doesn’t have any built-in design like thickbox, so you have to create your own window layout, but it allows attaching handlers to onHide(), onShow() and onLoad() events. It allows controlling jqModal programmatically using jqmShow() and jqmHide(). It allows adding custom triggers on-the-fly and it even allows opening several dialogs simultaneously.

So, it basically has everything you might possibly need, stuffed in a 3 Kb file.

Useful link

Tutorial describing loading external content into IFRAME

jQuery Thickbox is one of the plugins I constantly use when developing web-sites. Not for the image/gallery functionality, but because of the inline/AJAX/IFrame content. Before I had to use window.open() and write rather complex javascript for passing data back to the opener window.

One thing lacking is a good documentation: examples help, but I prefer more conventional style of documentation – with all options explained, and default values given.

One thing that gave me some problems was the iframe option – query string was always truncated, so I couldn’t pass parameters to iframed page.

Today I found answer to my problem – all ThickBox parameters should be added after TB_iframe=true, since query string gets truncated after that.

One good thing about it – no junk parameters are passed to the page you are calling.

Example: You need to call the “pictures.php?album_id=23″ page in Thickbox iframe. You need to add TB_iframe=true to URL (and class=”thickbox” to an element) to activate Thickbox onclick. So, URL should look like this: pictures.php?album_id=23&TB_iframe=true (or even pictures.php?album_id=23&TB_iframe=true if you want to keep your HTML well-formed). That way only album_id will be passed to pictures.php – all other parameters will be stripped out.

KeepThis=true in examples is just for illustrative purposes only – Thickbox doesn’t need it and never uses it.

P.S. I don’t like the way ThickBox currently works – I want to be able to attach thickbox to elements using more traditional jquery approach, like this:

$('a.thickbox').thickbox({width: 400, height: 400});

Unfortunately, currently there’s no such functionality.