Search box problems

Answered

Public

Michael Alvarez asked November 7, 2014

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.

iTech

1 answer

Vote Up

Vote Down

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.