GreyBox FAQ & Tips'n'Tricks

[Logos]

From http://www.malthusian-solutions.com/?q=content/grebox-faq

-----------------------------------------------------------------------------------------------------
My GreyBox doesn't work! Why?!?
-----------------------------------------------------------------------------------------------------
The most common problem is that the GreyBox files have not been
correctly included. For example, say you have this:

You need to double check that the file actually exists at the
specified URL. The easiest way to check is to type in your domain name
like a regular URL, then put the contents of the src after it. The
javascript file should then popup in your browser. If it doesn't, you
need to find where the files are and path to them correctly.

(eg) http://nirdvana.com/greybox/gb_scripts.js

-----------------------------------------------------------------------------------------------------
My paths to my files are OK, but my GreyBox STILL doesn't work! Why?!?
-----------------------------------------------------------------------------------------------------
Check that the variable GB_ROOT_DIR has been set properly in the main
page. It needs to point at the directory that holds the gb_scripts.js
file.
My paths to my files are OK and so is my GB_ROOT_DIR .. but my GreyBox
STILL doesn't work! Why?!?

Check that you are not cross-domain scripting.
My paths to my files are OK and so is my GB_ROOT_DIR, I'm not cross-
domain scripting ... but my GreyBox STILL doesn't work! Why?!?

Are you using 'rel' in your URL rather than overriding the onclick?
'rel' will not work if you have anything in the 's 'onload', or if you
are using another js library that overrides onload.

In my opinion, 'rel' is far more trouble than it is worth, good only
for very simple pages. Use onclick with functions from the GreyBox
documentation's advanced usage section instead.

Don't forget to suppress the hyperlink action by either return the
GreyBox function call, or explicitly return false at the beginning of
the onclick:

(eg) <a href='http://www.nirdvana.com/blog-ts' onclick='return
GB_show("Tyler's Blog", this.href);'>

(eg) <a href='http://www.nirdvana.com/blog-ts' onclick='return false;
GB_show("Tyler's Blog", this.href);'>

-----------------------------------------------------------------------------------------------------
How do I POST a form from the top level page to a greybox?
-----------------------------------------------------------------------------------------------------
The long and the short of it is that you can't.

You can, however, GET form data to a greybox by appending it to the
query string of the URL you are opening in the greybox. Building your
own querystring from a basic form is not difficult, you just grab the
form element and iterate through the various inputs and append their
URL encoded names and values to the querystring.

Another solution would be to call the greybox with the URL to a
special intermediary page, have that page call a function in the top
level main page and have it return the comple FORM object, and then it
could submit the form from within the greybox. This method is somewhat
fraught with cross-browser compatibility issues, however.

In my opinion, the best solution is to use AJAX to send the form data
to your server, then in the callback function call up the greybox with
the page you want to display.



-----------------------------------------------------------------------------------------------------
Tips'n'Tricks
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
GB_ROOT_DIR Hack
-----------------------------------------------------------------------------------------------------
When I author non-template pages, I sometimes forget to put the
GB_ROOT_DIR in - and the page falls flat on it's face when someone
tries to open a greybox. If you're only using your greybox files to
power one site, you can just add GB_ROOT_DIR to the top of the
gb_scripts.js file and never have to worry about forgetting it again.
Creating A Close Button
This is quite easy once you know how. The advanced documentation is
missing the entry for GB_hide(), and this is the function call you
need for closing. You can use this function anywhere in your code of
course, not just in a button.

So from inside the greybox, a simple close button would look like
this:

<input type='button' value='Close Greybox' onclick='top.GB_hide();'>