javascript - bootstrap modal contact form issues -
i'm having issues bootstrap modal contact form, seems work planned in browsers except on ipad/safari, can please shed light on i'm going wrong?
when viewing on ipad modal offset right , moved down page, not sitting in middle should be.
when user selects field in form cursor not in field itself, located outside of modal window flashing in greyed out background.
when user types in field text not shown within field until next field selected, text appears.
as said working fine in i.e. , chrome these issues occur safari. breaking layout when viewed apple device.
page can viewed @ http://odds-uk.co.uk/abbeystone/contact.php
there's quite lot going on in page validation, modals, maps , tabs etc. wonder if have conflict somewhere i'm new web programming (year 2 degree student) please forgive stupid errors, hope can i'm stumped ideas @ present. thankyou in advance. roy
<!doctype html> <html> <head> <!-- include google map api link --> <script src="http://maps.googleapis.com/maps/api/js?key=aizasyde94ccwcoy8mk1nirhzlbnc5bxst5czng"></script> <!--<meta name="description" http-equiv="content-type" content="text/html;">--> <!-- website title & description search engine purposes --> <title>contact property management</title> <!-- mobile viewport optimized --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- bootstrap css --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!--<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">--> <!-- custom css --> <link href="includes/css/styles.css" rel="stylesheet"> <!-- include modernizr in head, before other javascript --> <script src="includes/js/modernizr-2.6.2.min.js"></script> <script> var maldon = new google.maps.latlng(51.731897, 0.677035); function initializemaldon() { var mapprop1 = { center:maldon, zoom:15, scrollwheel: false, draggable: false, maptypeid:google.maps.maptypeid.roadmap }; var map1=new google.maps.map(document.getelementbyid("googlemap1"),mapprop1); var marker1=new google.maps.marker({ position:maldon, animation:google.maps.animation.bounce }); marker1.setmap(map1); var infowindow1 = new google.maps.infowindow({ content:"<img class='logopad' src='images/logo.png' width='140px' alt='abbeystone property management logo'>", maxwidth: 140 }); infowindow1.open(map1,marker1); } google.maps.event.adddomlistener(window, 'load', initializemaldon); /*the following map wouldnt show within hidden tab set timer on www.w3schools.com/js/js_timing.asp www.stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture*/ var refreshintervalid; function showmap() { document.getelementbyid('googlemap2').style.display = ''; refreshintervalid = setinterval(function () { updatemaptimer() }, 10); } function updatemaptimer() { clearinterval(refreshintervalid); var norwich = new google.maps.latlng(52.627970, 1.298478); var mapprop2 = { center:norwich, zoom:15, scrollwheel: false, draggable: false, maptypeid:google.maps.maptypeid.roadmap }; var map2=new google.maps.map(document.getelementbyid("googlemap2"),mapprop2); var marker2=new google.maps.marker({ position:norwich, animation:google.maps.animation.bounce }); marker2.setmap(map2); var infowindow2 = new google.maps.infowindow({ content:"<img class='logopad' src='images/logo.png' width='140px' alt='abbeystone property management logo'>", maxwidth: 140 }); infowindow2.open(map2,marker2); } </script> </head> <body> <div class="container fill"> <?php include 'header.php';?> <div class="carousel slide" id="mycarousel"> <div class='logooverlay'> <div class=""> <div class="logoimage"><img src="images/homepage/ombudsmanlogo.png" alt="ombudsman service logo"></div> <div class="logoimage"><img src="images/homepage/arma-logo.jpg" alt="arma logo"></div> <div class="logoimage"><img src="images/homepage/fedofmastbuildlogo.gif" alt="fed. of master builders logo"></div> </div> </div> <div class="carousel-inner"> <div class="active item"> <div class="fill" style='background-image: url("images/homepage/home2.jpg");'> <div class="container"> <div class="row nomargin"> <div class="col-xs-10 col-xs-offset-1 col-md-10 col-md-offset-1 contframe"> <div class="row " id="contactdiv"> <ul class="nav nav-tabs " id="mytab"> <li class="active"><a href="#tab1" data-toggle="tab">head office</a></li> <li><a href="#tab2" onclick="showmap()" data-toggle="tab">norwich branch</a></li> </ul> <div class="tab-content my-tab"> <div class="tab-pane active" id="tab1"> <div class="col-sm-4"> <h3 class="movedown10">contact </h3> <hr /> <p> </p> <hr /> <h4><span class="glyphicon glyphicon-earphone"></span> <b>01621 842711</b></h4> <hr /> <div class="container"> <a href="#mymodal" role="button" class="btn btn-info " data-toggle="modal"> <span class="glyphicon glyphicon-envelope"> </span> send message</a> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h4 class="modal-title">messaging</h4> </div> <!--end modal-header--> <div class="modal-body"> <hr> <form id="messagemaldon" class="form-horizontal"method="post" action="send_form_email.php"> <div class="form-group"> <label class="col-lg-2 control-label" for="inputname">name</label> <div class="col-lg-10"> <input class="form-control required" name="inputname" id="inputname" placeholder="name" value="" type="text" title="please enter name"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="inputemail">email</label> <div class="col-lg-10"> <input class="form-control required email" name="inputemail" id="inputemail" placeholder="email" value="" type="text" title="please enter valid email address"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="inputphone">phone</label> <div class="col-lg-10"> <input class="form-control required number" name="inputphone" id="inputphone" placeholder="phone" value="" type="text" title="please enter phone number using numbers only"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="inputmessage">message</label> <div class="col-lg-10"> <textarea class="form-control required" name="inputmessage" id="inputmessage" placeholder="message" rows="6"></textarea> <!--<button class="btn btn-success pull-right" type="submit" value="submit">send!</button>--> </div> </div> <div class="form-group"> <div class="col-md-6"> <button type="submit" value="submit" class="btn btn-success pull-right" >send</button> </div> </div> </form> </div> <!--end modal-body--> </div> <!--end modal-content--> </div> <!--end modal-dialog--> </div><!-- end mymodal--> </div> </div><!-- end col-sm-4--> <div class="col-sm-8 map "> <h4><span class="glyphicon glyphicon-map-marker"></span> our location</h4> <div id="googlemap1"></div> </div> </div><!-- end tab-pane --> <div class="tab-pane" id="tab2"> <div class="col-sm-4"> <h3 class="movedown10">contact </h3> <hr> <p> </p> <hr /> <h4><span class="glyphicon glyphicon-earphone"></span> <b></b></h4> <hr> <div class="container"> <a href="#mymodal" role="button" class="btn btn-custom " data-toggle="modal"> <span class="glyphicon glyphicon-envelope"> </span> send message</a> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h4 class="modal-title">messaging</h4> </div> <!--end modal-header--> <div class="modal-body"> <hr> <!-- <form class="form-horizontal"> <div class="form-group"> <label class="col-lg-2 control-label" for="inputname">name</label> <div class="col-lg-10"> <input class="form-control" id="inputname" placeholder="name" type="text"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="inputemail">email</label> <div class="col-lg-10"> <input class="form-control" id="inputemail" placeholder="email" type="email"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="inputphone">phone</label> <div class="col-lg-10"> <input class="form-control" id="inputphone" placeholder="phone" type="phone"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="inputmessage">message</label> <div class="col-lg-10"> <textarea class="form-control" id="inputmessage" placeholder="message" rows="6"></textarea> <button class="btn btn-success pull-right" type="submit">send!</button> </div> </div> </form>--> </div> <!--end modal-body--> </div> <!--end modal-content--> </div> <!--end modal-dialog--> </div><!-- end mymodal--> </div> </div><!-- end col-sm-4--> <div class="col-sm-8 map "> <h4><span class="glyphicon glyphicon-map-marker"></span> our location</h4> <div id="googlemap2"></div> </div> </div><!-- end tab-pane --> </div><!-- end tab-content --> </div><!--end contactdiv--> </div> <!--end col-xs-10 col-xs-offset-1--> </div><!--end row--> </div> </div> </div> </div> </div> </div> <?php include 'footer.php';?> <!-- javascript @ bottom of page faster page loading --> <!-- first try online version of jquery--> <script src="includes/js/jquery-2.1.1.min.js"></script> <!-- if no online access, fallback our hardcoded version of jquery --> <script>window.jquery || document.write('<script src="includes/js/jquery-2.1.1.min.js"><\/script>')</script> <!-- bootstrap js --> <script src="bootstrap/js/bootstrap.min.js"></script> <!-- custom js --> <script src="includes/js/script.js"></script> <!-- jquery validation --> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> <script> $(document).ready(function() { $('#messagemaldon').validate(); }); // end ready </script> </body> </html> php:
<?php if(isset($_post['inputemail'])) { // edit 2 lines below required $email_to = "blah@blahblahblah.net"; $email_subject = "customer enquiry"; function died($error) { // error code can go here echo "we sorry, there error(s) found form submitted. "; echo "these errors appear below.<br /><br />"; echo $error."<br /><br />"; echo "please go , fix these errors.<br /><br />"; die(); } // validation expected data exists if(!isset($_post['inputname']) || !isset($_post['inputphone']) || !isset($_post['inputemail']) || !isset($_post['inputmessage'])) { died('we sorry, there appears problem form submitted.'); } $inputname = $_post['inputname']; // required $inputphone = $_post['inputphone']; // required $inputemail = $_post['inputemail']; // required $inputmessage = $_post['inputmessage']; // required $error_message = ""; $string_exp = "/^[a-za-z\s.'-]+$/"; if(!preg_match($string_exp,$inputname)) { $error_message .= 'the name entered not appear valid.<br />'; } $num_exp = "/^[0-9\s.'-]+$/"; if(!preg_match($num_exp,$inputphone)) { $error_message .= 'the number entered not appear valid.<br />'; } $email_exp = '/^[a-za-z0-9._%-]+@[a-za-z0-9.-]+\.[a-za-z]{2,4}$/'; if(!preg_match($email_exp,$inputemail)) { $error_message .= 'the email address entered not appear valid.<br />'; } if(strlen($inputmessage) < 2) { $error_message .= 'the message entered not appear valid.<br />'; } if(strlen($error_message) > 0) { died($error_message); } $email_message = "message sent via contact page on abbeystone website.\n\n"; function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $email_message .= "name: ".clean_string($inputname)."\n"; $email_message .= "phone: ".clean_string($inputphone)."\n"; $email_message .= "email: ".clean_string($inputemail)."\n"; $email_message .= "message: ".clean_string($inputmessage)."\n"; // create email headers $headers = 'from: '.$inputemail."\r\n". 'reply-to: '.$inputemail."\r\n" . 'x-mailer: php/' . phpversion(); @mail($email_to, $email_subject, $email_message, $headers); //sleep(3); echo "<meta http-equiv='refresh' content=\"0; url=http://www.abbeystone.net/contact.php\">"; echo "<script>alert('thankyou message sent successfully.'); </script> "; } ?>
it seems me positioning within html markup of #mymodal element causing safari render modal if child element (as indeed how have positioned it).
from bootstrap documentation:
modal markup placement
always try place modal's html code in top-level position in document avoid other components affecting modal's appearance and/or functionality.
also way in modal renders in chrome doesn't seem ideal either renders under header , footer elements - rather being on-top of page elements (but centred less noticeable).
to fix issue reposition modal div , contents after trigger button before </body> close tag:
broken markup (current)
<a href="#mymodal" role="button" class="btn btn-info " data-toggle="modal"> <span class="glyphicon glyphicon-envelope"> </span> send message </a> //reposition below fix <div class="modal fade in" id="mymodal" aria-hidden="false" style="display: block; padding-left: 0px;"> //form , stuff... </div> fixed markup
<div class="modal fade in" id="mymodal" aria-hidden="false" style="display: block; padding-left: 0px;"> //form , stuff... </div> </body>
Comments
Post a Comment