Contact-Pop jQuery Plugin Author : Jon Raasch Website : http://jonraasch.com/blog/ Email : jr@jonraasch.

com Copyright (c)2009 Jon Raasch

############################## FreeBSD License ############################## ############################## Copyright (c)2009 Jon Raasch. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright n otice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyrigh t notice, this list of conditions and the following disclaimer in the documentat ion and/or other materials provided with the distribution. THIS SOFTWARE IS PROVIDED BY JON RAASCH ``AS IS'' AND ANY EXPRESS OR IMPLIED WAR RANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILIT Y AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL JON RAA SCH OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXE MPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRU PTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRIC T LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. The views and conclusions contained in the software and documentation are those of the authors and should not be interpreted as representing official policies, either expressed or implied, of Jon Raasch, who is the man.

############################## Basic Instructions ############################## ############################## Basic use of Contact-Pop couldn't be easier. First upload the Contact-Pop direc tory to your web server, preferably at the root of your site. Next, make sure t o include the contact-pop.js and contact-pop.css files, as well as the jQuery li brary: <script type="text/javascript" src="/Contact-Pop/js/jquery.js"></script> <script type="text/javascript" src="/Contact-Pop/js/contact-pop.js"></script> <link rel="stylesheet" type="text/css" href="/Contact-Pop/css/contact-pop.css" / > The paths above should work if you've uploaded Contact-Pop to your site's root, otherwise be sure to modify them as needed.

Next we will need to flag our contact links. Open up contact-pop.js and look fo r the config section. When modifying this section be careful to keep any traili ng commas after the variable definitions, or the script will throw JS errors. First change the replaceHref variable to the path to your contact page. Please note that this pulls in the href attribute from your various <a> tags, so 'conta ct.php', '/contact.php' and '../contact.php' are all different even if they poin t to the same page. Next open up contact-pop.php and head to the config section. Make sure to chang e the $siteEmail variable, since this is where the results of the form will get sent (when a message is posted, it will be emailed to you). var $siteEmail = 'email@youremail.com'; And that's it, you're all set to go! ############################## Unobtrusive Contact-Pop ############################## ############################## By replacing links to your static contact page, Contact-Pop ensures that even us ers without Javascript enabled can access the form. But we can take this a step further--let's use the same backend script for the AJAX Contact-Pop form as wel l as the static contact page. That way the same process runs with the popup and the normal links. First replace your current contact page with contact-pop.php by renaming and mov ing contact-pop.php accordingly. (If you don't have a contact page, name it wha tever you want). Next open up contact-pop.js and find this part of the config section: formPhpLocation : '/Contact-Pop/contact-pop.php', // relative path to the backen d contact form Modify this according to the location of your contact page, which should be a re lative path from the browser's perspective. Just to double-check, the formPhpLo cation should match the replaceHref in most cases (remember that our goal is to use the same page for the AJAX and static form). Finally, you should use your site's frame on the static contact page. Open up t he newly renamed contact-pop.php file, and look to the bottom for a large block of HTML. Modifying this should be pretty straightforward. Now regardless of how users reach your contact form, the same backend script wil l be used to both serve and process the form. ############################## Customizing Contact-Pop ############################## ############################## Although its basic setup is simple, Contact-Pop is also extremely customizable. Mainly, the easy-to-modify config section of contact-pop.js controls many of t he plugins options.

First you can adjust the fade speed using overlayFadeIn and overlayFadeOut. If these fade speed controls aren't enough, you can even incorporate the jQuery eas ing plugin (http://gsgd.co.uk/sandbox/jquery/easing/) by simply passing whicheve r easing string you want to use in overlayEasing (and including the plugin Javas cript). Additionally, the text and color of the popup header can be modified using the c ontactHeadline and headerBgColor variables. Contact-Pop's config section also provides a number of options for the selectors it uses. First, if you want to use the popup for more than one href, you can p ass an array of hrefs in replaceHref, for instance: replaceHref : array('/contact.php', '/Contact'), Alternately, you can flag links for the Contact-Pop overlay using a jQuery selec tor; simply pass whichever selector string you want to use into openButtonSelect or. If you want to only use the jQuery selector and not replace any links based on their href value, just set replaceHref to null or an empty string. Additionally you can flag a custom close button using closeButtonSelector. By d efault Contact-Pop appends its own close button so in most cases you can leave t his alone. Finally the Javascript file allows you to control a few other options. For inst ance, by default Contact-Pop preserves any changes made to the contact form when it is closed and reopened. To cause it to reset the form each time, set resetF ormEachTime to 1. Additionally, Contact-Pop doesn't fade the overlay in IE7 because of a bug with IE7's implementation of png-24s. This bug causes the overlay's translucent gray png-24 to flash black before fading out. However, if you want to use a totally opaque image for your overlay image, set fadeOverlayIE to 1. Besides the contact-pop.js config section, you can modify any other styling opti ons through contact-pop.css, which should be fairly straightforward if you know CSS. Finally, there are a few options provided in the contact-pop.php file. You can change the title of the emails that the form sends, as well as the text of the s erver response when the form is processed.