Search box problems

Hi,

There is a big problem or "BUG", the search box at top right for this template. The issue is when our clients/final user try to search something if you are typing and move the mouse out of the little search box it disappear and don’t let you finish the typing. The final user need to keep the mouse over the little search box all the time. Normally when you start typing is you leave the mouse, an move it out of the box. This should switch on/off appear/disappear only if you click the search button, not if you mouse_out.

This is really a painful/frustrated for final users.. And the search box is one of the most important things, if is not the most important, this should be very visible and easy to use for final user. How this problem can be fix? or how we can a fixed search box that can work for laptop and mobile layout?

Thanks in advance.

1 answer

Profile photo of Seoki Lee 1510.00 $tone November 18, 2014
Public

Dear Michael,

It isn’t bug, it is effect “mouseenter” and “mouseleave” so box search can active when you move the mouse into this box. If you don’t like this, you can change effect to “click” by editing file app\design\frontend\default\jm_itech\template\page \html\header.phtml:

-- At line 161, replace this rule:

Code:

inner_toggle.mouseenter(function (){

With:

Code:

inner_toggle.not('#jm-search').mouseenter(function () {

-- At line 168, after this rule:

Code:

}else{
	inner_toggle.mouseenter(function (){
		if(!$(this).siblings(".inner-toggle").hasClass("active")) {
			$(this).children().addClass("active");
		}
	}).mouseleave(function (){
		$(this).children().removeClass("active");
		$("#jmoverlay").remove();
	});

Add this rule:

Code:

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

Note: Disable your site cache in your site back-end (System>>Cache Management) before changing.

#1

Please login or Register to Submit Answer

Written By

Comments