Hi,
I’m using the code from the Fancy Form Design book, but i’m having trouble getting the code to make the slideDown and slideUp work in IE.
In Chrome it’s perfect, in FF it’s ok but there’s some kind of artifact on the bottom of the code?
If you click ‘send me post’ it doesn’t work in IE 8 (or IE 7 compat).
Code below. If anyone has any ideas I would greatly appreciate the help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Signup for our newsletter</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" />
<![endif]-->
<!-- JS -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.pack.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var conditionalSection = $('#section-gift-wrapping'),
dependentField = $('input[name=send_post]');
// Trigger change event for IE
if ($.browser.msie) {
$(dependentField).click(function() {
dependentField.blur().focus();
});
var label = $("label[for=" + dependentField.attr("id") + "]");
$(label).click(function() {
dependentField.blur().focus();
});
}
dependentField.bind('change', function() {
// If valid and not visible show conditional section
if (dependentField.is(':checked') && conditionalSection.not(':visible')) {
conditionalSection.slideDown('slow');
$(":input", conditionalSection).removeAttr("disabled");
}
// Otherwise if visible hide the conditional section
else if (conditionalSection.is(':visible')) {
conditionalSection.slideUp('slow');
$(":input", conditionalSection).attr("disabled", "disabled");
}
});
// Trigger change on load
dependentField.trigger('change');
});
</script>
<style type="text/css">
/* Remove backgrounds */
#field-gift-wrapping,
#field-wrapping-type {
background: none;
}
/* Legend */
fieldset#section-gift-wrapping legend {
font-size: 2em;
}
/* Note */
fieldset .conditional-note {
font-size: 1.25em;
}
</style>
</head>
<body id="sign-up">
<!-- Container -->
<div id="container"><div id="container-inner">
<h1>Sign Up</h1>
<!--<p class="log-in">Already a member? <a href="#">Log in</a>.</p>-->
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<fieldset>
<p class="introduction">Please fill out the form below to receive our newsletter.</p>
<p class="note">Fields marked with an asterisk (<abbr title="Required field">*</abbr>) are required.</p>
<!-- Name -->
<div>
<label for="name">Your name <abbr title="Required field">*</abbr></label>
<input type="text" name="name" id="name" />
</div>
<!-- Email -->
<div>
<label for="email">Your email address <abbr title="Required field">*</abbr></label>
<input type="text" name="email" id="email" />
</div>
<!-- Phone -->
<div>
<label for="phone">Your phone number</label>
<input type="text" name="phone" id="phone" />
</div>
<!-- Area of interest -->
<fieldset id="section-db">
<legend><span>Area of interest:</span></legend>
<!-- Month -->
<div>
<ul>
<ul>
<li>
<label>
<input type="checkbox" id="all_services" name="all_services" value="yes" />
- All Services -
</label>
</li>
<li>
<label>
<input type="checkbox" id="banking_finance" name="banking_finance" value="yes" />
Banking and Finance
</label>
</li>
<li>
<label>
<input type="checkbox" id="building_construction" name="building_construction" value="yes" />
Building and Construction
</label>
</li>
<li>
<label>
<input type="checkbox" id="corporate_taxation" name="corporate_taxation" value="yes" />
Corporate and Taxation
</label>
</li>
<li>
<label>
<input type="checkbox" id="intellectual_property" name="intellectual_property" value="yes" />
Intellectual Property
</label>
</li>
<li>
<label>
<input type="checkbox" id="litigation" name="litigation" value="yes" />
Litigation
</label>
</li>
<li>
<label>
<input type="checkbox" id="mortgage_recoveries" name="mortgage_recoveries" value="yes" />
Mortgage Recoveries
</label>
</li>
<li>
<label>
<input type="checkbox" id="property" name="property" value="yes" />
Property
</label>
</li>
<li>
<label>
<input type="checkbox" id="workplace_relations" name="workplace_relations" value="yes" />
Workplace Relations
</label>
</li>
</ul>
</div>
<!--<em class="note">This is hidden by default from your profile.</em>-->
</fieldset>
<!-- Terms of Service -->
<fieldset id="section-contactmethods">
<legend><span>Contact Methods:</span></legend>
<div id="field-agree-tos">
<ul>
<li>
<label>
<input type="checkbox" id="send_email" name="send_email" value="yes" />
Please send me emails
</label>
</li>
<li>
<label>
<input type="checkbox" id="send_post" name="send_post" value="yes" />
Please send me post
</label>
</li>
</ul>
</div>
</fieldset>
<fieldset id="section-gift-wrapping">
<legend>Postal address details</legend>
<p class="conditional-note">If you would like to receive our newsletter by post please fill out the section below</p>
<!--<div id="field-wrapping-type">-->
<!-- Street -->
<div>
<label for="street">Street Address <abbr title="Required field">*</abbr></label>
<input type="text" name="street" id="street" />
</div>
<!-- Suburb -->
<div>
<label for="street">Suburb <abbr title="Required field">*</abbr></label>
<input type="text" name="suburb" id="suburb" />
</div>
<!-- State -->
<div>
<label for="street">State <abbr title="Required field">*</abbr></label>
<input type="text" name="state" id="state" />
</div>
<!-- Postcode -->
<div>
<label for="street">Postcode <abbr title="Required field">*</abbr></label>
<input type="text" name="postcode" id="postcode" />
</div>
</fieldset>
<!-- Controls -->
<div class="controls">
<input id="submit" name="submit" type="submit" value="Create Profile" />
</div>
</fieldset>
</form>
</div></div> <!-- /Container -->
</body>
</html>