Page 1 of 1
Fade on clickaway or on link
Posted: Wed Sep 10, 2014 5:41 am
by simonmlewis
I'm trying to find a way that when someone clicks away from a DIV that has appeared, it disappears.
We use it for Ajax search, the DIV comes up and results pop in as they type, but when they click away, it's not going away.
I don't know if there is a non JS way to do it.
I've found methods where when you click away from the DIV and it disappears - problem there is this DIV must stay on, so that if they search, it works. So I am thinking if there was a Button/Link in presearch.php that runs the queries, could a link in there, make it is disappear, or clear something.
I don't think the DIV called "hintbox" should disappear, as if it does, and you go to do a search again, I don't think it would return, as it's now "hidden", unless a "fade" might work, and when you enter into the search again, it would just activate again.
I just need something, most likely in the search popup itself that says "close", that would make it go.
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 5:45 am
by simonmlewis
I need it to be like the Facebook Ajax search for people. Click away, and it goes, click back and it appears.
How do you do it??
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 7:03 am
by Celauran
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 8:19 am
by simonmlewis
I just replied to this but it doesn't go thru.
Sorry no that's not really it.
The DIV appears when you start keyup typing, like it does on Facebook.
I need to either have it disappear when you click away, but then appear again when you click in it, OR, have a link in the presearch.php that appears via Ajax, that makes it go away.
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 8:31 am
by Celauran
simonmlewis wrote:The DIV appears when you start keyup typing
I don't think I've encountered anything like that. Certainly nothing like that in the fiddle you posted.
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 8:35 am
by simonmlewis
Try Facebook. See what it does.
The issue is, the ajax DIV that pops up when you search goes over the other thing son the page, so need to be able to remove it. Cannot see a way of doing that, which doesn't prevent it from appearing again.
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 8:42 am
by Celauran
If I just start typing on Facebook, nothing happens.
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 8:46 am
by simonmlewis
Huh? In the search at the top, after u have logged in, names come up.
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 8:58 am
by Celauran
Sounds like you're looking for something like this
http://jsfiddle.net/0L0ovujt/
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 9:05 am
by simonmlewis
Nearly there.
Code: Select all
<input class='search' name="q" placeholder="Search..." type="text" onKeyUp="precheck(this.value)">
<div id='srcHint' class='hintbox'>
</div>
presearch.php runs queries based on $q.
With #srcHint { display:none;}, the results never show up, as it's told to "none" display.
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 9:55 am
by Celauran
So you unhide it when you get results back. Get rid of this
and replace it with a jQuery listener since you're already using jQuery to control the display of #srcHint.
Re: Fade on clickaway or on link
Posted: Wed Sep 10, 2014 10:04 am
by simonmlewis
How do I do that? Happy to try!!
Re: Fade on clickaway or on link
Posted: Mon Sep 15, 2014 11:17 am
by simonmlewis
I'm now trying this code, as it may be a really good solution, however, using this... it work as is. what am I doing wrong?
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<style type='text/css'>
#results {
display: none;
}
</style>
<script type='text/javascript'>
$(function(){
$('#search').on('focus', function() {
$('#results').show();
}).on('blur', function() {
$('#results').hide();
});
});
</script>
</head>
<body>
<input type="text" id="search">
<div id="results">
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</body>
</html>