I placed a jQuery colorbox that brings up a text input field, but for some reason I cannot type in the input field on my mobile. But it works on my desktop. When I put cursor on some field it doesn't places on input field. It starts some loading instead. And then brings me back to default position (colorbox is still open and I can't place cursor on text fields. The only way I can place cursor and text into the field is holding some time on text field. Then "Paste" option arises. So I can paste text in text fields, but I cannot type in.
HTML (a form that appears in colorbox):
<div class="compare" style="margin-top: 20px;"><a id="fast_order" href="#fast_order_form" class="button" />Купить в 1 клик</a></div> <div style="display:none"> <div id="fast_order_form"> <input id="product_name" type="hidden" value="<?php echo $heading_title; ?>"> <input id="product_price" type="hidden" value="<?php echo ($special ? $special : $price); ?>"> <div class="fast_order_center"><?php echo $heading_title; ?> — ваш заказ</div> <div class="fast_order_left"> <p>Имя:</p> <p>Телефон:</p> <p>Комментарий:</p> </div> <div class="fast_order_right"> <p><input type="text" id="customer_name"/></p> <p><input type="text" id="customer_phone"/></p> <p><input type="text" id="customer_message"/></p> </div> <div class="fast_order_center"> <p id="fast_order_result">Пожалуйста, укажите ваше имя и телефон</p> <button class="fast_order_button"><span>Подтвердить</span></button> </div> </div> </div> CSS (CSS for this colorbox form):
#fast_order_form .fast_order_left { display: inline-block; width: 29%; text-align: right; } #fast_order_form .fast_order_right { float: right; display: inline-block; width: 68%; text-align: left; } #fast_order_form .fast_order_right p { margin-bottom: 15px; padding: 0px; } #fast_order_form .fast_order_center { text-align: center; margin-bottom: 20px; margin-top: 10px; } #fast_order_form #fast_order_result { color: #aaa; margin-bottom: 14px; } #fast_order_form #fast_order_result .fast_order_error { color: #f00; } #fast_order_form #fast_order_result .fast_order_success { color: #00d12a; } #fast_order_form p { margin-bottom: 22px; padding: 0px; } #fast_order_form input { margin: 0px; padding: 0px; height: 20px; width: 220px; } #fast_order_form .fast_order_button { font-size: 17px; cursor: pointer; height: 40px; width: 220px; } Colorbox button click handler:
$(document).ready(function () { $('#fast_order').colorbox({href:"#fast_order_form",inline:true, width:"650px", height:"330px", class: "colorbox", title:" "}); $('#fast_order_form .fast_order_center button').click(function () { var product_name = $('#product_name').val(); var product_price = $('#product_price').val(); var customer_name = $('#customer_name').val(); var customer_phone = $('#customer_phone').val(); var customer_message = $('#customer_message').val(); $('#result').html('Обрабатываем введенные данные..'); // $.post('./fast_order.php', { 'product_name': product_name, 'product_price': product_price, 'customer_name': customer_name, 'customer_phone': customer_phone, 'customer_message': customer_message }, function (data) { if (data == 'empty') { $('#fast_order_result').html('<span class="fast_order_error">Обязательно укажите ваше имя и телефон, иначе мы не сможем вам перезвонить!</span>'); } else { $('#fast_order_result').html('<span class="fast_order_success">Ваш заказ успешно оформлен!</span><br /><span>Мы перезвоним вам в течение дня. <a onclick="$(window).colorbox.close();">Закрыть</a> это окно?</span>'); } }); $.post('http://chico.esy.es/fast_order.php', { 'product_name': product_name, 'product_price': product_price, 'customer_name': customer_name, 'customer_phone': customer_phone, 'customer_message': customer_message }, function (data) { if (data == 'empty') { $('#fast_order_result').html('<span class="fast_order_error">Обязательно укажите ваше имя и телефон, иначе мы не сможем вам перезвонить!</span>'); } else { $('.fast_order_button').css('display','none'); $('#fast_order_result').html('<span class="fast_order_success">Ваш заказ успешно оформлен!</span><br /><span>Мы перезвоним вам в течение дня. <a onclick="$(window).colorbox.close();">Закрыть</a> это окно?</span>'); } }); }); }); Update:
I found the code fragment that causes problem, but can't figure out whats wrong.
<script type="text/javascript"> jQuery.colorbox.settings.maxWidth = '95%'; jQuery.colorbox.settings.maxHeight = '95%'; var resizeTimer; function resizeColorBox() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { if (jQuery('#cboxOverlay').is(':visible')) { jQuery.colorbox.load(true); } }, 300); } jQuery(window).resize(resizeColorBox); window.addEventListener("orientationchange", resizeColorBox, false); </script> For example, if I set 30000 instead of 300 everything works. Who knows how to properly fix the problem?
