Fade on clickaway or on link

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Fade on clickaway or on link

Post by simonmlewis »

Code: Select all

http://jsfiddle.net/FWLF3/1/
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Fade on clickaway or on link

Post 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??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Fade on clickaway or on link

Post by Celauran »

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Fade on clickaway or on link

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Fade on clickaway or on link

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Fade on clickaway or on link

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Fade on clickaway or on link

Post by Celauran »

If I just start typing on Facebook, nothing happens.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Fade on clickaway or on link

Post by simonmlewis »

Huh? In the search at the top, after u have logged in, names come up.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Fade on clickaway or on link

Post by Celauran »

Sounds like you're looking for something like this http://jsfiddle.net/0L0ovujt/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Fade on clickaway or on link

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Fade on clickaway or on link

Post by Celauran »

So you unhide it when you get results back. Get rid of this

Code: Select all

onKeyUp="precheck(this.value)"
and replace it with a jQuery listener since you're already using jQuery to control the display of #srcHint.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Fade on clickaway or on link

Post by simonmlewis »

How do I do that? Happy to try!!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Fade on clickaway or on link

Post 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>

Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply