2

I've got the following code on my site:

<!-- Boat weather widget -->
<div id="boat_weather_tab_container">
    <div id="boat_weather_tab">
        <script type="text/javascript" src="widget.js"></script>
    </div>
    <div id="boat_weather_tab_button">
        <img src="images/blank150.gif">
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#boat_weather_tab_button").click(function(){
        // boat_weather_tab_hidden = 1 on page load
        if (boat_weather_tab_hidden) {
            $("#boat_weather_tab").animate({
                marginTop: "-1px"
            }, 500);
            boat_weather_tab_hidden = 0;
        } else {
            $("#boat_weather_tab").animate({
                marginTop: "-254px"
            }, 500);
            boat_weather_tab_hidden = 1;
        }
    });
});
</script>

Now the client wants #boat_weather_tab to slide back up not just when #boat_weather_tab_button is clicked, but when the user clicks anywhere else on the page, which I understand to be the equivalent of when the parent container div #boat_weather_tab_container loses focus.

What is the jQuery I would need to accomplish this?

WNRosenberg
  • 1,862
  • 5
  • 22
  • 31
  • `.focusout()`: http://api.jquery.com/focusout/ – sje397 Dec 13 '10 at 15:19
  • possible duplicate of [jQuery hide element when clicked anywhere on the page](http://stackoverflow.com/questions/714471/jquery-hide-element-when-clicked-anywhere-on-the-page) – user113716 Dec 13 '10 at 15:22
  • @sje: `.focusout()` is generally meant for elements that have descendant `` elements. A `
    ` itself can't have focus in the sense that `focusout` requires.
     – user113716 Dec 13 '10 at 15:29

2 Answers2

1

Maybe

$(document).click(function(event)
{
 if(boat_weather_tab_hidden==0 && $("#boat_weather_tab").queue()==0 )
 {
   $("#boat_weather_tab").animate({
                marginTop: "-254px"
            }, 500);
            boat_weather_tab_hidden = 1;

 }
});

Not tested, but the idea is the document click will now only hide the boat when it is not currently animating

Matt
  • 3,778
  • 2
  • 28
  • 32
  • This is really close. When I click `#boat_weather_tab_button`, it slides down correctly, but then slides back up as soon as the first animation ends. – WNRosenberg Dec 13 '10 at 16:00
  • Actually, this works perfectly, I just had to add `return false;` after each animate in my original function to prevent this animate from firing. – WNRosenberg Dec 13 '10 at 16:28
  • The `&& $("#boat_weather_tab").queue()==0` you added ensures that the div won't close if the user clicks somewhere else before the animation finishes playing. I have another problem now: can you think of a way to prevent document clicks within `#boat_weather_tab` from triggering the animation. – WNRosenberg Dec 13 '10 at 16:53
  • The 'event' parameter should have the coordinates of the mouse, so the method that first comes to mind is to compare the mouse coords against the location+dimensions of the tab to determine if a click was inside the tab or not. I did a quick search to see if there is a jquery method that already does this, but I didn't find one. – Matt Dec 14 '10 at 09:12
0

You might be able to use the blur event. It is essentially the act of losing focus.

$("#boat_weather_tab_container").blur(function() {
    //code to run on blur
});
Jeremy
  • 3,221
  • 7
  • 27
  • 31