Ajax Jquery Pop Form - Firefox issue

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

03-Dec-11 21:29
Great script Matt. It displays correctly in IE 8 & 9 but not in Firefox for some reason. The background and foreground are both faded equally when clicking on the contactForm.

UPDATED CODE 12-05 with your exact html, css, js and just 2 extra floated divs I inserted which are styled too.



<!doctype html>
<html lang="en">
<head>

<title>A Slick Ajax Contact Form with jQuery and PHP</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<style type="text/css">


/* Add some margin to the page and set a default font and colour */

body {
margin: 30px;
font-family: "Georgia", serif;
line-height: 1.8em;
color: #333;
}


/* Set the content dimensions */

#content {
width: 800px;
padding: 50px;
margin: 0 auto;
display: block;
font-size: 1.2em;
}

#content h2 {
line-height: 1.5em;
}


/* Add curved borders to various elements */

#contactForm, .statusMessage, input[type="submit"], input[type="button"] {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}


/* Style for the contact form and status messages */

#contactForm, .statusMessage {
color: #666;
background-color: #ebedf2;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );
border: 1px solid #aaa;
-moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
box-shadow: 0 0 1em rgba(0, 0, 0, .5);
opacity: .95;
}


/* The form dimensions */

#contactForm {
width: 40em;
height: 33em;
padding: 0 1.5em 1.5em 1.5em;
margin: 0 auto;
}


/* Position the form in the middle of the window (if JavaScript is enabled) */

#contactForm.positioned {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: auto;
margin-bottom: auto;
}


/* Dimensions and position of the status messages */

.statusMessage {
display: none;
margin: auto;
width: 30em;
height: 2em;
padding: 1.5em;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.statusMessage p {
text-align: center;
margin: 0;
padding: 0;
}


/* The header at the top of the form */

#contactForm h2 {
font-size: 2em;
font-style: italic;
letter-spacing: .05em;
margin: 0 0 1em -.75em;
padding: 1em;
width: 19.5em;
color: #aeb6aa;
background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */
border-bottom: 1px solid #aaa;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}


/* Give form elements consistent margin, padding and line height */


/*///////////// for Instructors ///////////////////////*/

#content .inst {
width:290px;
height:280px;
}

.inst span img {
width:50px;
padding:2px 10px 10px 2px;
float:left;
}

#content .inst {
margin:0px 0px 10px 0px;
padding:3px;
font-size:88%;
float:right;
line-height:normal;
border-bottom:solid 1px #ccc;
}


#content .highlights {
width: 700px;
padding-bottom:15px;
margin-bottom:15px;
}

#content .left {
float:left;
margin-right:10px;
margin-bottom:10px;
}


#content .right_state {
float:right;
margin-left:50px;
margin-bottom:10px;
padding: 3px 5px 5px 10px;
width:320px;
border:1px solid #cccccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}

/*///////////////////////////////*/

#contactForm ul {
list-style: none;
margin: 0;
padding: 0;
}

#contactForm ul li {
margin: .9em 0 0 0;
padding: 0;
}

#contactForm input, #contactForm label {
line-height: 1em;
}


/* The field labels */

label {
display: block;
float: left;
clear: left;
text-align: right;
width: 28%;
padding: .4em 0 0 0;
margin: .15em .5em 0 0;
font-weight: bold;
}


/* The fields */

input, textarea {
display: block;
margin: 0;
padding: .4em;
width: 67%;
font-family: "Georgia", serif;
font-size: 1em;
border: 1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
-webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
background: #fff;
}

textarea {
height: 13em;
line-height: 1.5em;
resize: none;
}


/* Place a border around focused fields, and hide the inner shadow */

#contactForm *:focus {
border: 1px solid #66f;
outline: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}


/* Display correctly filled-in fields with a green background */

input:valid, textarea:valid {
background: #dfd;
}


/* The Send and Cancel buttons */

input[type="submit"], input[type="button"] {
float: right;
margin: 2em 1em 0 1em;
width: 10em;
padding: .5em;
border: 1px solid #666;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
color: #fff;
background: #0a0;
font-size: 1em;
line-height: 1em;
font-weight: bold;
opacity: .7;
-webkit-appearance: none;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active {
cursor: pointer;
opacity: 1;
}

input[type="submit"]:active, input[type="button"]:active {
color: #333;
background: #eee;
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

input[type="button"] {
background: #f33;
}


/* Header/footer boxes */

.wideBox {
clear: both;
text-align: center;
margin: 70px;
padding: 10px;
background: #ebedf2;
border: 1px solid #333;
}

.wideBox h1 {
font-weight: bold;
margin: 20px;
color: #666;
font-size: 1.5em;
}

</style>

<!-- Some IE7 hacks and workarounds -->

<!--[if lt IE 8]>
<style>

/* IE7 needs the fields to be floated as well as the labels */

input, textarea {
float: right;
}

#formButtons {
clear: both;
}

/*
IE7 needs an ickier approach to vertical/horizonal centering with fixed positioning.
The negative margins are half the element's width/height.
*/

#contactForm.positioned, .statusMessage {
left: 50%;
top: 50%;
}

#contactForm.positioned {
margin-left: -20em;
margin-top: -16.5em;
}

.statusMessage {
margin-left: -15em;
margin-top: -1em;
}

</style>
<![endif]-->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">

var messageDelay = 2000; // How long to display status messages (in milliseconds)

// Init the form once the document is ready
$( init );


// Initialize the form

function init() {

// Hide the form initially.
// Make submitForm() the form's submit handler.
// Position the form so it sits in the centre of the browser window.
$('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

// When the "Send us an email" link is clicked:
// 1. Fade the content out
// 2. Display the form
// 3. Move focus to the first field
// 4. Prevent the link being followed

$('a[href="#contactForm"]').click( function() {
$('#content').fadeTo( 'slow', .2 );
$('#contactForm').fadeIn( 'slow', function() {
$('#senderName').focus();
} )

return false;
} );

// When the "Cancel" button is clicked, close the form
$('#cancel').click( function() {
$('#contactForm').fadeOut();
$('#content').fadeTo( 'slow', 1 );
} );

// When the "Escape" key is pressed, close the form
$('#contactForm').keydown( function( event ) {
if ( event.which == 27 ) {
$('#contactForm').fadeOut();
$('#content').fadeTo( 'slow', 1 );
}
} );

}


// Submit the form via Ajax

function submitForm() {
var contactForm = $(this);

// Are all the fields filled in?

if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {

// No; display a warning message and return to the form
$('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
contactForm.fadeOut().delay(messageDelay).fadeIn();

} else {

// Yes; submit the form to the PHP script via Ajax

$('#sendingMessage').fadeIn();
contactForm.fadeOut();

$.ajax( {
url: contactForm.attr( 'action' ) + "?ajax=true",
type: contactForm.attr( 'method' ),
data: contactForm.serialize(),
success: submitFinished
} );
}

// Prevent the default form submission occurring
return false;
}


// Handle the Ajax response

function submitFinished( response ) {
response = $.trim( response );
$('#sendingMessage').fadeOut();

if ( response == "success" ) {

// Form submitted successfully:
// 1. Display the success message
// 2. Clear the form fields
// 3. Fade the content back in

$('#successMessage').fadeIn().delay(messageDelay).fadeOut();
$('#senderName').val( "" );
$('#senderEmail').val( "" );
$('#message').val( "" );

$('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );

} else {

// Form submission failed: Display the failure message,
// then redisplay the form
$('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
$('#contactForm').delay(messageDelay+500).fadeIn();
}
}

</script>

</head>
<body>

<div class="wideBox">
<h1>A Slick Ajax Contact Form with jQuery and PHP</h1>
<h2>Click one of the "Send us an email" links...</h2>
</div>
<div style="float:left; width:180px;">
<ul>
<li>Ho Hum </li>
<li>Ho Hum </li>
<li>Ho Hum </li>
<li>Ho Hum </li>
<li>Ho Hum </li>
<li>Ho Hum </li>
</ul>
</div>
<div id="content">
<h1>Lorum stuff</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
<a href="#contactForm">CONTACT ME</a> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </p>
<div class="highlights">
<div class="left">
<div class="inst"> <span><img src="/profile/ar-john-smith.jpg" /></span>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. <br />
<a href="#contactForm">CONTACT ME</a>
</div><!-- closes inst -->

</div> <!-- closes Left--><div class="right_state"> Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.
</div> <!-- closs states -->
<form id="contactForm" action="processForm.php" method="post">

<h2>Contact the Instructor</h2>

<ul>

<li>
<label for="senderName">Name</label>
<input type="text" name="senderName" id="senderName" placeholder="Please type your name" required="required" maxlength="40" />

</li>

<li>
<label for="senderEmail">Email</label>
<input type="email" name="senderEmail" id="senderEmail" placeholder="Please type your email address" required="required" maxlength="50" />
</li>
<li>
<label for="senderPhone">Phone</label>
<input type="phone" name="senderPhone" id="senderPhone" placeholder="Please type your phone number" required="required" maxlength="20" />
</li>
<li>
<label for="message" style="padding-top: .5em;">Message</label>

<textarea name="message" id="message" placeholder="Please type your message" required="required" cols="8" rows="30" maxlength="500"></textarea>
</li>
<li>
<div id="formButtons">
<input type="submit" id="sendMessage" name="sendMessage" value="Send Email" />
<input type="button" id="cancel" name="cancel" value="Cancel" />
</div></li></ul>

</form>

<div id="sendingMessage" class="statusMessage"><p>Sending your message. Please wait...</p></div>
<div id="successMessage" class="statusMessage"><p>Thanks for sending your message! We'll get back to you shortly.</p></div>
<div id="failureMessage" class="statusMessage"><p>There was a problem sending your message. Please try again.</p></div>
<div id="incompleteMessage" class="statusMessage"><p>Please complete all the fields in the form before sending.</p></div>
<p>
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. </p>
</div>
<div class="wideBox">
<p>&copy; Elated.com | <a href="http://www.elated.com/articles/slick-ajax-contact-form-jquery-php/">Back to Tutorial</a></p>

<p style="font-size: .8em; line-height: 1.5em;"><a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />This <span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/Text" rel="dc:type">work</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.elated.com/" property="cc:attributionName" rel="cc:attributionURL">http://www.elated.com/</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.</p>
</div>

</body>
</html>





I am also looking to put a small "x" in the top right instead of the cancel button down below. Thanks

UPDATE:12-04 well after checking some more on "my page", taking out html code, taking <a href out of the embedded divs, there's still no change, I stuck it in the header, footer etc. it is still never in clear focus. in IE9 it is fine. What could make it be unclear or faded from once you click in FF? Something is conflicting.

UPDATE: 12-05; After taking out ALL custom CSS from our page and inserting slick css ONLY, it still renders incorrectly, no focus on the pop-up. I believe I have troubleshot it down to it being multiple divs. (1 hour later NOPE! that is incorrect)

Well with websites having complex html coding, navigation bars, side columns, divs inside divs in the body it is not working in Firefox. I'd love to be proven wrong but I have not seen any other examples. I am using simple html.

[Edited by altaone on 05-Dec-11 14:04]
06-Dec-11 20:41
@altaone: The problem is simple - you haven't closed your #content div. Therefore the form is inside your #content div, and gets faded out along with the rest of the content.

I recommend indenting your markup properly. It will make it much easier to spot such mistakes in the future.

--
Matt Doyle, Elated
06-Dec-11 23:20
Hi Matt,

you are correct. If I close the #content div AFTER the 1st paragraph it works. But if I want to embed two 1/2 size floated class divs (1 left, 1 right) within the #content div, it did not work right.

Oh, and my brain now works. I need to change these in the .js file too.

$('#content').fadeTo( 'slow', .2 ); to ('#content .left')

It makes perfect sense. Boy did I miss that. I stand corrected and thank you very much.

You can delete this thread if you want since the answer so simple and I missed it for hours. I feel embarrassed.

 
New posts
Old posts

Follow Elated