javascript - Can jQuery invalidHandler ScrollTop Via Iframe in Parent Window -
i have php form showing via iframe in parent window, php form scrolltop on own ok, once in iframe in parent window page, jumps directly error. there way add code below make scrolltop in iframe in parent window?
$(function () { $("#frmformmail").validate({ invalidhandler : function() { $('html, body').animate({ scrolltop: $("#frmformmail").offset().top // scroll top form on error }, 'slow' ); }, // specify validation rules rules: { field_0: { // title required: true, minlength: 3 }, field_1: { // full name required: true, email: true, minlength: 5 }, field_2: { // address required: true, minlength: 20 }, field_3: { // age required: true, minlength: 2 }, field_4: { // marital status required: true, minlength: 3 }, field_5: { // children required: true, minlength: 1 }, field_6: { // nationality required: true, minlength: 3 }, field_7: { // health required: true, minlength: 10 }, field_8: { // glasses required: true, minlength: 3 }, field_9: { // car licence required: true, minlength: 10 }, field_10: { // nationality required: true, minlength: 3 }, field_11: { // website of interest 1 required: false, minlength: 5 }, field_12: { // website of interest 2 required: false, minlength: 5 }, field_13: { // applying position required: true, minlength: 3 }, field_14: { // resume required: true, //put allowed file types accept here if required - add remove more extention type required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt" }, field_15: { // cv required: true, //put allowed file types accept here if required - add remove more extention type required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt" }, field_16: { // present job required: true, minlength: 10 }, field_17: { // when can start required: true, minlength: 3 }, field_18: { // relocate dropdown required: true // required: false not required field, required: true required field }, field_19: { // last 3 jobs required: true, minlength: 30 }, field_20: { // attach reference required: false, //put allowed file types accept here if required - add remove more extention type required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt" }, field_21: { // attach other of interest required: false, //put allowed file types accept here if required - add remove more extention type required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt" }, field_22: { // suitable job required: true, minlength: 100 }, field_23: { // suitable job required: true, minlength: 100 }, field_24: { // comments questions required: false, minlength: 50 }, }, // specify validation error messages messages: { field_14: { required: "this field required - validate on submit" }, field_15: { required: "this field required - validate on submit" }, }, submithandler: function(form) { form.submit(); } }); }); <div align="left" style="margin-top:5px; margin-left:10px; width:690px;"> <fieldset style="border:#cccccc 1px solid;"><legend><label class="label" style="background-color:#989eef;">job application form</label></legend> <form name="frmformmail" id="frmformmail" target="submittoframe" action='<?php echo phpfmg_admin_url . '' ; ?>' method='post' enctype='multipart/form-data' onsubmit='return fmghandler.onsubmit(this);'> <input type='hidden' name='formmail_submit' value='y'> <input type='hidden' name='mod' value='ajax'> <input type='hidden' name='func' value='submit'> <table width="100%" border="0" cellpadding="5" cellspacing="0"> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_1_div'> <label class='title'>title , full name <span style="color:red;">*</span></label> <input type="text" name="field_0" id="field_0" value="<?php phpfmg_hsc("field_1", ""); ?>" class='inputbox' maxlength="80" placeholder="full name" autocomplete="off" style="width:295px;" /> </div> </td> <td valign="top" style="width:50%"> <div class='field_block' id='field_1_div'> <label class='title'>email <span style="color:red;">*</span></label> <input type="text" name="field_1" id="field_1" value="<?php phpfmg_hsc("field_1", ""); ?>" class='inputbox' maxlength="60" placeholder="email" autocomplete="off" style="width:295px;" /> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_2_div'> <label class='title'>address <span style="color:red;">*</span></label> <input type="text" name="field_2" id="field_2" value="<?php phpfmg_hsc("field_2", ""); ?>" class='inputbox' maxlength="250" placeholder="address" autocomplete="off" style="width:295px;" /> </div> </td> <td valign="top" style="width:50%"> <div class='field_block' id='field_3_div'> <label class='title'>age <span style="color:red;">*</span></label> <input type="text" name="field_3" id="field_3" value="<?php phpfmg_hsc("field_3", ""); ?>" class='inputbox' maxlength="20" placeholder="age" autocomplete="off" style="width:295px;" /> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_4_div'> <label class='title'>marital status <span style="color:red;">*</span></label> <input type="text" name="field_4" id="field_4" value="<?php phpfmg_hsc("field_4", ""); ?>" class='inputbox' maxlength="50" placeholder="marital status" autocomplete="off" style="width:295px;" /> </div> </td> <td valign="top" style="width:50%"> <div class='field_block' id='field_5_div'> <label class='title'>dependants / children <span style="color:red;">*</span></label> <input type="text" name="field_5" id="field_5" value="<?php phpfmg_hsc("field_5", ""); ?>" class='inputbox' maxlength="100" placeholder="number of children / dependants" autocomplete="off" style="width:295px;" /> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_6_div'> <label class='title'>nationality <span style="color:red;">*</span></label> <input type="text" name="field_6" id="field_6" value="<?php phpfmg_hsc("field_6", ""); ?>" class='inputbox' maxlength="100" placeholder="nationality" autocomplete="off" style="width:295px;" /> </div> </td> <td valign="top" style="width:50%"> <div class='field_block' id='field_7_div'> <label class='title'>general health / smoker / non-smoker <span style="color:red;">*</span></label> <input type="text" name="field_7" id="field_7" value="<?php phpfmg_hsc("field_7", ""); ?>" class='inputbox' maxlength="250" placeholder="general health / smoker / non-smoker" autocomplete="off" style="width:295px;" /> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_8_div'> <label class='title'>do wear glasses or contact lens <span style="color:red;">*</span></label> <input type="text" name="field_8" id="field_8" value="<?php phpfmg_hsc("field_8", ""); ?>" class='inputbox' maxlength="100" placeholder="glasses / contact lenses" autocomplete="off" style="width:295px;" /> </div> </td> <td valign="top" style="width:50%"> <div class='field_block' id='field_9_div'> <label class='title'>car / licence / clean driving licence <span style="color:red;">*</span></label> <input type="text" name="field_9" id="field_9" value="<?php phpfmg_hsc("field_9", ""); ?>" class='inputbox' maxlength="200" placeholder="car / licence / clean" autocomplete="off" style="width:295px;" /> </div> </td> </tr> <tr> <td colspan="2"> <div class='field_block' id='field_10_div'> <label class='title'>anything else think should know</label> <textarea name="field_10" id="field_10" class='textarea' maxlength="1000" data-limit="1000" placeholder="please tell of else might relevant self , special needs or disabilities might have or need with." style="width:627px; height:60px;"><?php phpfmg_hsc("field_10"); ?> </textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_11_div'> <label class='title'>website of interest 1 (optional)</label> <input type="text" name="field_11" id="field_11" value="<?php phpfmg_hsc("field_11", ""); ?>" class='inputbox' maxlength="250" placeholder="website address" autocomplete="off" style="width:295px;" /> </div> </td> <td valign="top" style="width:50%"> <div class='field_block' id='field_12_div'> <label class='title'>website of interest 2 (optional)</label> <input type="text" name="field_12" id="field_12" value="<?php phpfmg_hsc("field_12", ""); ?>" class='inputbox' maxlength="250" placeholder="website address" autocomplete="off" style="width:295px;" /> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_13_div'> <label class='title'>position applying for <span style="color:red;">*</span></label> <input type="text" name="field_13" id="field_13" value="<?php phpfmg_hsc("field_13", ""); ?>" class='inputbox' maxlength="250" placeholder="title of job applying for" autocomplete="off" style="width:295px;" /> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_14_div'> <label class='title'>attach resume (cover letter) <span style="color:red;">*</span> </label> <input type="file" name="field_14" id="field_14" value="" class='inputbox' onchange="fmghandler.check_upload(this);" style="width:310px; margin-bottom:5px;" /> </div> </td> <td colspan="2"> <div class='field_block' id='field_15_div'> <label class='title'>attach cv (curriculum vitae) <span style="color:red;">*</span></label> <input type="file" name="field_15" id="field_15" value="" class='inputbox' onchange="fmghandler.check_upload(this);" style="width:310px; margin-bottom:5px;" /> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_16_div'> <label class='title'>present / resent job , salary <span style="color:red;">*</span></label> <input type="text" name="field_16" id="field_16" value="<?php phpfmg_hsc("field_16", ""); ?>" class='inputbox' maxlength="250" placeholder="present / resent job , salary" autocomplete="off" style="width:295px;" /> </div> </td> <td valign="top" style="width:50%"> <div class='field_block' id='field_17_div'> <label class='title'>when start? <span style="color:red;">*</span></label> <input type="text" name="field_17" id="field_17" value="<?php phpfmg_hsc("field_17", ""); ?>" class='inputbox' maxlength="100" placeholder="available start" autocomplete="off" style="width:295px;" /> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_18_div'> <label class='title'>are willing relocate if applicable? <span style="color:red;">*</span></label> <?php phpfmg_dropdown( 'field_18', "- please select option -=|not applicable|yes|no|not sure" );?> </div> </td> <td valign="top" style="width:50%"> <div class='field_block' id='field_19_div'> <label class='title'>last 3 jobs held including dates <span style="color:red;">*</span></label> <textarea name="field_19" id="field_19" class='textarea' maxlength="400" data-limit="400" placeholder="please tell last 3 jobs have had, if many, giving discrption , start finshed dates." style="width:295px; height:60px;"><?php phpfmg_hsc("field_19"); ?> </textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span> </div> </td> </tr> <tr> <td valign="top" style="width:50%"> <div class='field_block' id='field_20_div'> <label class='title'>attach references </label> <input type="file" name="field_20" id="field_20" value="" class='inputbox' onchange="fmghandler.check_upload(this);" style="width:310px;" /> </div> </td> <td colspan="2"> <div class='field_block' id='field_21_div'> <label class='title'>other attachment of interest i.e. photo </label> <input type="file" name="field_21" id="field_21" value="" class='inputbox' onchange="fmghandler.check_upload(this);" style="width:310px;" /> </div> </td> </tr> <tr> <td colspan="2"> <div class='field_block' id='field_22_div'> <label class='title'>please tell think makes suitable position <span style="color:red;">*</span></label> <textarea name="field_22" id="field_22" class='textarea' maxlength="1500" data-limit="1500" placeholder="please tell of experience have makes suitable position?" style="width:627px; height:60px;"><?php phpfmg_hsc("field_22"); ?> </textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span> </div> </td> </tr> <tr> <td colspan="2"> <div class='field_block' id='field_23_div'> <label class='title'>tell more yourself, hobbies , interests <span style="color:red;">*</span></label> <textarea name="field_23" id="field_23" class='textarea' maxlength="1500" data-limit="1500" placeholder="please tell more yourself, temperament, personality. positive , punctual person. work others team or on own. hobbies , interests. else relevant position." style="width:627px; height:60px;"><?php phpfmg_hsc("field_23"); ?> </textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span> </div> </td> </tr> <tr> <td colspan="2"> <div class='field_block' id='field_24_div'> <label class='title'>comments / questions </label> <textarea name="field_24" id="field_24" class='textarea' maxlength="1000" data-limit="1000" placeholder="please leave comment or ask questions might have." style="width:627px; height:60px;"><?php phpfmg_hsc("field_24"); ?> </textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span> </div> </td> </tr> <tr> <td valign="top" style="width:50%"><div class='field_block' id='phpfmg_captcha_div'> <div class='col_label'> <label class='title'>security code: <span style="color:red;">*</span></label> <?php phpfmg_show_captcha(); ?> </div> </div> <div> <div class='col_label'> </div> <div class='form_submit_block col_field'> <div id='err_required' class="form_error" style='display:none;'> <label class='form_error_title'>please check captcha security code</label> </div> <br /> <input type='submit' value='submit' class='form_button' /> <span class="required">required <span style="color:red;">*</span></span> <span id='phpfmg_processing' style='display:none;'> <img id='phpfmg_processing_gif' src='<?php echo phpfmg_admin_url . '?mod=image&func=processing' ;?>' border="0" alt='processing...' /> <label id='phpfmg_processing_dots'></label> </span> </td> <td valign="top" style="width:50%"> </td> </tr> </table> </form> </fieldset> </div> <!-- iframe --> <iframe src="assets/form.php" name="iframe" width="780" height="1770" id="iframe" frameborder="0" scrolling="auto"></iframe>
in order scroll parent window inside iframe you'll need access parent window's instance of jquery. inside iframe, available @ window.parent.$.
// inside iframe window.parent.$('html, body').animate({ scrolltop: window.parent.$("#frmformmail").offset().top }, 'slow'); if not using jquery within scope of iframe, define $ parent's $, save having write out window.parent.$ multiple times:
// inside iframe // reference parent window's jquery instance. assuming we're not // using $ jquery in scope. var $ = window.parent.$; $('html, body').animate({ scrolltop: $("#frmformmail").offset().top }, 'slow');
Comments
Post a Comment