Search button function

alederodesign
(@alederodesign)

10 years, 1 month ago
Hello,
I have added three icon images in the header with this function as you suggested me in the previous messages:
```
function meso_custom_icon() { ?>
	<ul class="icone">

<li><a href="https://www.facebook.com/DWGlab/?fref=ts"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/fb.png"></a></li>
<li><a href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/a.png"></a></li>
<li><a href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/cerca.png"></a></li>
<?php }
add_action('bp_inside_top_nav','meso_custom_icon');
```
[Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been damaged by the forum’s parser.]

It’s a menu icon. Now my customer would like the third link ( which shows a lens ) can function as a search button. So I’m wondering if is possible to add a javascript function so when i click the lens it appears an input search.
Thank you for any kind of suggestion

Alessandra

Viewing 4 replies - 1 through 4 (of 4 total)

Theme Author Richie KS
(@rkcorp)

10 years, 1 month ago
maybe something like this
```
function meso_custom_icon() { ?>
	<ul class="icone">
<li><a href="https://www.facebook.com/DWGlab/?fref=ts"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/fb.png"></a></li>
<li><a href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/a.png"></a></li>
<li><div class="search-lens"><?php get_search_form(); ?></div><a class="search-click" href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/cerca.png"></a></li>
<?php }
add_action('bp_inside_top_nav','meso_custom_icon');
```
see i’ve edit code in your functions
<li><div class="search-lens"><?php get_search_form(); ?></div><a class="search-click" href="#"><img src="http://www.alesitiprova.it/wp-content/uploads/2016/02/cerca.png"></a></li>

and add this to style.css or customize->general->custom css

div.search-lens {display:none;}

and add this to lib/scripts/custom.js, right after
jQuery(document).ready(function() {
```
jQuery(".search-click").click(function(){
jQuery(".search-lens").show('fast');
}
```
Thread Starter alederodesign
(@alederodesign)

10 years, 1 month ago

Thank you Richie,
i think you are close to my solution. But now what’s happening is that when i click on the icon lens, all the whole menu disappear.
Maybe I should work on the custom css?

Thread Starter alederodesign
(@alederodesign)

10 years, 1 month ago

Yes it’s definitely was I’m looking for. I worked a bit the custom css and now it’s almost ok.
I would like also that when i click the lens it hides the input form… I guess the code is the opposite:
`jQuery(“.search-lens”).hide(‘fast’);

I’m only wondering how to put it in the correct way in the custom.js

Can you help me with this?
Thanks a lot
Theme Author Richie KS
(@rkcorp)

10 years, 1 month ago
need to edit the previous code
```
jQuery(".search-click").click(function(){
jQuery(".search-lens").toggle('fast');
}
```
show to toggle might work.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Search button function’ is closed to new replies.

Tags