title: jQuery Keep a popup from going off the bottom of the screen
body: <p>I have gallery of images in a grid. When you hover on an image a larger one appears in a hovering div called .popup. I need to keep this popup from showing off screen when the user hovers over an image close to the bottom of the visible browser window. Here is the html</p>
  
  <pre><code>        &lt;li&gt;
              &lt;div class="inner"&gt;
                  &lt;img src="photos/photo.jpg"&gt;
                  &lt;div class="subcat-image-name"&gt;
                      photo
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="popup"&gt;
                  &lt;img src="photos/photo.jpg"&gt;
                  &lt;div class="popup-text"&gt;
                      some text
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>The .popup div is set to visibility:hidden and then visibility:visible on hover over the image. Here is my jQuery to keep the popup on screen, but I can't get it to do anything:</p>
  
  <pre><code>$('.popup').bind('visibility:visible', function(event) {
       w = $(window).height();
       var position = $(this).position();
       var distancefrombottom = w - position.top;
       if ( distancefrombottom &lt; 500 ) {
           $(this).css('bottom','20px');
       }
   });
  </code></pre>