Focus/Blur Trigger?

Design help General
1

Hello Community,

Really easy question here. I did some searching and nothing obvious returned. I am creating a quick search box for my site. I got it so that it expands out and collapses as expected. However, what I want to do is also hide it whenever i lose focus of the container altogether. That way it is not taking up space when the user clicks somewhere else on the site.

Is this possible?

Thank you,
Michael

2

Hi Mike,
I probably guess what you talking about, but not sure.
Could you show some examples or screenshots, so it will be more clear, please.

Regards,
Anna

3

I can do better than that @sabanna, I can show you live working code. :smiley:

http://microsoftwins.com

Behold the search in top right. When you click the search, it pops out. However, the only way to roll it back in is to click the search again. What happens when the user clicks away to the site? The search is still out there. I would like to retract the search when the user places their attention elsewhere in the site.

Thank you,
Michael

4

Hey,

I dont have a perfect solution. Maybe there is someone out there who has better skills than me.
But for the basics, its just something like this that you ll need to copy/paste in your “custom code body field”:

Give your search form a unique ID.

Then paste this code:
(dont forget to include the script tags)

$(function() {
    $(document).on('click', function(e) {
        if (e.target.id == 'YOURID') {
			document.getElementById("YOURID").style.transform = "translateX(150px)";
        } else {
			document.getElementById("YOURID").style.transform = "translateX(0px)";
        }
    })
});

You ll need to change the numbers here in order to get a good result. (150px is just an example).
Then also dont forget to go to your SEARCH FORMFIELD Element in Webflow Designer and choose a
“Effect → Transition” e.g.

Regards
Daniel

5

Well that’s a start. I already have a move interaction that does this. Is there any way I could call that instead of using translate?

Also, I am a little confused on the Effect->Transition. That is, I do not see how the provided script ties in with the transition.

Keep in mind I am a newb here as well, so I am learning just like you! :smiley:

6

Hello again, Mike.

If you search form closing by interaction, you can try to apply same interaction to the body. So if user click on the body it will close search form. But in this case I am afraid, that it will be hard to actually type inside the form.

Well, you can try. Maybe it will help.

Regards,
Anna

7

Exactly the interaction style i was thinking about

8

The Effect → Transition will add a css property to the element with that #ID.

And the script searches an element with that specific id and adds a transform movement (x-axis) when its clicked.
Since you then already have a transition added via the css styling on that element, it will run smoothly :).

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.