search on mobile phones is broken

When we click the search button the search box appears but as soon as we click the search input field and the keyboard on the phone appears the search input box hides again. I disable the user scalablity to as the page was zooming in when the input box was clicked but that doesn’t solve the issue either.
 
URL: http://www.fourhorsemen.in/
Try the search field in a mobile phone (I tested in iPhone) 
 
Regards,
Adrian

1 answer

Profile photo of tuan le van 11570.00 $tone June 16, 2015
Public

Hi adrianknight,
I have an update news for your ticket. To fix the issue, please follow these steps:
1. Go to appapp\design\frontend\gem\default\template\page\html
2. Open file header.phtml
3. Update code at the 54th to 104 line: change

var inner_toggle = $("#jm-quickaccess, #jm-setting, #jm-search, #jm-mycart");
if (detectmob()) {
inner_toggle.click(function () {
if (!$(this).children(".inner-toggle").hasClass("active")) {
inner_toggle.children().removeClass("active");
inner_toggle.removeClass("active");
$(this).children().addClass("active");
$(this).addClass("active");
if (!jQuery('#jmoverlay').length) {
jmoverlay = jQuery('<div id="jmoverlay" class="jmoverlay" style="opacity: 0 !important;"></div>');
jmoverlay.appendTo('#jm-wrapper');
jmoverlay.bind("click", function () {
inner_toggle.removeClass('active').children().removeClass("active");
jQuery(this).remove();
});
}
setupIscroll($(this));
} else {
inner_toggle.children().removeClass("active");
inner_toggle.removeClass("active");
$("#jmoverlay").remove();
}
});

to 

var inner_toggle = $("#jm-quickaccess, #jm-setting, #jm-search, #jm-mycart");
if (detectmob()) {
var inner_toggle = $("#jm-quickaccess, #jm-setting, #jm-mycart");
inner_toggle.click(function () {
if (!$(this).children(".inner-toggle").hasClass("active")) {
inner_toggle.children().removeClass("active");
$('#jm-search').children().removeClass("active");
inner_toggle.removeClass("active");
$(this).children().addClass("active");
$(this).addClass("active");
if (!jQuery('#jmoverlay').length) {
jmoverlay = jQuery('<div id="jmoverlay" class="jmoverlay" style="opacity: 0 !important;"></div>');
jmoverlay.appendTo('#jm-wrapper');
jmoverlay.bind("click", function () {
inner_toggle.removeClass('active').children().removeClass("active");
jQuery(this).remove();
});
}
setupIscroll($(this));
} else {
inner_toggle.children().removeClass("active");
inner_toggle.removeClass("active");
$("#jmoverlay").remove();
}
});

$('#jm-search .btn-toggle').click(function (){
if(!$(this).hasClass("active")) {
inner_toggle.children().removeClass("active");
$(this).parent().children().addClass("active");
}else{
$(this).parent().children().removeClass("active");
$("#jmoverlay").remove();
}
});

4. Click [Save] button
Have a look and let’s me know how it goes.
Best regards,
Kan

#1

Please login or Register to Submit Answer

Written By

Comments