Tag Archives: dialog

How to Close a FancyBox via a Button Click CodeUnit 03 SEP 2012

The excellent and rather flexible jQuery plugin FancyBox has become my defacto jQuery lightbox implementation and as such it has found its way into most of my project work.

Although you can obviously close the displayed lightbox by either clicking outside of the box (i.e. on the greyed out area) or by clicking on the Close icon/button on the border of the lightbox, it is sometimes useful to be able to close the FancyBox by clicking on a button or element being displayed within the dialog – in other words when the FancyBox is being used to display iframe content.

Now the API for FancyBox reveals the existence of a close() function, which is called as follows:

$.fancybox.close();

This is useful when you want to programmatically close the lightbox, say after a certain period of time has elapsed – or in our case, when a button displayed in the dialog is clicked on.

However, there is one little trick that has to be employed here. Because the button sits within the FancyBox already launched, you need to ask its parent window to actually run the close function to shut it down.

Hence, your call from the displayed iframe content would look like:

if (typeof window.parent.$.fancybox!='undefined'){
           window.parent.$.fancybox.close();
         }

Nifty.

Related Link: http://fancybox.net

JavaScript to Confirm a File Download CodeUnit 27 JAN 2011

A confirmation dialogue is handy when you want to make sure that the selected action is actually meant to take place and isn’t just the result of an accidental click. Of course, achieving this is super easy thanks to JavaScript’s built in dialog box functions, the one we are most interested in this case being ‘confirm’.

So let’s look at this in code then:

var confirmed = confirm('Do you wish to download this PDF file?');
if (confirmed){
	window.open('/pdfs/download.pdf');
} else {
	alert('download cancelled');
}

Of course, you wouldn’t normally bother with the else part of the statement, though it is useful to show when you start thinking of building more complex decisions based on a combination of confirms and cancels.

Nifty.

Internet Explorer: Restore File Download Dialog CodeUnit 07 JAN 2010

If you’re still using Windows XP (hey, not everyone can afford to just upgrade willy nilly), today’s little tutorial is specifically for you.

If in the past you’ve accidentally unchecked that little box reading “Always ask before opening this type of file” when trying to save a file in Internet Explorer and now want to change the behaviour that you previously set, these are the steps you need to follow in order to reclaim your File Download dialog box:

1. Let’s first make sure that this is exactly what you’re looking for, just to know that we are still on the same page:

2. It is? Great. Then your first step in reclaiming this is to open any folder in Windows and then navigate to the Tools menu on the folder menubar and select Folder Options… on it.

3. Next, select the File Types tab and browse down to the file type for which you wish to recover the File Download dialog. Click on the Advanced button once you have selected the affected file type.
4. On the resulting modal dialog, check the Confirm open after download option. (Note. Even if it is currently checked, uncheck it and then check it again. This forces the registry change for just in case).
You should now have your bright and shiny File Download dialog back in place, easily tested by trying to download a new file off the Net with that particular file extension you just restored.