Full screen search bar on mobile

[danielecelsa07]

Hello, this is Fabrizio (I’m Daniele co-worker, he is the one who bought the plugin but we’re using it together in our website Here) and first of all I don’t have words to say how this plugin is amazing! Is the only one out there that let me achieve what I want to achieve, so thank u so so much!
And if I can give a feedback I think is worth it much more of the price you ask for!

Said that, what I really really want to achieve (from mobile) is something like in this video https://streamable.com/ky0h9
I mean that, on click, the bar goes on top and the result area become full screen.
Would you mind to tell me how can I achieve that?

Thank you so much,
Fabrizio

[Ernest Marcinko]

Hi Fabrizio,

Thank you very much for your kind words!

Well, I am not sure if this is possible without major modifications – but there are a few tricks you can try.
I would start by creating a javascript event handler, when the plugin input is focused, then the plugin container is changed to a “fixed” position, with a 0 top, left and right value. Then another event handler would handle when the input looses the focus, something like this:

jQuery(function($){
	$('.asp_m input.orig').on('focus', function(){
		$(this).closest('.asp_m').css({
			'position': 'fixed',
			'top': 0,
			'left': 0,
			'right': 0
		});
	});
	$('.asp_m input.orig').on('blur', function(){
		$(this).closest('.asp_m').css({
			'position': 'static'
		});
	});
});

This will move the search to the top on focus, and move it back on blur. It should be a good start, but still you will have to include a detection for mobile devices, and make some adjustmends of course.

[danielecelsa07]

You cannot access this content.

[Ernest Marcinko]

Hi Fabrizio,

Unfortunately I am not available for custom jobs. I usually suggest either wpkraken or searching for devs on Envato Studio.

[danielecelsa07]

You cannot access this content.

[Ernest Marcinko]

You cannot access this content.

[Author]

Posts