[jQuery] jQuery showcase using subModal greybox

[jQuery] jQuery showcase using subModal greybox

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Heya,
I've been working on a little (ahum) project for my company and i want
to share the current work with you guys. </font></font><font size="-1"><font
face="Tahoma">For this app i had to modify some
of jquery's parts and write some of my own plugins. Jump to below to
get the demo URL.
</font></font><font size="-1"><font face="Tahoma"><b>AjaxUpdater:</b>
I use jQuery to submit a form and update a div with the html returned
from that call as can be seen in the demo.
</font></font><font size="-1"><font face="Tahoma"><b>Submodal.js:</b>
The biggest plugin
i made is called subModal; In fact it's a greybox with juice in it. I
started working on it after the first greybox which i saw. Someone gave
the comment that you could tab to the underlying page (e.g. a link in
the footer meaning the greybox jumps out of the user's view which is
not UI friendly). Secondly they loose their orientation because the
tab-cursor/focus could be below the loaded image. It could only be
solved by doing one thing; disable all tabbable elements below the
greybox. I've made a new greybox, which i call SubModal. It behaves
exactly like the other overlays out there, except it
disables all tabbable elements below it. This means you can't tab away
from the
page which is loaded, thus giving it some sort of modal look and feel.
How? On page initialization, new divs are added (using the
jQuery-Builder plugin from Michael Geary) but they remain hidden. Then,
when i want to load a page (like the login form or any other form which
is going to be in my app) i simply call the submodal object which
disables all tabbable elements below, </font></font><font size="-1"><font
face="Tahoma">shows the overlay layer, </font></font><font size="-1"><font
face="Tahoma"> and calls the ajaxupdate. </font></font><i><font
size="-1"><font face="Tahoma">There is only one drawback, I can't
set the disabled flag on a link, which means links below the greybox
could still receive focus. To work around it, i hide all links in the
page when showing the submodal, and reshow them when the submodal is
hidden. It's a bit ugly, but unfortunately the only way i have come up
with.</font></font></i>
<font size="-1"><font face="Tahoma">
This loads HTML AJAH style which you can see in the demo. After the
form has been filled in, i use jQuery to submit the form and overwrite
the contents of the div. If all goes well, the calling page's only
output is some GOOD DOM SCRIPTING to hide the submodal and update the
underlying message div. This means NO page refreshing.</font></font><font
size="-1"><font face="Tahoma"> (FMI see:
<a class="moz-txt-link-freetext" href="http://24ways.org/advent/have-your-dom-and-script-it-too">http://24ways.org/advent/have-your-dom-and-script-it-too</a>).
</font></font><font size="-1"><font face="Tahoma">
<b>Dynamic form errors;</b>
I have chosen to set the form errors using javascript after loading a
page. This because i allready modify the dom, why not modify it a bit
more and it gives a much cleaner code. How this works? First of I've
defined all error messages in the PHP code, so more than 1 language is
just modifying both the templates and the error messages. Then, with
javascript combined with jQuery i change the classname of the labels
and the classnames of the elements affected. I also add a custom error
message.
</font></font><font size="-1"><font face="Tahoma">Please note that </font></font><font
size="-1"><font face="Tahoma">I am not going to share any of this
code, except for the contributions i give to the jQuery source. This is
because (a) i spend a lot (A LOT) of time coding all the stuff and (b)
i don't want to end up like a helpdesk. I hope you agree that.
<b>And now for the demo:</b>
- <a class="moz-txt-link-freetext" href="http://ez-files.net/download.php?file=afd735fa35df049f96f66da29b166249">http://ez-files.net/download.php?file=afd735fa35df049f96f66da29b166249</a>
(or)
- <a class="moz-txt-link-freetext" href="http://www.verzend.be/v/5609290/showcase.swf.html">http://www.verzend.be/v/5609290/showcase.swf.html</a>
Comments, tips and other stuff is welcome! :p
Regards,
Gilles
</font></font>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/