Make a div fade out on focus of a text area

Question

I have a div that I'd like to have fade out using JavaScript when a certain text area is clicked/focused. Is this possible?

Text area HTML

<label for="message">Message:</label>
    <textarea name="message" id="message" wrap="physical" 
         placeholder="What's on your mind?">
    </textarea>

HTML for div I'd like to fade out

<div id="bubble">
    <img src="images/hire_me_bubble.png" alt="Hire me" />
</div>

CSS for bubble

#bubble{
    width:201px;
    height:189px;
    position:absolute;
    left:416px; 
    top:300px; 
    z-index: 99;
    overflow:visible;
}

What exactly do you not know how to do? Specifying which element you want to use? Handling clicks on an element? Fading an element out? — Matt Zeunert, Sep 03 '12 at 20:24
I've tried using my current fade in/out JavaScript used for another area of the site (it's used when the user scrolls past a certain point, a div appears) but I don't know how to go about getting it to recognise when the textarea is in focus as the event that begins the JavaScript. — Francesca, Sep 03 '12 at 20:24
@Mat - I don't even know if this is possible, for a start, hence my vague query. I've already got some fadein/out JavaScript in use but I have no idea how to specify it to trigger on focus of a text area, if that's even possible. — Francesca, Sep 03 '12 at 20:25
`$("#message").on('focus blur', function() {$("#bubble").fadeToggle();});` — adeneo, Sep 03 '12 at 20:38

score 1 · Answer 1 · answered Sep 03 '12 at 20:26

1

Try this:

$("#message").focus(function() {
    $("#bubble").fadeOut();
}).blur(function() {
    $("#bubble").fadeIn();
});

It binds two events to the textarea, one to the focus event, and one to the blur event. http://jsfiddle.net/FzmW2/

If you don't want it to fade back in, remove the .blur part.

answered Sep 03 '12 at 20:26

ThoKra

2,959
2
27
38

+1 Also note that you don't have to handle the click event when the textarea is clicked because `focus` will be triggered anyway. – Matt Zeunert Sep 03 '12 at 20:28
Could you tell me, is it required for the bubble div to be within the same containing div as the textarea? I am having trouble getting this to work. Live site is www.jamesperrett.co.uk/testsite and the bubble/textarea can be seen in the contact form section. – Francesca Sep 03 '12 at 20:44
The code I gave you is accessing the textarea and div by ID, so they can be anywhere in the document. But it did seem to work when I tested it with Chrome. – ThoKra Sep 03 '12 at 23:52

score 0 · Answer 2 · answered Sep 03 '12 at 20:25

0

$('#message').bind('focus', function(){
    $('#bubble').fadeOut();
 });

answered Sep 03 '12 at 20:25

Klaus Byskov Pedersen

117,245
29
183
222

I've tried this but can't seem to make it work at all. Any ideas where I may be going wrong? www.jamesperrett.co.uk/testsite – Francesca Sep 03 '12 at 21:09

Make a div fade out on focus of a text area

2 Answers2