jQuery Forum

I am trying to load a group of elements and have them fade in 1 by 1 in order. Elements can be <li> or <div>

I have tried a number of ways but can not get it...

I have been struggling with this for a while now. I have quicksand set up to sort portfolio items and prettyphoto set up to display the items.

Everything works until the items are cloned. I can not get the callback to prettyphoto to work.


http://jsfiddle.net/jaycbrf4/yR7Jh/

I am using JQuery form and trying to validate that a state was selected.

Here is my form code:

1. <!-- contact-form START here --><div id="feedback">
             <p class="error wrong_firstName"> Please fill in your first name</p>
             <p class="error wrong_lastName"> Please fill in your last name</p>
             <p class="error wrong_address"> Please fill in your address</p>
             <p class="error wrong_city"> Please fill in your city</p>
             <p class="error wrong_state"> Please select in your state</p>
             <p class="error wrong_zip"> Please fill in your zip</p>
             <p class="error wrong_email"> Please fill in your email</p>
           
           </div>
           <form action="sendemail.php" id="contact_us" method="post">
           <fieldset title="listSelect" id="listSelect"><label for="publicList">I want to join the Public list</label><input type="checkbox" name="checkbox" id="publicList" value="publicList"  />
   <label for="Artist List">I want to join the Artist list</label><input type="checkbox" name="checkbox" id="artistList" value="artistList"  /></fieldset><br />
             <label for="firstName">First Name:</label><input name="firstName" type="text" id="firstName" size="20" />
             <label for="lastName">Last Name:</label><input name="lastName" type="text" id="lastName" size="24" /> <br />
             <label for="address">Address:</label> <input name="address" type="text" id="address" size="60" /><br />
             <label for="city">City:</label> <input name="city" type="text" id="city" size="15" />
            
   
2. 
   
3. <select name="state" id="state">
                 <option value="Alabama - AL">AL</option>
                 <option value="Alaska - AK">AK</option>
                 <option value="Arizona - AZ">AZ</option>
                 <option value="Arkansas - AR">AR</option>
                 <option value="0" selected="selected">State</option>
             </select>
4. 
   
5. 
             <label for="zip">Zip</label><input name="zip" type="text" id="zip" size="15" maxlength="5" /><br />
             <label for="email">Email</label> <input name="email" type="text" id="email" size="24" /><br />
            
             <p>Send me info about the following American Art Marketing festivals:</p>
            <fieldset title="showSelect" id="showSelect">
            <input name="berkshires" type="checkbox" id="berkshires" value="Berkshires Arts Festival send info" /><label for="Berkshires"><b>The Berkshires Arts Festival</b>, Great Barrington, MA &diams; July 2-4, 2010</label><br />
           
            <input name="acs_ny" type="checkbox" id="acs_ny" value="Send me info for the American Craft Show NY" /><label for="acs_ny"><b>American Craft Show NYC</b>, NY &diams; November 19-21, 2010 </label><br />
          
            <input name="acs_fl" type="checkbox" id="acs_fl" value="Send me info for theAmerican Craft Show Sarasota" /><label for="Sarasota"><b>American Craft Show Sarasota</b>, Sarasota, FL &diams; December 3-5, 2010</label></fieldset><br />
       <br /><br />
            
            
             <label for="message">Have questions or comments? Let us know...</label><br /><textarea name="message" rows="8" cols="44" id="message"></textarea><br />
             </p>
             <p id="submit">
               <input type="submit" value="Send" name="submitButton" class="button small" />
             </p>
           </form>
           <p id="success">Your message was sent succesfully!<br />Our mailing list is used as a service to our clients and is not available to anyone for any other use.</p>
           <!-- contact-form END here -->
   

Here is my Javascript

1. var options = {
       beforeSubmit:  validate,  // pre-submit callback
       success:       showResponse,  // post-submit callback
       resetForm: true        // reset the form after successful submit
   };
                  
   $('#contact_us').ajaxForm(options);
                  
   function showResponse(responseText, statusText){
       $('#contact_us').slideUp({ opacity: "hide" }, "normal")
       $('#success').slideDown({ opacity: "show" }, "slow")
      
   }
          
   
          
          
   function validate(formData, jqForm, options) {
       $("p.error").slideUp({ opacity: "hide" }, "fast");
                
       var firstNameValue = $('input[name=firstName]').fieldValue();
       var lastNameValue = $('input[name=lastName]').fieldValue();
       var addressValue = $('input[name=address]').fieldValue();
       var cityValue = $('input[name=city]').fieldValue();
2. 
       var stateSelected = $('state').fieldValue();
3. 
       var zipValue = $('input[name=zip]').fieldValue();
       var emailValue = $('input[name=email]').fieldValue();
      
      
       var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
       var correct = true;
      
       if (!firstNameValue[0]) {
           $("p.error.wrong_firstName").slideDown({ opacity: "show" }, "slow");
           correct = false;
       }
       if (!lastNameValue[0]) {
           $("p.error.wrong_lastName").slideDown({ opacity: "show" }, "slow");
           correct = false;
       }
       if (!addressValue[0]) {
           $("p.error.wrong_address").slideDown({ opacity: "show" }, "slow");
           correct = false;
       }
       if (!cityValue[0]) {
           $("p.error.wrong_city").slideDown({ opacity: "show" }, "slow");
           correct = false;
       }
       if (!stateSelected[0]) {
           $("p.error.wrong_state").slideDown({ opacity: "show" }, "slow");
           correct = false;
       }
       if (!zipValue[0]) {
           $("p.error.wrong_zip").slideDown({ opacity: "show" }, "slow");
           correct = false;
       }
      
       if (!emailValue[0]) {
           $("p.error.wrong_email").slideDown({ opacity: "show" }, "slow");
           correct = false;
       } else if(!emailReg.test(emailValue[0])) {
           $("p.error.wrong_email").slideDown({ opacity: "show" }, "slow");
           correct = false;
       }
      
   
      
       if (!correct) {return false;}
   }    
                                   
   

I'd also like to be able to validate the checkboxes...

Thanks-

I followed the tutorial @ http://jqueryfordesigners.com/coda-slider-effect/

and implemented it nicely on my web site redesign. However, when I view the site in IE the sliders do not work.

Everything works fine on Mac (all browsers) and PC Firefox only.

site is here:

http://hvhn.com/hvwd/redesign
and
http://hvhn.com/hvwd/redesign/projects.htm
I am not sure what I did wrong. Is it the CSS? What can I do to make this work in IE 6+

- Thanks